Marionette Building your first app 

Building your first app Cover core Marionette concepts Routing Layouts Event handling Rendering data 

Who am I? Lead developer Pebble Income Generation for Schools Python/Django Web apps 

JavaScript Framework Generate HTML Server integration Respond to user input 

Why Marionette? Backbone.js No magic … ok maybe a little Active development Helpful, friendly community 

Microblog Simple list of tweet-like objects Click on an item to view connected comments Won’t look pretty Focus on the HTML we need 

Marionette - Application Links your page to your app Starts your JavaScript app Initialise your routes and layouts Feed data into your app 

Marionette - AppRouter Map URL fragments to methods Wire up your controller 

Marionette - Controller Decide what screens to show Handle top-level data flow 

Marionette - Views Renders data Event handling User Input Data change 

Backbone - Models Your data Binds your application to server Fetch Save 

Backbone - Collections Like models but lists Optional type-checking Helpers 

Marionette - Event/Trigger Handle user input Propagate view hierarchy React to model changes 

And more Behaviors - common view behavior Radio - global events Template engines Regions Underscore 

Helpful Links gitter.im/marionettejs/backbone.marionette backbonejs.org underscorejs.org marionettejs.com/docs/current YouTube - Dancing with Marionette 

Questions? https://www.mypebble.co.uk [email protected] @scott_walton github.com/scott-w www.scottwalton.codes