Using the Flatiron framework's router Director with Backbone.JS and how it addresses key issues encountered by complex single-page web applications in a simple & effective way.
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
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!!
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
its current state VIEW: presents data & routes user input to Presenter PRESENTER: drives changes to Model & View documentcloud.github.com/backbone • 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
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]”) documentcloud.github.com/backbone • Syncs your views consistently with the data that drives it using rich event handling
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
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
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