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

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

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

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

More Decks by Mathias Schäfer (molily)

Other Decks in Technology

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
    [email protected]

    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