Chaplin Application Architecture with Backbone.js Berlin.JS March 15th, 2012 Mathias Schäfer 9elements 

Hello! Mathias Schäfer (molily) molily.de Software developer at 9elements 9elements.com Currently working on moviepilot.com 

JavaScript Applications DOM Scripting HTML Templating OOP & Functional Programming API Communication Application Structure Routing & History Model-View-Binding Modularization & Dependancy Mgmt. Building & Packaging Unit Testing Lints Documentation 

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 Every JavaScript application is a beautiful flower 

Backbone.js backbonejs.org A simple and small library Popular and field-tested Actively developed 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 Register callbacks and dispatch events Backbone’s key feature Included by Model, Collection, View and History Methods: on, off, trigger 

Backbone.Model Fetching, processing and storing data Key feature: the attributes hash Changes will fire change events Standard sync via RESTful HTTP Collections are lists of models which fire change events (add, remove, reset) 

Backbone.View A view typically 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 

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 (pushState, popstate) with Hash URI fallback (location.hash, hashchange) Routers often create models and views 

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

Model Storage View Template DOM observes and modifies creates and handles input queries and syncs with renders Router creates This is how it could look like. This is disputed. This is just my personal understanding. This is where the confusion begins. 

DOM Scripting HTML Templating OOP & Functional Programming API Communication Application Structure Routing & History Model-View-Binding Modularization & Dependancy Mgmt. Building & Packaging Unit Testing Lints Documentation JavaScript Applications jQuery Handlebars Underscore Backbone Backbone Backbone? Backbone? with Backbone.js TBD TBD TBD TBD TBD Sample 

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 “There’s more than one way to do it” vs. “convention over configuration” 

What is an Application? Several screens with transitions A screen typically consists of multiple views Modules depend on each other and communicate with each other A lot of async I/O happens The “Todo List Example” is not such an app 

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 example application architecture using Backbone.js Not (yet) a ready-to-use library Derived from moviepilot.com, a real-world single-page application Document, share and discuss our application structure 

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 

Modules with loose coupling for a scalable architecture Module encapsulation and dependency management via RequireJS (AMD) Cross-module communication using the Publish/Subscribe pattern Share information using one or more Mediators 

Separate routing and the code which creates a screen Backbone.Router maps URLs to its own methods Plain Backbone 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 

Manage top-level state (Chaplin’s development branch) ApplicationController creates core models and views dispatches routing matches creates and removes controllers tracks the current state ApplicationView top-level view manager 

Mediator SomeController ApplicationController Router SomeView ApplicationView SomeModel Application 

User Authentication SessionController for user management User model instance on the mediator Pub/Sub-driven login process: !login, login, !logout, logout events ServiceProviders handle the actual login Client-side login with OAuth providers like Facebook, Google or Twitter 

Boost performance and prevent memory leaks (just the basic stuff) Strict memory management and standardized object disposal Controllers, models, collections, views implement the dispose destructor Core classes and an abstration layer which allow for automatic disposal Event handling abstraction which automatically removes handlers when the model/view is disposed 

Handling asynchronous dependencies Backbone’s own event handling (wrapped) Publish/Subscribe Model and collection synchronization: Mix in jQuery Deferreds More complex finite-state machines (SyncMachine) Function wrappers and accumulators createDeferredFunction, afterLogin, ensureLogin createAccumulator 

Announcing a meet-up on JavaScript applications Talks and discussions on patterns, tools and best practices for JavaScript-heavy web applications Backbone.js, Backbone add-ons and other libraries First event planned for April Stay tuned on the BerlinJS mailing list / @berlinjs 

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