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

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

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



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

More Decks by Mathias Schäfer (molily)

Other Decks in Technology


  1. 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 [email protected]
  2. 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.
  3. 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.
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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.
  10. 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.
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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.
  17. 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.
  18. 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.
  19. 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