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. Scaling Backbone Applications

  2. 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/
  3. Backbone.js is

  4. HTTP 302: Found • Models • Views • Collections •

    Routers (Browser History) • Events Backbone.js provides building blocks for app structure
  5. Backbone.js is

  6. boilerplate render method Backbone View

  7. ~50 lines of boilerplate Backbone View (list)

  8. ~50 lines of boilerplate Backbone View (list)

  9. Title

  10. Backbone View (list)

  11. 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 • ...
  12. Backbone.js

  13. Make Your Backbone Apps Dance

  14. Marionette ItemView

  15. CollectionView Marionette

  16. #navigation #logo #header #main App Layout

  17. ... more boilerplate ... and, what about replacing views? show

    a view in the DOM Backbone View
  18. replace a view in the DOM Backbone View

  19. Marionette ... less boilerplate ... and it replaces views Region

  20. zombies zombie killing is my business ... http://www.flickr.com/photos/ericparker/4059481843/ ... and

    business is good
  21. zombies

  22. 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
  23. killing zombies

  24. Marionette Layout Marionette.Layout (wrapper Template) #some-region #another-region

  25. is Marionette

  26. Scalable Backbone http://www.flickr.com/photos/chicagoceli/2913452493/

  27. Structure abstraction http://www.flickr.com/photos/pgoyette/447560536/sizes/l/in/photostream/

  28. File structure multiple files ... concat & minify

  29. rails is wrong ... ... for the right reasons File

    & code structure
  30. structure app sub-app sub-app sub-app File & code

  31. top-down hierarchy ... Marionette app structure Marionette.Application module module module

    app sub-app sub-app sub-app ... built with Marionette
  32. /js/app.js Marionette Application reduce the JS in the HTML

  33. /js/router.js /js/myModule.js Marionette module

  34. Marionette initializers

  35. Mail vs Contacts Sub-Applications

  36. start / stop Marionette module startWithParent

  37. Marionette Controller

  38. Marionette Controller

  39. Marionette Controller all-purpose-object, mediator, public API for components, and more

    mediator ... mediator objA objB objC ... coordinate multiple objects
  40. Marionette Controller mediator continued ...

  41. ... mediator Controller Marionette using the mediator

  42. ... mediator Controller Marionette using the mediator WORLD LICENSE

  43. Enough Talk

  44. BBCloneMail Reference App

  45. Contact Me About Me @derickbailey derickbailey@gmail.com 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