Director + backbone = :)

1. Director + backbone = :) Janessadet– lead front-enddev @ Thefuture.fm

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

3. 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!!

4. What is Backbone.js? Backbone.jsgives structure to web applications by providing modelswith key-value binding and custom events, collectionswith a rich API of enumerable functions, viewswith 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

5. 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 MODEL PRESENTER VIEW Backbone.Model (Backbone.Collection) Backbone.View show Templates/ Rendered View index • Provides structure for your data that you can parallel with your views • (keeps things logically organized) documentcloud.github.com/backbone

6. 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 documentcloud.github.com/backbone

7. Backbone.router: Quick intro • varmyRouter = 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. To start tracking hashchanges: Backbone.history.start(); define route table URL fragments fn names define functions SIMPLE! Great for straightforward client-side routing of simple web apps. documentcloud.github.com/backbone

8. What is Flatiron? Flatiron is an adaptableframework 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

9. FLATIRON: MAIN COMPONENTS • DIRECTOR URL Routing • PLATES Templating • RESOURCEFUL Data Management • UNION Middleware • BROADWAY Plugins • WINSTON Logging Client-Side!! flatironjs.org

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

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

12. Director: quick intro Route table constructor // instantiate varrouter = new Router(routes) .configure(options); // initialize – start listening! router.init(); • varroutes = { • '/': viewMethods.index, • '/dog': { • '/:color': { • on: function (color) { • console.log(color) • } • } • } • }; github.com/flatiron/director

13. director > backbone.router Why backbone.router Wasn’t cutting it for us Directorsaves the day! FLEXIBILITY Routing Events: Setup/Teardown Global routing events notfound handler  404 Page Nested Routes & Recursion Regex control Flexibility with function organization • Custom styling • “Sectional” routing • Pre-route authorization • Global event firing • Proper 404 catching • More flexibility

14. DIRECTOR: ROUTING EVENTS • 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 • varmyRouter= new Router(routes).configure({ • on: analyticsEvents, • after: cleanupView, • notfound: render404 • }).init(); Global events 404!! FUNCTION DEFINITION: var branded = { hugoBoss: { setup: function() { $('body').addClass('hugo-boss'); new HugoBossView(); }, teardown: function() { $('body').removeClass('hugo-boss’); } } }; ROUTING TABLE [snippet]: Setup '/hugoboss': { on: branded.hugoBoss.setup, after: branded.hugoBoss.teardown } BACKBONE VIEW Teardown!

15. DIRECTOR:nested routing & recursion • ‘/section’: { • on: function() { • if(!userLoggedIn) { • // route to ‘/login’ • return false; • } • }, • ‘/sub1’: ..., • ‘/sub2’: ..., • } • Organized routes • Less repetition • “Sectional” routing • Recursive routing DIRECTOR:recursion forward Check for authorization BACKBONE: Break out of recursion “section”: “section”, “section/sub1”: “sectionSub1”, “section/sub2”: “sectionSub2”, “section/sub3”: “sectionSub3” ... OR: “section/:sub”: “section” ... Define logic with cases in “section” function definition

16. Director: flexiblity & control Regular expressions Functional organization BACKBONE.ROUTER: varWorkspace = 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 • DIRECTOR: • varrouter = Router({ • // given the route '/hello/world'. • '/hello': { • '/(\\w+)': { • // this function will return 'world'. • on: function (who) { console.log(who) } • } • } • }); Regex yay!

17. How to replace backbone.routerwITHdirector • What we don’t need from Backbone.js • Backbone.Router • Backbone.History (tracks hashchange events) • Instead of: varmyRouter = Backbone.Router.extend({ … }); Backbone.history.start(); • We want: varmyRouter = new Router(routingTable); myRouter.init(); WHY SO EASY!! 

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