Application frameworks on top of Backbone.js. Talk at apps.berlin.js

Talk at apps.berlinjs.org, 2012-05-10, Berlin, Germany

A birds-eye view of the similarities of Chaplin, Marionette and Thorax/Lumbar

http://chaplinjs.org/
https://github.com/chaplinjs/chaplin

https://github.com/marionettejs/backbone.marionette

https://github.com/walmartlabs/thorax & https://github.com/walmartlabs/lumbar

Transcript

1. Application Frameworks
   on top of Backbone.js
   Mathias Schäfer
   apps.berlin.js
   

   View Slide

2. Hello.
   Mathias Schäfer (molily)
   Software developer, mostly Web with
   JavaScript and Ruby on Rails
   Working for 9elements.com
   @molily – molily.de – github.com/molily
   mathias.schaefer@9elements.com
   

   View Slide

3. This is not about
   Chaplin
   Instead of doing self-promotion, I will talk
   about several Backbone-based libraries,
   including Chaplin.
   Because they share similar thoughts and
   address the same problems.
   It’s more important to understand these
   abstract solutions than a specific library.
   

   View Slide

4. TL;DR
   Do not write applications in plain
   Backbone.js.
   That is, if you plan anything non-trivial,
   do not start with Backbone.js alone.
   Backbone is very minimal. You need a proper
   application structure which enforces
   conventions and allows for scalability.
   

   View Slide

5. The Libraries
   Marionette – Flexible and most mature
   library for Backbone applications
   Chaplin – Currently a structure, conventions
   and an implementation, soon a library
   Thorax & Lumbar – Opinionated
   framework, especially for mobile, build tool
   

   View Slide

6. Marionette
   from Derick Bailey & contributors
   Library with classes, just like Backbone
   Mature and comprehensive
   Can be installed with npm and optionally
   loaded with RequireJS
   https://github.com/derickbailey/
   backbone.marionette
   

   View Slide

7. Chaplin
   from Moviepilot & 9elements
   Started as an example application structure,
   is now being rebuild as an external library
   Focusses on the top-level structure, DRY,
   modularization/decoupling and memory
   management
   Open-sourced from Moviepilot.com
   https://github.com/chaplinjs/chaplin
   

   View Slide

8. Thorax & Lumbar
   from WalmartLabs
   Opinionated: Node.js server, Zepto,
   Handlebars, Stylus
   Lumbar: Node.js-based build tool for JS apps
   Project file structure, generators
   https://github.com/walmartlabs/thorax
   https://github.com/walmartlabs/lumbar
   

   View Slide

9. The Aspects
   

   View Slide

10. 1. Project Structure
    Application startup, configuration/routes,
    models, views, routes/controllers, support
    lib, vendor libs, …
    All libraries define an “Application” object
    Chaplin and Marionette come with a good
    boilerplate structure
    Thorax has conventional naming, generators
    

    View Slide

11. 2. Modularization
    Chaplin uses RequireJS for modularization
    and lazy-loading. May be pre-packaged on the
    server side.
    Marionette allows to define and start
    application modules (sub-applications) and
    also encourages RequireJS.
    Lumbar lazy-loads modules when a route
    matches.
    

    View Slide

12. 3. Routing
    Chaplin separates routes from app code by
    introducing controllers. Rails-like routes file
    Marionette “reduces your routers to nothing
    more then configuration”, also introducing
    controllers.
    Thorax imposes conventions on top of the
    Backbone routers, e.g. rendering views.
    

    View Slide

13. 4. Layouts
    Chaplin’s ApplicationView automatically
    shows/hides the views created by
    Controllers.
    Marionette provides Layouts and Regions.
    Layout is a special view with regions.
    Regions allow to show/close views.
    Thorax has Application.layout.setView
    

    View Slide

14. 5. Complex Views
    All libraries provide conventions and code
    for rendering Backbone collections (lists of
    models).
    For example, Chaplin has a highly optimized
    CollectionView which renders items
    automatically.
    Templates for the container, for the list items
    and for an empty list
    

    View Slide

15. 6. Templates
    Chaplin is template-engine-agnostic, requires
    templates to be loaded before the view is
    instantiated. The example app uses RequireJS
    to load Handlebars templates as plain text.
    You need to implement
    View#getTemplateFunction
    We recommend precompiled Handlebars
    templates e.g. with Rails asset pipeline
    

    View Slide

16. 6. Templates
    Marionette has a template Renderer and a
    TemplateCache
    Caches the compiled templates, may load
    templates on-demand
    Defaults to Underscore templates read from
    the DOM
    Marionette also allows to register helpers
    

    View Slide

17. 6. Templates
    Thorax relies on Handlebars templates and
    loads them automatically
    By convention, template files have the same
    name as their views
    Thorax also allows to register Handlebars
    helpers
    

    View Slide

18. 7. Event-driven
    architecture
    Chaplin uses the Pub/Sub and Mediator
    patterns extensively. Cross-module
    communication relies completely on events.
    Marionette also provides Pub/Sub using
    app.vent plus specific EventAggregators.
    Layouts have their own vent, for example.
    Marionette and Thorax views trigger useful
    additional events.
    

    View Slide

19. 8. Memory
    Management
    If you use model binding and Pub/Sub, don’t
    forget to unbind event handlers.
    Chaplin automatically disposes all MVC
    modules using the dispose method. Provides
    methods for safe event binding.
    Marionette has the BindTo mixin which
    allows for proper unbinding. Layouts and
    Views may be closed.
    

    View Slide

20. Standing on the
    shoulders of giants
    I only mentioned some important aspects.
    Do not reinvent the wheel, start with
    Chaplin, Marionette or Thorax right away.
    At least read their documentation and code,
    study their ideas, conventions and example
    apps.
    

    View Slide

21. Watch & Fork on
    Github
    github.com/…
    chaplinjs/chaplin (development branch)
    779 watchers, 52 forks
    derickbailey/backbone.marionette
    525 watchers, 59 forks
    walmartlabs/thorax
    192 watchers, 13 forks
    

    View Slide