jQueryTO - Scaling JavaScript Apps with Backbone/Marionette

Slide 1

Slide 1 text

Scaling Backbone Applications 1 Sunday, March 3, 13

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Backbone.js is 3 Sunday, March 3, 13

Slide 4

Slide 4 text

Backbone.js is 4 Sunday, March 3, 13

Slide 5

Slide 5 text

Make Your Backbone Apps Dance 5 Sunday, March 3, 13

Slide 6

Slide 6 text

Marionette is 6 Sunday, March 3, 13

Slide 7

Slide 7 text

Obligatory Paul Irish Reference 7 Sunday, March 3, 13

Slide 8

Slide 8 text

Scalable Backbone http://www.ﬂickr.com/photos/chicagoceli/2913452493/ 8 Sunday, March 3, 13

Slide 9

Slide 9 text

Structure abstraction http://www.ﬂickr.com/photos/pgoyette/447560536/sizes/l/in/photostream/ 9 Sunday, March 3, 13

Slide 10

Slide 10 text

rails is wrong ... ... for the right reasons File & code structure 10 Sunday, March 3, 13

Slide 11

Slide 11 text

File structure break down ... concat & minify 11 Sunday, March 3, 13

Slide 12

Slide 12 text

break down app sub-app sub-app sub-app Code structure 12 Sunday, March 3, 13

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

/js/app.js Marionette Application reduce the JS in the HTML 14 Sunday, March 3, 13

Slide 15

Slide 15 text

/js/router.js /js/myModule.js Marionette module 15 Sunday, March 3, 13

Slide 16

Slide 16 text

Marionette initializers 16 Sunday, March 3, 13

Slide 17

Slide 17 text

Mail vs Contacts Sub-Applications 17 Sunday, March 3, 13

Slide 18

Slide 18 text

start / stop Marionette module startWithParent 18 Sunday, March 3, 13

Slide 19

Slide 19 text

mediator pattern ... Marionette Controller all-purpose-object mediator objA objB objC ... coordinate multiple objects 19 Sunday, March 3, 13

Slide 20

Slide 20 text

BBCloneMail Reference App 20 Sunday, March 3, 13

Slide 21

Slide 21 text

Sub-Applications 21 Sunday, March 3, 13

Slide 22

Slide 22 text

Mail Sub-Application (module) 22 Sunday, March 3, 13

Slide 23

Slide 23 text

Components 23 Sunday, March 3, 13

Slide 24

Slide 24 text

Component Workﬂow Mail Controller (mediator) (click) (next component) 24 Sunday, March 3, 13

Slide 25

Slide 25 text

Scaling explosion 25 Sunday, March 3, 13

Slide 26

Slide 26 text

Scaling wide and ﬂat Marionette.Application module module module module module module 26 Sunday, March 3, 13

Slide 27

Slide 27 text

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 27 Sunday, March 3, 13