Building your first web app in Marionette

1. Marionette
Building your first app

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

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

4. JavaScript Framework
Generate HTML
Server integration
Respond to user input

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

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

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

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

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

10. Marionette - Views
Renders data
Event handling
User Input
Data change

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

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

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

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

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

16. Questions?
https://www.mypebble.co.uk
scott.walton@mypebble.co.uk
@scott_walton
github.com/scott-w
www.scottwalton.codes