Director + backbone = :) - Amazon Web Services

quaggafoulInternet και Εφαρμογές Web

14 Δεκ 2013 (πριν από 3 χρόνια και 6 μήνες)

78 εμφανίσεις

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


E
ndless 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

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

BACKBONE.JS

EVENT HANDLING

Models/Collections trigger events which Views can bind to.


Collection


reset(collection)

-

when the entire contents have been replaced


t
riggered by:
fetch, reset, etc
.


add(model, collection)
-

w
hen a model is added to a collection


remove(model, collection)
-

w
hen 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

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

d
efine

functions

URL fragments

fn

names

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

To start tracking
hashchanges
:

Backbone.history.start
();

documentcloud.github.com
/
backbone


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
.

f
latironjs.org


FLATIRON: MAIN COMPONENTS

1.
DIRECTOR


URL Routing

2.
PLATES


Templating

3.
RESOURCEFUL


Data Management

4.
UNION


Middleware

5.
BROADWAY


Plugins

6.
WINSTON


Logging

f
latironjs.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.

f
latironjs.org


DIRECTOR:
OVERVIEW


Depth
-
first search URL Matching


Route events


global


for each route


Nested routing


Route recursion


Regex


Lots of flexibility


f
unction 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”
routi湧

-
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


㐰㐠
偡ge

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



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