Chaplin Application Architecture with Backbone.js AdCloud TechTalk April 25th, 2012 Mathias Schäfer 9elements 

Hello! Mathias Schäfer (molily) molily.de Software developer Client-side JavaScript expert 9elements.com 

JavaScript Applications Backend communication OOP & Functional Programming Application Architecture Routing & History DOM Scripting HTML Templating Data Binding Modularization & Dependency Mgmt. Building & Packaging Unit and Functional Tests Coding Guidelines and Lints Documentation 

Every JavaScript application is a beautiful flower That is, JavaScript application development is a mess You’ve got plenty of options Few conventions and standards Every library has its own interpretation of patterns like MVC If you choose a development stack, you’re trapped 

Introducing Backbone.js backbonejs.org A simple and small library Popular and field-tested Actively developed Well-tested and readable code Free and open source Typically used with Underscore, jQuery and a templating engine (_.template, Mustache, Handlebars…) 

What Backbone.js can do for you Basically two ideas: Models fetch, process and store the raw data, Views render data and provide a user interface Routers/History save and restore application state using the URL 

Backbone Classes A Quick Overview Backbone.Events Backbone.Model Backbone.Collection Backbone.View Backbone.History Backbone.Router 

Backbone.Events Basis for an event-driven architecture Register event handlers and dispatch events Methods: on, off, trigger Backbone’s key feature Included by all other Backbone classes 

Backbone.Model Fetching, processing and storing data Key feature: the attributes hash Changes will fire change events Standard sync via RESTful HTTP 

var Car = Backbone.Model.extend(); var car = new Car({ name: 'DeLorean DMC-12', manufactured: 1981 }); alert( car.get('name') ); car.set({ manufactured: 1982 }); alert( car.get('manufactured') ); 

Backbone.View Holds a DOM element and renders the model data Knows about its model or collection Handles DOM events (user input) Observes model events (binding) Invokes model methods or triggers events 

var CarView = Backbone.View.extend({ initialize: function () { this.model.on('change', this.render, this); }, render: function () { this.$el.html('Name: ' + this.model.get('name')); } }); var carView = new CarView({ model: car, el: $('#car') }); carView.render(); 

Backbone.Router and Backbone.History A Router maps URLs to its methods History is the actual workhorse, observes URL changes and fires callbacks HTML5 History with Hash URI fallback Routers usually create models and views 

var CarRouter = Backbone.Router.extend({ routes: { "cars": "index", "cars/:id": "show" }, index: function () { var cars = new CarCollection(); var carsView = new CarsView({ collection: cars }).render(); cars.fetch(); }, show: function (id) { var car = new Car({ id: id }); var carView = new CarView({ model: car }).render(); car.fetch(); } }); var carRouter = new CarRouter(); Backbone.history.start(); 

Model Storage View Template DOM observes and modifies creates and handles input queries and syncs with renders Router creates 

Applications on Top of Backbone 

Backbone is just the beginning Minimalistic by intent Not a full-fledged solution No top-level patterns to structure an application. Not MVC, MVP or MVVM. No right answer by design, few conventions “There’s more than one way to do it” 

Backbone just points in the right direction “There’s incredibly little prescription about how to use the tools that Backbone provides, … the code I wrote … looks a lot different than what someone else might come up with. … [It’s] important to take [Backbone] for what it is: an uber-tiny library that gets you pointed in the right direction. What I really want to see are fuller-fledged frameworks that build on top of Backbone, because I think there’s a lot more that can be standardized beyond what Backbone offers.” – Rebecca Murphey, http://bit.ly/wdgCdn 

Abstraction Layers for Backbone Marionette https://github.com/derickbailey/backbone.marionette Thorax https://github.com/walmartlabs/thorax Layoutmanager https://github.com/tbranyen/backbone.layoutmanager Aura https://github.com/addyosmani/backbone-aura 

https://github.com/moviepilot/chaplin 

Meet Chaplin An application architecture on top of Backbone.js Derived from moviepilot.com, a real-world single- page application Current state: An example application In development: An external library + examples Free and open source https://github.com/moviepilot/chaplin 

Step 1/6 Enforce conventions and write readable code Define how and where to create models/views, fetch data, render views, subscribe to events, clean up etc. Extend the core classes of Backbone (Model, Collection, View) CoffeeScript class hierarchies with super calls as well as object composition CollectionView for rendering collections automatically 

Step 2/6 Loosely-couple Modules for a scalable architecture Module encapsulation, dependency management and packaging via RequireJS (AMD) Event-driven architecture: Cross-module communication using the Publish/Subscribe pattern Share information using Mediator object(s) 

Step 3/6 Separate routing and the code which creates a screen Backbone.Router makes it hard to track application- wide state and transition between screens Separate routing and the code which creates the models and views Introduce Controllers and reinvent the Router A controller represents a screen of the application 

Step 4/6 Manage top-level state (Chaplin’s development branch) Application creates core controllers ApplicationController creates and removes controllers tracks the current application state ApplicationView top-level view manager shows and hides the main views 

Mediator SomeController ApplicationController Router SomeView ApplicationView SomeModel Application 

Mediator SomeController ApplicationController Router SomeView ApplicationView SomeModel Application 

Step 5/6 Memory Management Event handling creates references between objects, you need to remove them so the Garbage Collector can remove the objects Strict memory management and standardized object disposal All classes provide a dispose destructor which are called automicatically An event handling abstration layer which allow for automatic disposal 

Step 6/6 Handling asynchronous dependencies Backbone’s own event handling, wrapped Publish/Subscribe all over Model and collection synchronization: Mix in jQuery Deferreds More complex state machines (SyncMachine) Wrap functions to wait for Deferreds 

Questions? Ideas? Opinions? I’m molily on Twitter & Github [email protected] github.com/moviepilot/chaplin 9elements.com Fork m e on G ithub!