Slide 1

Slide 1 text

Chaplin Application Architecture with Backbone.js Berlin.JS March 15th, 2012 Mathias Schäfer 9elements

Slide 2

Slide 2 text

Hello! Mathias Schäfer (molily) molily.de Software developer at 9elements 9elements.com Currently working on moviepilot.com

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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…)

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Backbone Classes A Quick Overview Backbone.Events Backbone.Model Backbone.Collection Backbone.View Backbone.History Backbone.Router

Slide 8

Slide 8 text

Backbone.Events Register callbacks and dispatch events Backbone’s key feature Included by Model, Collection, View and History Methods: on, off, trigger

Slide 9

Slide 9 text

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)

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Model Storage View Template DOM observes and modifies creates and handles input queries and syncs with renders Router creates

Slide 13

Slide 13 text

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.

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Applications on Top of Backbone

Slide 16

Slide 16 text

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”

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

https://github.com/moviepilot/chaplin

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Mediator SomeController ApplicationController Router SomeView ApplicationView SomeModel Application

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Questions? Ideas? Opinions? I’m molily on Twitter & Github [email protected] https://github.com/moviepilot/chaplin Fork m e on G ithub!