KEMBAR78
Give Your JavaScript Apps A Spine | KEY
Give Your
        JS Apps
        A Spine
LACHSTOCK
What is Backbone?
What is Backbone?

“Backbone supplies structure to JavaScript-
heavy 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
application over a RESTful JSON interface. ”
I’m no computer scientist.
What is Backbone?

“Backbone supplies structure to JavaScript-
heavy 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
application over a RESTful JSON interface. ”
WTF?
What is Backbone?

“Backbone supplies structure to JavaScript-
heavy 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
application over a RESTful JSON interface. ”
What is Backbone?

“Backbone supplies structure to JavaScript-
heavy 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
application over a RESTful JSON interface. ”
What is Backbone?

“Backbone supplies structure to JavaScript-
heavy 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
application over a RESTful JSON interface. ”
What is Backbone?




It’s a JavaScript library.
What is Backbone?




It’s a JavaScript library for
writing applications.
What is Backbone?




It’s a JavaScript library for
writing applications like...
Library size




- 35Kb uncompressed
- 3.9Kb Packed and Gzipped
Library dependencies




-   Underscore.js
Underscore.js




- Functional programming library
- 60-odd functions such as map, select,
invoke
Library dependencies




-   Underscore.js
Library dependencies




-   Underscore.js
    - JSON2.js
JSON2.js




- Provides JSON support if it doesn’t exist
natively
- Does nothing in modern browsers
Library dependencies




-   Underscore.js
    - JSON2.js
    - jQuery or Zepto.js
Zepto.js




“Zepto.js is a minimalist JavaScript framework
for mobile WebKit browsers, with a jQuery-
compatible syntax.”
What is Backbone?

“Backbone supplies structure to JavaScript-
heavy 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
application over a RESTful JSON interface. ”
Backbone.Model




- Models contain the data
Backbone.Model




- Models contain the data
- Validations, properties and permissions
Backbone.Model




- Models contain the data
- Validations, properties and permissions
- Manage changes to the above
What is Backbone?

“Backbone supplies structure to JavaScript-
heavy 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
application over a RESTful JSON interface. ”
Backbone.Collection




- Collections are ordered sets of models
Backbone.Collection




- Collections are ordered sets of models
- Act on events within models
Backbone.Collection




- Collections are ordered sets of models
- Act on events within models
- Add, Remove, Fetch, Refresh, Create, Sort
What is Backbone?

“Backbone supplies structure to JavaScript-
heavy 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
application over a RESTful JSON interface. ”
Backbone.View




- A logical UI component, not just the
template
Backbone.View




- A logical UI component, not just the
template
- Bind render function to model change event
Backbone.View




- A logical UI component, not just the
template
- Bind render function to model change event
What is Backbone?



-   Backbone.Events
-   Backbone.Controller
-   Backbone.History
-   Backbone.Sync
Find out more




http://documentcloud.github.com/
backbone/
Questions?

Give Your JavaScript Apps A Spine