jQueryTO - Scaling JavaScript Apps with Backbone/Marionette

A principles and patterns focused slide deck, discussing the core of creating scalable JavaScript apps, illustrated with Backbone and Marionette code

Transcript

1. Scaling Backbone Applications 1 Sunday, March 3, 13
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/ 2 Sunday, March 3, 13
3. Backbone.js is 3 Sunday, March 3, 13
4. Backbone.js is 4 Sunday, March 3, 13
5. Make Your Backbone Apps Dance 5 Sunday, March 3, 13
6. Marionette is 6 Sunday, March 3, 13
7. Obligatory Paul Irish Reference 7 Sunday, March 3, 13
8. Scalable Backbone http://www.flickr.com/photos/chicagoceli/2913452493/ 8 Sunday, March 3, 13
9. Structure abstraction http://www.flickr.com/photos/pgoyette/447560536/sizes/l/in/photostream/ 9 Sunday, March 3, 13
10. rails is wrong ... ... for the right reasons File & code structure 10 Sunday, March 3, 13
11. File structure break down ... concat & minify 11 Sunday, March 3, 13
12. break down app sub-app sub-app sub-app Code structure 12 Sunday, March 3, 13
13. top-down hierarchy ... Marionette app structure Marionette.Application module module module app sub-app sub-app sub-app ... built with Marionette 13 Sunday, March 3, 13
14. /js/app.js Marionette Application reduce the JS in the HTML 14 Sunday, March 3, 13
15. /js/router.js /js/myModule.js Marionette module 15 Sunday, March 3, 13
16. Marionette initializers 16 Sunday, March 3, 13
17. Mail vs Contacts Sub-Applications 17 Sunday, March 3, 13
18. start / stop Marionette module startWithParent 18 Sunday, March 3, 13
19. mediator pattern ... Marionette Controller all-purpose-object mediator objA objB objC ... coordinate multiple objects 19 Sunday, March 3, 13
20. BBCloneMail Reference App 20 Sunday, March 3, 13
21. Sub-Applications 21 Sunday, March 3, 13
22. Mail Sub-Application (module) 22 Sunday, March 3, 13
23. Components 23 Sunday, March 3, 13
24. Component Workflow Mail Controller (mediator) (click) (next component) 24 Sunday, March 3, 13
25. Scaling explosion 25 Sunday, March 3, 13
26. Scaling wide and flat Marionette.Application module module module module module module 26 Sunday, March 3, 13
27. 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 27 Sunday, March 3, 13