Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Mathias Schäfer (molily)

March 16, 2012
Tweet

More Decks by Mathias Schäfer (molily)

Other Decks in Programming

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
    [email protected]
    https://github.com/moviepilot/chaplin
    Fork
    m
    e
    on
    G
    ithub!

    View Slide