BackboneJS and friends

@scottcowan

Backbone

A javascript MVC framework

Same stuff but on the client side

Lets you focus on presentation logic

@scottcowan

Backbone

Model View - ControllerM = Backbone.Model, Backbone.Collection

V = HTML Templates

C = Backbone.View

@scottcowan

Backbone

initialize: function(){} is the constructor

Doesn't give you the best debug messages

Great for testing (jasmine, sinon)

Event based logic flow

@scottcowan

Backbone

Backbone.RouterSingle Page Application magic maker

Change the url without a page load

Backwards compatible with #/path

Remember to setup routes on the server

@scottcowan

Backbone

Backbone.historyAdd urls to the browser history

A wrapper around browser history API

@scottcowan

Backbone

Backbone.ViewSomething that's going to be an element

Allows for Nesting (ie: TableView, RowView)

Can handle events (ie: click, keydown)

Has special fields (ie: tagName, className)

@scottcowan

Backbone

Backbone.ModelA single item of data

Uses CREATE, PUT methods when saving

Fires events like change or field changeshttp://backbonejs.org/#Events-catalog

@scottcowan

Backbone

Backbone.CollectionA list of Models or objects

fetch will fire a 'reset' event you can listen to

@scottcowan

RequireJS

Define([
'underscore',
'backbone',
'text!../templates/movieItem.html'],
function (
_,
backbone,
movieItemTemplate
) {

// do stuff
}

@scottcowan

RequireJS

Manage dependencies

Decouple libraries from hard references

Combine javascript for release

@scottcowan

RequireJS

use require.config after loading require

use absolute links not relativeYour site might not work off the root

Use a path shortcutIe: ['path/file'] for aura.js in the aura path

@scottcowan

Aura

AddsWidgets

Mediator for messaging

Can work without Backbone

@scottcowan

Underscore

Power library for collectionscontains, some, groupBy

each loops over Backbone collections

And Arrays_.first, _.last, _.union

@scottcowan

Underscore

Utility functionsbindAll adds functions to the context

mixin add global functions!

More info at http://underscorejs.org/

@scottcowan

Extra credit

Jasmine/Sinon

Bootstraping data

Yeoman/Bower

@scottcowan