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/

Transcript

1. Chaplin Application Architecture with Backbone.js Berlin.JS March 15th, 2012 Mathias Schäfer 9elements
2. Hello! Mathias Schäfer (molily) molily.de Software developer at 9elements 9elements.com Currently working on moviepilot.com
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
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
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…)
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
7. Backbone Classes A Quick Overview Backbone.Events Backbone.Model Backbone.Collection Backbone.View Backbone.History Backbone.Router
8. Backbone.Events Register callbacks and dispatch events Backbone’s key feature Included by Model, Collection, View and History Methods: on, off, trigger
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)
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
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
12. Model Storage View Template DOM observes and modifies creates and handles input queries and syncs with renders Router creates
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.
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
15. Applications on Top of Backbone
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”
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
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
19. https://github.com/moviepilot/chaplin
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
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
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
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
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
25. Mediator SomeController ApplicationController Router SomeView ApplicationView SomeModel Application
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
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
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
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
30. Questions? Ideas? Opinions? I’m molily on Twitter & Github mathias.schaefer@9elements.com https://github.com/moviepilot/chaplin Fork m e on G ithub!