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.

Transcript

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