Skip to content

Latest commit

 

History

History
391 lines (241 loc) · 5.74 KB

backbone.textile

File metadata and controls

391 lines (241 loc) · 5.74 KB
Raw

title: Architecture for large scale backbone applications
author: Jean Carlos Meninno & Jorge Dias
description: Managing complexity with backbone applications
date: 2013-10-11

!SLIDE

Architecture for Big Backbone Applications

About us

!SLIDE

Jorge Dias

Tech lead developer at XING

!SLIDE

Jean Carlos Meninno

Frontend developer at XING

The good
old days

Not really

!SLIDE

Browser wars

  • Incompatible versions
  • Global space pollution
  • Javascript events in the html

!SLIDE

jQuery and others

  • Browser inconsistencies abstracted
  • Lots of plugins but often incompatible
  • Ad-hoc AJAX handling
  • Lack of client side templating

Modern
development

!SLIDE

MV* – Backbone and friends

  • Modular structure
  • Communication through events
  • Consistent interface to backend

!SLIDE

!SLIDE

The good parts

!SLIDE

Models and collections

  • Restful interface
  • Data and presentation are separated
  • Lifecycle events

!SLIDE

Views

  • Easy handling of dom events
  • React to model/collection events

!SLIDE

History

  • Routes handling
  • Back button keeps working
  • Push state (where available)
  • No full page reloads

!SLIDE

Others

  • Not opinionated
  • underscore integration
  • jQuery integration
  • Fits into existent projects
  • Small footprint

!SLIDE

The messy parts

!SLIDE

Zombies

!SLIDE

Types of zombies

  • Events
  • Views

!SLIDE

Not a framework

  • Setup your own conventions
  • No clear way to structure your app
  • Lacks specialized views
  • Make your own framework on top

!SLIDE

Others

  • No controllers
  • Mixed concerns between views and models
  • Huge routers

The Challenge

Rewrite the whole frontend in 4 months.
Previous version was 1.5 years in development.

!SLIDE

The constraints

  • Don’t screw up by learning another framework
  • Lots of time pressure
  • 80% of team was backend

!SLIDE

Alternatives Evaluation

  • Marionette
  • Chaplin
  • Thorax

!SLIDE

!SLIDE

What makes Marionette a good choice?

!SLIDE

Documentation

!SLIDE

Clean understandable code

!SLIDE

!SLIDE

Specialized views

  • Layouts
  • Region Manager
  • Collection/Composite View
  • ItemView

!SLIDE

Memory and events management

Good bye zombies

!SLIDE

Modules

  • Application structuring
  • Promotes modularity and encapsulation

!SLIDE

Controllers

  • General purpose coordinators

!SLIDE

Event buses

!SLIDE

Commands

App.commands.setHandler("log:request", function(request){
  console.log(request);
});

// Somewhere else
App.execute("log:request", request);

!SLIDE

Requests

App.reqres.setHandler("foo", function(bar){
  return bar + "-quux";
});

App.request("foo", "baz"); // => returns "baz-quux"

!SLIDE

Pub/sub

vent.on("foo", function(){
  console.log("foo event");
});

vent.trigger("foo"); // => "foo event" appears in console

!SLIDE

App routers

  • Router composition
  • Router as configuration

!SLIDE

Example

someController = {
  someMethod: function(){ /*...*/ }
};

Backbone.Marionette.AppRouter.extend({
  controller: someController,
  appRoutes: {
    "foo": "someMethod"
  }
});

Conventions

!SLIDE

Composite applications

!SLIDE

!SLIDE

Real Examples

!SLIDE

  1. User clicks on facet
  2. View triggers event
  3. Controller responds updating the search

!SLIDE

  1. User clicks on Profile
  2. View triggers event
  3. Controller executes command to navigate

!SLIDE

  1. Profiles app handles the command
  2. It initializes controller
  3. Controller requests profile model and renders the views

!SLIDE

Data layer

  • Models and collections contained in one place
  • Events all the way
  • Everything is a promise
  • Only place that instantiates models/collections

!SLIDE

// Inside entities/user
App.reqres.setHandler('user:current:entity', function () {
  return currentUser;
});

// Inside users/show/show_controller
// ...
currentUser = App.request('user:current:entity');

!SLIDE

// Inside entities/search
App.reqres.setHandler('search:new:entity', function () {
  return new Search();
})

// Inside search/new/new_controller
var newSearch = App.request('search:new:entity');
var view = new New.SearchFormView({model: newSearch});
this.layout.mainRegion.show(view)

!SLIDE

Core specialized classes

Patterns, patterns and more patterns

!SLIDE

Examples

  • Dropdowns
  • Forms
  • Layouts
  • Modals
  • Tooltips
  • etc

!SLIDE

Directory structure

  • Apps
  • Restful structure
  • Lib
  • Entities
  • Templates

Thank you

Cat picture for presentation completeness

Q & A