$30 off During Our Annual Pro Sale. View details »

Chaplin: Application Architecture with Backbone.js (Berlin.JS)

Chaplin: Application Architecture with Backbone.js (Berlin.JS)

Talk at the Berlin.JS user group, 2012-03-15, Berlin, Germany

On top of the popular MVC-style library Backbone.js we have build an application architecture to address several shortcomings of Backbone. It provides a lightweight and flexible structure that features well-proven design patterns and best practices.

Chaplin is derived from a real-world single-page application, moviepilot.com.

The code is available at:

Mathias Schäfer (molily)

March 16, 2012

More Decks by Mathias Schäfer (molily)

Other Decks in Programming


  1. Chaplin Application Architecture with Backbone.js Berlin.JS March 15th, 2012 Mathias

    Schäfer 9elements
  2. Hello! Mathias Schäfer (molily) molily.de Software developer at 9elements 9elements.com

    Currently working on moviepilot.com
  3. 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
  4. 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
  5. 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…)
  6. 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
  7. Backbone Classes A Quick Overview Backbone.Events Backbone.Model Backbone.Collection Backbone.View Backbone.History

  8. Backbone.Events Register callbacks and dispatch events Backbone’s key feature Included

    by Model, Collection, View and History Methods: on, off, trigger
  9. 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)
  10. 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
  11. 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
  12. Model Storage View Template DOM observes and modifies creates and

    handles input queries and syncs with renders Router creates
  13. 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.
  14. 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
  15. Applications on Top of Backbone

  16. 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”
  17. 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
  18. 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
  19. https://github.com/moviepilot/chaplin

  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. Mediator SomeController ApplicationController Router SomeView ApplicationView SomeModel Application

  26. 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
  27. 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
  28. 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
  29. 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
  30. Questions? Ideas? Opinions? I’m molily on Twitter & Github mathias.schaefer@9elements.com

    https://github.com/moviepilot/chaplin Fork m e on G ithub!