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:
https://github.com/chaplinjs/chaplin
http://chaplinjs.org/

Transcript

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

   View Slide

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

   View Slide

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
   

   View Slide

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
   

   View Slide

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…)
   

   View Slide

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
   

   View Slide

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

   View Slide

8. Backbone.Events
   Register callbacks and dispatch events
   Backbone’s key feature
   Included by Model, Collection, View and History
   Methods: on, off, trigger
   

   View Slide

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)
   

   View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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.
    

    View Slide

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
    

    View Slide

15. Applications on Top of
    Backbone
    

    View Slide

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”
    

    View Slide

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
    

    View Slide

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
    

    View Slide

19. https://github.com/moviepilot/chaplin
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

25. Mediator
    SomeController
    ApplicationController
    Router
    SomeView
    ApplicationView
    SomeModel
    Application
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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!
    

    View Slide