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
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
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.
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.
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
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
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
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
9. The Aspects
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
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.
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.
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
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
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
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
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
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.
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.
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.
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