Welcome to the talk:

Scalable JavaScript

with

Backbone and Marionette

with me:

Kaleb Fulgham

App Lead at PROS

http://kalebdf.com@kalebdfgit://kalebdf
Confessions

I love coffee!

Americano, Cold Brew, Cortado, etc.
Confessions

I love the JavaScripts;

I may love CoffeeScript more

Web applications

innevitably grow & become

large & complex

Solid architecture

on the

backend

and the

client

is

essential

Large apps

should be composed of

small parts

UI Views

should be separate from

Data & Business Logic

jQuery

a tool for the masses

DOM manipulation

and

$.ajax

and

plugins...

Hacking together jQuery

will not scale but instead

will make code soup

with state stored everywhere

Soup != App

so

Let's focus...

We desire to

Solve a Business Problem

Data, Views, Interactions

I present to you the

library

Backbone.js

MVC, MVP, MV* ...

  1. MODELS with key-value binding
  2. COLLECTIONS to enumerate
  3. VIEWS with declarative event handling
  4. ROUTERS provide browser history support
  5. EVENTS galore!
Backbone.js (6.3kb) is a

MV* library
not a framework

It has easy-to-read

annotated source code

It is a simple

app backbone

providing minimal & sane

abstractions & building blocks

Use as much or as little for

Embedded widgets

all the way up to

Massive composite apps

Any Object can have

Backbone.Events

simply extend & trigger
var object = {};

_.extend(object, Backbone.Events);

object.on("alert", function(msg) {
  alert("Triggered " + msg);
});

object.trigger("alert", "an event!");
Create a convenient

Event dispatcher

to coordinate events in the app
var window.App = {};

// ... amazing app code ...

App.dispatcher = _.clone(Backbone.Events);

Venue JSON

{
  "id": "508b5225e4b0c9eb71763651",
  "name": "Southside Espresso",
  "twitter": "@SouthsideHOU",
  "categories": [
    {
      "id": "4bf58dd8d48988d1e0931735",
      "name": "Coffee Shop",
      "icon": "http://t.co/coffeeshop_bg_32.png"
    }
  ],
  "location": {
    "address": "904-C Westheimer Rd.",
    "postalCode": "77006",
    "city": "Houston"
  }
}

Backbone.Models

var Venue = Backbone.Model.extend({
  urlRoot: '/venues'
});

var venue = new Venue({
  name: "Southside Espresso",
  twitter: "@SouthsideHOU"
});

venue.get('name');
// Southside Espresso

venue.set('open', false);
venue.hasChanged(); // true

Models + Events

/* Listen to any change */
venue.on('change', function(){
  console.log('Changed something');
});
venue.set('name', 'The South Side');
// Changed something


// Listen to `open` changes
venue.on('change:open', function(){
  console.log('Notify Kaleb');
});
venue.set('open', true);
// Notify Kaleb
// Changed something
Models can be organized into

Collections

for convenient access, ordering, and server syncing

Server Syncing

with Models & Collections
var Venue = Backbone.Model.extend({
  urlRoot: '/venues'
});

var venue = new Venue({ id : 123 });
venue.fetch(); // $.ajax `GET /venues/123`

venue.set('open', true);
venue.save(); // $.ajax `PUT /venues/123`
Underscore.js library's functions are

helpful utilities

automatically mixed-into Models & Collections
_.each();
_.filter();
_.indexBy();
_.last();
...
_.map();
_.pluck();
_.reduce();
_.where();
...
More convention than code in a

Backbone.View

Organize into

Logical views

that are

Backed by Models

each of which can

Update independently

without unneccesary redraw
Let's dive into the

Example Foursquare App

Is Backbone lacking X or Y feature?

Check the
vibrant community!

of plugin & extension authors
What about all of that

Backbone.View boilerplate?

Can anything be done? Any extensions?
I present to you the

marionette.js

library

Marionette.js

  1. Reduction of View Boilerplates
  2. Memory management (cleaning up zombie views)
  3. Promotes modular, event-driven architecture
  4. Sensible defaults
  5. Use only what you need!

Let's go back to the code

Before Marionette

var ItemView = Backbone.View.extend({
  tagName: 'li',
  template: _.template($('#item-template').html()),
  initialize: function() {
    this.model.on('change',this.render,this);
    this.model.on('destroy',this.remove,this);
  },
  render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  }
});

Before Marionette

var ListView = Backbone.View.extend({
  tagName: 'ui',
  initialize: function() {
    this.collection.on('add',this.addItem,this);
    this.collection.on('remove',this.removeItem,this);
    this.collection.on('reset',this.render,this);
  },
  // addItem: -> Add item to model-to-view map
  // removeItem: -> # Remove item from above map
  render: function() {
    this.$el.html('')
    this.collection.each(function(model){
      view = new ItemView({model: model})
      this.$el.append(view.render().$el)
    });
  }
});

With Marionette

var MItemView = Marionette.ItemView.extend({
  tagName: 'li',
  template: '#item-template'
});

var MListView = Marionette.CollectionView.extend({
  itemView: MItemView
});

Zombie Views

var MyView = Backbone.View.extend({
  initialize: function() {
    // Bind to change event to call re-render
    this.model.on('change', this.render, this);
  },
  render: function() {
    alert('Rendering the view '+this.cid);
  }
});
var venue = new Backbone.Model();
var view = new MyView({ model: venue});
// Zombie created
view = new MyView({ model: venue});
// 2 alerts will fire
venue.set({ name: 'Southside Espresso' });

Killing the Zombie Views

var MyView = Backbone.View.extend({
  initialize: function() {
    // Bind to change event to call re-render
    this.listenTo(this.model, 'change', this.render);
  },
  close: function() { this.stopListening(); },
  render: function() {
    alert('Rendering the view '+this.cid);
  }
});
var venue = new Backbone.Model();
var view = new MyView({ model: venue});
view.close(); // Double-tap. Kill the zombie!
view = new MyView({ model: venue });
// Only 1 alert will fire
venue.set({ name: 'Southside Espresso' });

Keep it clean & simple

var AppLayout = Marionette.Layout.extend({
  regions: {
    menu: "#menu",
    main: "#main"
  }
});
var layout = new AppLayout();
layout.render();
layout.main.show(new SummaryView());

// ... user interactions ...

layout.main.show(new DetailedView());
// SummaryView `close` is called.
Marionette.js also offers solutions for

Composite Event-Driven

architecture through

Eventing, App, Modules

Build upon the

shoulders of giants

Many companies use Backbone.js

PROS, Disqus, Rdio

Trello, USA Today, Walmart

Games & Interactive Magazines

Construction, Business, & Pricing

Create your app with a

Composite & Modular design

and at least use

Backbone.js with Marionette.js

Stellar Resources

  1. Backbone Fundamentals Book by Addy Osmani
  2. Unsuck Your Backbone
  3. Little Opinions Big Possibilities, Large Backbone Apps
  4. BackboneConf 2013 Talks - Keynote & Others
  5. Backbone Plugins Book by Derick Bailey
  6. Backbone In The Wild by Kaleb Fulgham

Thank You!

QUESTIONS?

We @ PROS are hiring UI Engineers!

Contact me:

Kaleb Fulgham
kfulgham@pros.com

or on Twitter

@kalebdf