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

Scaling Backbone.js Applications With Marionette.js

Scaling Backbone.js Applications With Marionette.js

Nearly everyone understands how to build a simple JavaScript application these days. From the classic “Todo” JavaScript app, to simple forms-over-data jQuery apps, we’ve all been around that block a few times. With the recent explosion of JavaScript MV* tools and frameworks, though, many of us find ourselves in over our heads, looking at patterns and practices that work well for small applications and pages but fail when scaling to anything substantial.

In this presentation, Derick Bailey will give you an introduction and walk through of many of the patterns and practices that your JavaScript applications need to be scalable. You’ll learn why copying Ruby on Rails’ pattern of “Models”, “Views” and “Controllers” folder names is wrong for scaling JavaScript apps, and how to correct that . You’ll learn about the necessity of separating the various concerns of your application. You’ll learn about patterns that aggregate and coordinate functionality from other parts of the system, how and when to properly decouple disparate areas of your application through messaging patterns, and more. And all of this will be illustrated with Backbone, MarionetteJS and additional plugins and patterns that can give you an edge in creating scalable applications in JavaScript.

Derick Bailey

January 16, 2013

More Decks by Derick Bailey

Other Decks in Programming


  1. Backbone.js Backbone.js gives structure to web applications by providing models

    with key-value binding and custom events, collections with a rich API of enumerable functions,views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface. http://backbonejs.org/
  2. HTTP 302: Found • Models • Views • Collections •

    Routers (Browser History) • Events Backbone.js provides building blocks for app structure
  3. Backbone.js doesn't provide HTTP 404: Not Found • App architecture

    and infrastructure • app initialization and shutdown • Modules and components • Message bus • Controllers and mediators • Scalable application framework • ...
  4. 1. what object is holding a reference? 2. what object

    is being referenced? 3. when do these objects and references fall out of scope? identifying zombies
  5. Marionette Controller all-purpose-object, mediator, public API for components, and more

    mediator ... mediator objA objB objC ... coordinate multiple objects
  6. Contact Me About Me @derickbailey [email protected] http://WatchMeCode.net http://derickbailey.LosTechies.com http://KendoUI.com Name:

    Derick Bailey My Job: Developer Advocate for Kendo UI Things I Do: Screencasts, Blogs, Writing, Speaking, community advocate, open source contributor, opinionated, loud-mouth, trouble maker ... and so much more MarionetteJS.com