Scaling Backbone.js Applications With Marionette.js

Slide 1

Slide 1 text

Scaling Backbone Applications

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/

Slide 3

Slide 3 text

Backbone.js is

Slide 4

Slide 4 text

HTTP 302: Found • Models • Views • Collections • Routers (Browser History) • Events Backbone.js provides building blocks for app structure

Slide 5

Slide 5 text

Backbone.js is

Slide 6

Slide 6 text

boilerplate render method Backbone View

Slide 7

Slide 7 text

~50 lines of boilerplate Backbone View (list)

Slide 8

Slide 8 text

~50 lines of boilerplate Backbone View (list)

Slide 9

Slide 9 text

Title

Slide 10

Slide 10 text

Backbone View (list)

Slide 11

Slide 11 text

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 • ...

Slide 12

Slide 12 text

Backbone.js

Slide 13

Slide 13 text

Make Your Backbone Apps Dance

Slide 14

Slide 14 text

Marionette ItemView

Slide 15

Slide 15 text

CollectionView Marionette

Slide 16

Slide 16 text

#navigation #logo #header #main App Layout

Slide 17

Slide 17 text

... more boilerplate ... and, what about replacing views? show a view in the DOM Backbone View

Slide 18

Slide 18 text

replace a view in the DOM Backbone View

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

zombies zombie killing is my business ... http://www.ﬂickr.com/photos/ericparker/4059481843/ ... and business is good

Slide 21

Slide 21 text

zombies

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

killing zombies

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

is Marionette

Slide 26

Slide 26 text

Scalable Backbone http://www.ﬂickr.com/photos/chicagoceli/2913452493/

Slide 27

Slide 27 text

Structure abstraction http://www.ﬂickr.com/photos/pgoyette/447560536/sizes/l/in/photostream/

Slide 28

Slide 28 text

File structure multiple ﬁles ... concat & minify

Slide 29

Slide 29 text

rails is wrong ... ... for the right reasons File & code structure

Slide 30

Slide 30 text

structure app sub-app sub-app sub-app File & code

Slide 31

Slide 31 text

top-down hierarchy ... Marionette app structure Marionette.Application module module module app sub-app sub-app sub-app ... built with Marionette

Slide 32

Slide 32 text

/js/app.js Marionette Application reduce the JS in the HTML

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Marionette initializers

Slide 35

Slide 35 text

Mail vs Contacts Sub-Applications

Slide 36

Slide 36 text

start / stop Marionette module startWithParent

Slide 37

Slide 37 text

Marionette Controller

Slide 38

Slide 38 text

Marionette Controller

Slide 39

Slide 39 text

Marionette Controller all-purpose-object, mediator, public API for components, and more mediator ... mediator objA objB objC ... coordinate multiple objects

Slide 40

Slide 40 text

Marionette Controller mediator continued ...

Slide 41

Slide 41 text

... mediator Controller Marionette using the mediator

Slide 42

Slide 42 text

... mediator Controller Marionette using the mediator WORLD LICENSE

Slide 43

Slide 43 text

Enough Talk

Slide 44

Slide 44 text

BBCloneMail Reference App

Slide 45

Slide 45 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