director x backbone = :)

WHO AM I?

•  Lead Front-End Dev at Thefuture.fm (formerly Dubset)

•  Columbia University MS in Computer Science

  Vision/Graphics track w/ focus in UI/UX

•  What is Thefuture.fm?

  Curated internet radio

  Endless streaming mixes from top DJs around the world

  Single-Page Web App using Backbone.js

•  Worked with Charlie Robbins (github.com/indexzero) & Paolo Fragomeni(github.com/hij1nx) of Nodejitsu (jit.su) on integrating flatiron/director with our Backbone app in the early pre-1.0 days

WHAT’S THIS ALL ABOUT?

•  My Main Focus: •  Client-Side router implementation

•  Comparing Director and Backbone.Router side-by-side •  Why I chose Director over Backbone’s built-in Router

•  How to unplug Backbone.Router and plug in Director instead

•  Background Items: •  What is Backbone.JS?

•  Intro to Backbone.Router •  What is Flatiron?

•  Intro to Flatiron’s Director

OK LET’S GET STARTED!!

WHAT IS 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.   Model

  Represents interactive data   Defines logic surrounding it   Provides functionality to manage changes

  Collection   A collection of models   Ordered!! (can define Collection.comparator)

  View   Logical view backed by a model/collection   Freeform & non-restrictive – works with any JS templating library

  Router   Simple client-side routing   Determines what code to run (i.e. rendering a view) when a URL (route) is hit

Dependencies: Underscore.js, json2.js, jQuery/etc.

documentcloud.github.com/backbone

BACKBONE.JS PROVIDES STRUCTURE MVP FRAMEWORK MODEL: defines data & stores its current state VIEW: presents data & routes user input to Presenter PRESENTER: drives changes to Model & View


•  Provides structure for your data that you can parallel with your views (keeps things logically organized)

MODEL PRESENTER VIEW

Backbone.Model (Backbone.Collection)

Backbone.View Templates/ Rendered View

show index

BACKBONE.JS EVENT HANDLING

Models/Collections trigger events which Views can bind to.

  Collection   reset(collection) - when the entire contents have been replaced

  triggered by: fetch, reset, etc.   add(model, collection) - when a model is added to a collection   remove(model, collection) - when a model is removed from a collection

  Model   change(model, options) – when a model’s attributes have changed   change:[attribute](model, value, options) – when a specific attribute has been updated

  Some notes:   {silent: true}   .trigger(“[event]”)


•  Syncs your views consistently with the data that drives it using rich event handling

BACKBONE.ROUTER: QUICK INTRO

var myRouter = Backbone.Router.extend({

routes: {

“/”: “home”,

“/djs/:permalink”: “djs”,

“/djs/:permalink/:mixid”: “djs”

},

home: function() { … },

djs: function(permalink, mixid) { … }

});

Routing determines what code to run for a specified URL.

define route table

define functions

URL fragments fn names

SIMPLE! Great for straightforward client-side routing of simple web apps.

To start tracking hashchanges: Backbone.history.start();


WHAT IS FLATIRON?

Flatiron is an adaptable framework for building modern web applications. It was built from the ground up for use with Javascript and Node.js.

Philosopy No one agrees on frameworks. It's difficult to get consensus on how much or how little a framework should do. Flatiron's approach is to package simple to use yet full featured components and let developers subtract or add what they want.

Motivation

Build a collection of decoupled, unobtrusive tools that can operate as well in unison as they do independently. Promote code organization and sustainability by clearly separating development concerns.

flatironjs.org

FLATIRON: MAIN COMPONENTS

1.  DIRECTOR URL Routing

2.   PLATES Templating

3.   RESOURCEFUL Data Management

4.   UNION Middleware

5.   BROADWAY Plugins

6.   WINSTON Logging

flatironjs.org

Client-Side!!

WHAT IS DIRECTOR?

http://github.com/flatiron/director Synopsis Director is a router. Routing is the process of determining what code to run when a URL is requested. Motivation A routing library that works in both the browser and node.js environments with as few differences as possible. Simplifies the development of Single Page Apps and Node.js applications. Dependency free.

flatironjs.org

DIRECTOR: OVERVIEW

•  Depth-first search URL Matching

•  Route events •  global •  for each route

•  Nested routing

•  Route recursion

•  Regex

•  Lots of flexibility •  function organization

github.com/flatiron/director

DIRECTOR: QUICK INTRO

ROUTE TABLE

var routes = {

'/': viewMethods.index,

'/dog': {

'/:color': {

on: function (color) {

console.log(color)

}

}

}

};

CONSTRUCTOR

// instantiate

var router = new Router(routes)

.configure(options);

// initialize – start listening!

router.init();

github.com/flatiron/director

DIRECTOR > BACKBONE.ROUTER

WHY BACKBONE.ROUTER WASN’T CUTTING IT FOR US

-  Custom styling

-  “Sectional” routing

-  Pre-route authorization

-  Global event firing

-  Proper 404 catching

-  More flexibility

DIRECTOR SAVES THE DAY!

FLEXIBILITY

-  Routing Events: Setup/Teardown

-  Global routing events

-  notfound handler à 404 Page

-  Nested Routes & Recursion

-  Regex control

-  Flexibility with function organization

•  ON/AFTER = SETUP/TEARDOWN

•  Custom Formatting

•  Authorization Issues

•  “Sectional” setup/teardown

•  Global routing events:   Reporting on every route   View cleanup after every route

// instantiate the router w/ global events

var myRouter = new Router(routes).configure({

on: analyticsEvents, after: cleanupView, notfound: render404 }).init();

DIRECTOR: ROUTING EVENTS

'/hugoboss': {

on: branded.hugoBoss.setup,

after: branded.hugoBoss.teardown

}

var branded = { hugoBoss: { setup: function() { $('body').addClass('hugo-boss'); new HugoBossView(); }, teardown: function() { $('body').removeClass('hugo-boss’); } } };

ROUTING TABLE [snippet]:

FUNCTION DEFINITION:

BACKBONE VIEW

Teardown!

Global events 404!!

Setup

‘/section’: {

on: function() {

if(!userLoggedIn) {

// route to ‘/login’

return false;

}

},

‘/sub1’: ...,

‘/sub2’: ...,

}

1.  Organized routes 2.   Less repetition 3.   “Sectional” routing 4.   Recursive routing

DIRECTOR: NESTED ROUTING & RECURSION

“section”: “section”,

“section/sub1”: “sectionSub1”,

“section/sub2”: “sectionSub2”,

“section/sub3”: “sectionSub3”

...

OR:

“section/:sub”: “section”

... Define logic with cases in “section” function definition

BACKBONE:

DIRECTOR: recursion forward!

Check for authorization

Break out of recursion

DIRECTOR: FLEXIBLITY & CONTROL

REGULAR EXPRESSIONS

DIRECTOR: var router = Router({

// given the route '/hello/world'.

'/hello': {

'/(\\w+)': {

// this function will return 'world'.

on: function (who) { console.log(who) }

}

}

});

FUNCTIONAL ORGANIZATION

BACKBONE.ROUTER: var Workspace = Backbone.Router.extend({

routes: {

"help": "help", // #help

"search/:query": "search", // #search/kiwis

},

help: function() { ... },

search: function(query) { ... }

});

DIRECTOR: -  Organize functions into global, views, custom

-  Nested function definitions to parallel nested route definitions

Regex yay!

HOW TO REPLACE BACKBONE.ROUTER WITH DIRECTOR

•  What we don’t need from Backbone.js -  Backbone.Router -  Backbone.History (tracks hashchange events)

•  Instead of: var myRouter = Backbone.Router.extend({ … }); Backbone.history.start();

•  We want: var myRouter = new Router(routingTable); myRouter.init();

WHY SO EASY!! J

QUESTIONS?

•  Thefuture.fm: http://thefuture.fm

•  Backbone.js:

http://documentcloud.github.com/backbone

•  Flatiron: http://flatironjs.org

•  Director: http://github.com/flatiron/director

•  Twitter: @janwdet

director x backbone = :)

Documents