BACKBONE.JS - Eviscape

bolivialodgeInternet and Web Development

Dec 14, 2013 (7 years and 7 months ago)

208 views

BACKBONE.JS
Give your front end code some structure.
WHAT?
A very lightweight JavaScript library that helps keep
client side applications sane.
WHAT?
Or...
It provides flexible data models, collections, DOM based views and a simple events system
which allows you to code complex client side applications, based around a RESTful API,
with ease.
WHAT? (...IT’S NOT)

It’s not a framework.

It’s not MVC.

It’s not the holy grail.
Backbone.js was originally written by Jeremy Ashkenas from DocumentCloud.
He needed a more sophisticated way to write front end JavaScript so he created this.
He has also written Underscore.js and CoffeeScript.
Backbone.js is open source, under MIT license and hosted on Github,
where many others have contributed to it’s code base.
WHO?
Some big names are using Backbone.js
WHO?
LinkedIn
SoundCloud
Khan Academy
Posterous
WHY?
Front end code can get messy quickly.
WHY?
Front end code can get messy quickly.

It can easily lack structure.

Creating DOM elements can get complex.

Bad practices are easy to do.
WHY?
Making user interfaces can be hard.
WHY?
Making user interfaces can be hard.

Syncing data between back and front is difficult.

Making highly interactive interfaces is difficult.

Handling user events gets complex quickly.
WHY?
No clear distinction between the back end and front end.
WHY?
No clear distinction between the back end and front end.

Script tags and code all over the place.

Doing AJAX can get cumbersome.

Ideally, the front and back should talk via a RESTful API.
WHY?
Because it’s cool.
HOW?
What is required to use this library?

Underscore.js

jQuery / Zepto.js (optional, though recommended)
HOW?
What are the main areas of the library?

Models

Collections

Views

Routers

Events
HOW?
Models.

Holds a single group of related data (a user / product / article etc.)

Can be easily synced to the backend over a RESTful API.

Hold relative methods and properties (conversions, validation, computations etc.)

They’re
not
really like a database model (in something like Django)
HOW?
Collections.

Holds a group of models.

Can be easily synced to the backend over a RESTful API.

Run methods on your group of models (find, filter, size, first, last, sort etc).

So if Song was a model then Album would be the collection (or some shit).
HOW?
Views.

It is tightly related to a specific part of the DOM.

Great with models and collections, your data changes the view is updated.

Handling events is made very easy.

Use any client side template language you want or just use Underscore.

They’re not really like views in the traditional sense of MVC.
HOW?
Events.

A publisher/subscriber way of doing things, built in.

Models, collections, views and more can easily be hooked up with events.

If your model data changes, anything it’s related to will update automatically.

...same for collections or views (or sub views) too.

Build your own events system with what Backbone.js provides.
HOW?
Routers.

A great way to handle your single page application.

Lets you handle hash-tag  style URLs.

Lets you handle HTML5 pushState and browser history stuff too.
WHERE?
A useful collection of resources for learning more.

http://backbonejs.org

http://addyosmani.com

http://javascriptjabber.com

http://herdingcode.com

http://peepcode.com
QUESTIONS?