Grow a Backbone.js and drag your apps out of the past with JavaScript Templating - Brad Wood
May 18, 2013
Grow a Backbone.js and drag your apps out of the past with JavaScript Templating - Brad Wood
What problems do JS MVC frameworks address?
spaghetti front-end code
separation of markup from data
separation of markup from behavior
deep linking / history
-- on a single page app, how do you send the user a link for something that is "4-clicks into" that single page app?
-- want browser "history" buttons to work as expected, even in single page apps
what are we addressing with a f/w on the front end
used to be that we didn't address ANYthing
Reduce redundant code
Passing HTML via ajax
-- using DRY (don't repeat yourself) concept, rather than pass repeated HTML down over and over again, pass it once and use json for the data
Backbone.js
Came out in 2010
We call it a framework, but it's really a library
different than Angular. Angular is a full end to end solution
Backbone is moreso a set of "building blocks"
-- it's not really MVC, it's just MV and "C" is up to you.
"Get your truth out of the DOM"
-- we don't want our data mixed in with the HTML markup
Really cool RESTful JSON interface included
So what are Models?
-a JS "class" that "extends" a base Backbone "class"
-JS doesn't have a true "extends" like C++ or Java
use some helper methods to extend things in a java-esque way
Models are the definitive source for all your data
has some nice getters and setters for data
can broadcast events when data changes
-- this s what ties together the pieces of your app
Sample Model
Use it like so:
var me = new personModel({name: "Brad Wood", age: 33});
What are views?
JS class that "extends" a backbone base class
every view has an HTML element, and it's up to you to put that into the DOM
var personView = Backbone.View.extend ({
initialize: function(){...},
render: function()
{
...similar layout to the Models
and you use it like so:
var myPersonView = new personView( mode: model );
Collections
JS class that extends the Backbone base class
-- typically you don't deal w/ just ONE model
-- comments on a page....there may be 20 or 30 of them on 1 page
can stick them all in an array, that's fine.
OR can put them in a Backbone collection
Client-Side Templating---
Several template engines (mustache, underscore, etc)
Underscore templates look like so:
note we're using the script tag but not setting it to "javascript"
the underscore in code is a reference to the Underscore library
Routes --
extra text after the hash(#) in a URL
so you can bookmark where you are
and the page doesn't reload
can have placeholders for variables
params: site.com/#/post/:postID
example: site.com/#/post/123 (postID = 123)
can do the same thing in Backbone
appRouter = Backbone.Router.extend
will only have one router on your page
var myAppRouter = new AppRouter();
Tying it all together with events --
everything is based on your app broadcasting/listening to events
this.listenTo(this.model, 'change', this.render );
3 params:
what am i listening to - this.model
what do i care about - 'change'
what do i want to happen - this.render
Drawbacks of client-side frameworks:
progressive enhancement and non obtrusive JS
...most framework based apps disregard this. if you turn off JS, you'll just get an empty page
not SEO-friendly at this point
-- if Google indexes your site, there's very little HTML for google to index.
-- Google doesn't execute JS or load the framework
-- so if page rankings are important, give that some thought before doing this
errant bindings can cause memory leaks in the app
next steps --
more complex vies
nested models
REST interface
cooler routes
Underscore library does way more than tempting
all kinds of built-in things
find
filter
where
group by
where
min/max
defer
throttle
backbonejs.org
underscorejs.org
What problems do JS MVC frameworks address?
spaghetti front-end code
separation of markup from data
separation of markup from behavior
deep linking / history
-- on a single page app, how do you send the user a link for something that is "4-clicks into" that single page app?
-- want browser "history" buttons to work as expected, even in single page apps
what are we addressing with a f/w on the front end
used to be that we didn't address ANYthing
Reduce redundant code
Passing HTML via ajax
-- using DRY (don't repeat yourself) concept, rather than pass repeated HTML down over and over again, pass it once and use json for the data
Backbone.js
Came out in 2010
We call it a framework, but it's really a library
different than Angular. Angular is a full end to end solution
Backbone is moreso a set of "building blocks"
-- it's not really MVC, it's just MV and "C" is up to you.
"Get your truth out of the DOM"
-- we don't want our data mixed in with the HTML markup
Really cool RESTful JSON interface included
So what are Models?
-a JS "class" that "extends" a base Backbone "class"
-JS doesn't have a true "extends" like C++ or Java
use some helper methods to extend things in a java-esque way
Models are the definitive source for all your data
has some nice getters and setters for data
can broadcast events when data changes
-- this s what ties together the pieces of your app
Sample Model
Use it like so:
var me = new personModel({name: "Brad Wood", age: 33});
What are views?
JS class that "extends" a backbone base class
every view has an HTML element, and it's up to you to put that into the DOM
var personView = Backbone.View.extend ({
initialize: function(){...},
render: function()
{
...similar layout to the Models
and you use it like so:
var myPersonView = new personView( mode: model );
Collections
JS class that extends the Backbone base class
-- typically you don't deal w/ just ONE model
-- comments on a page....there may be 20 or 30 of them on 1 page
can stick them all in an array, that's fine.
OR can put them in a Backbone collection
Client-Side Templating---
Several template engines (mustache, underscore, etc)
Underscore templates look like so:
note we're using the script tag but not setting it to "javascript"
the underscore in code is a reference to the Underscore library
Routes --
extra text after the hash(#) in a URL
so you can bookmark where you are
and the page doesn't reload
can have placeholders for variables
params: site.com/#/post/:postID
example: site.com/#/post/123 (postID = 123)
can do the same thing in Backbone
appRouter = Backbone.Router.extend
will only have one router on your page
var myAppRouter = new AppRouter();
Tying it all together with events --
everything is based on your app broadcasting/listening to events
this.listenTo(this.model, 'change', this.render );
3 params:
what am i listening to - this.model
what do i care about - 'change'
what do i want to happen - this.render
Drawbacks of client-side frameworks:
progressive enhancement and non obtrusive JS
...most framework based apps disregard this. if you turn off JS, you'll just get an empty page
not SEO-friendly at this point
-- if Google indexes your site, there's very little HTML for google to index.
-- Google doesn't execute JS or load the framework
-- so if page rankings are important, give that some thought before doing this
errant bindings can cause memory leaks in the app
next steps --
more complex vies
nested models
REST interface
cooler routes
Underscore library does way more than tempting
all kinds of built-in things
find
filter
where
group by
where
min/max
defer
throttle
backbonejs.org
underscorejs.org