1. Backbone.js
Introduction / Oren Farhi

2. Oren Farhi
Front End Architect, JS Engineer @Tikal
JS Group Leader - Meet, Share, Contribute & Coding
Speaker (Israel & World Wide)
Developing with:
Pure Javascript, Backbone.js, Underscore.js, jQuery, CSS3
github.com/tikalk
@tikalk

3. We help companies build, deliver,
deploy, manage and optimize their products.
JAVA JS RoR.NETALM
“Today we are SURE that we made the right
decision, choosing Tikal”
Guy Ben-Porat - Development Manager “ExLibris”

4. Tikal by Numbers
“Actions speak louder than words”
Tikal's motto
1600+
Community
Members
150+
Blog Posts
Last Year
460+
Meetup
Members
100+
Projects
Last Year
90+
Tikal’s
Experts Team
12+
Years old

5. The Past:
JS is the wild west
No code conventions
jQuery bloated code
Data & DOM mixed
jQuery ajax & callbacks are a
bit messy
No Reuse
Most End Result:
words and sentences with
long selectors and "hanged"
functions everywhere

6. The Present: All we have is now
Simplicity
Organization
Focus

7. Backbone Background
Jeremy Ashkenas -
Underscore, Coffeescript
DocumentCloud
Dependencies:
jquery / zepto
underscore.js
json2.js ( IE, other without JSON )

8. Backbone is:
MVC library (MIT)
Structure
RESTful JSON connector
Hash Routing Engine
Event Driven
Extended
Model
Events
View
Collection
Router
Utilities - based underscore.js
Templating Engine - based underscore.js

9. What is it good for?
Linkedin Mobile, SoundCloud, Foursquar,
Khan Academy, Airbnb, Rdio, Hulu
Structure for Code
Separation of Concerns
Modular, Extensible
Reusable Modules
Loose Coupling
Model Driven
Unit Test Ready
M - Backbone.Model
V - _.template
C - Backbone.View / Router

10. This is a backbone.
When used properly
It keeps one's head
Out of one's butt
Rand Macivor

11. What we're going to do today:
https://github.com/tikalk/backbone-workshop

12. Backbone.Model
Where JSON data is stored
REST, Constructor, Manually
Data Change Events
Works With: Collection, View
Methods:
set - validate
get
escape
clear
fetch
save (REST) - parse
destroy (REST)

13. Backbone.Model

14. Backbone.Model - PRACTICE
Model properties: defaults,
Model Methods: initialize, set, get

15. Backbone.View
A Controller for a DOM Element (wrapper)
Renders Model/Collection to DOM (html)
Delegates DOM Events
Works With: Model, Collection
Can use Any template engine to render
html
Methods:
render (return this)
make
remove
un/delegateEvents
Properties:
$ = $el.find
el
$el
options
events

16. Backbone.View

17. Backbone.View - PRACTICE
View properties: events, tagName, className, render

18. _.Underscore.js
Utilities for Javascript (60)
Collections, Arrays, Functions, Objects,
Uses Browsers Implementation if possible
High Expressiveness
Works With: Backbone, Standalone
Methods:
Collections - each, map, filter, pluck,
groupBy
Arrays - without, uniq
Functions - bind, debounce,
Object - keys, values, is-* (Empty, Date,
String, Function etc..), has
Utility - template, escape, mixin
Chaining - chain, value

19. _.Underscore.js

20. Backbone.Collection
Collection of Models
REST, Constructor, Manually
Inherits Change Events from Models
Works With: Model, View
Many utilities methods from underscore.js
Methods:
add
remove
length
fetch
save (REST) - parse
destroy (REST)
+ 28 Underscore methods:
map, find, filter, sortBy, groupBy, pluck,
invoke ...
Properties:
options

21. Backbone.Collection

22. Backbone.Collection - PRACTICE

23. Backbone.Router
Navigation Handling (bookmarks)
Listens to url change events
Natively integrated to Back/Forward
Easy routing handling
Works With: Backbone.History
Methods:
custom
navigate
route (create)
Properties:
routes (key - value) - (route - handler)

24. Backbone.Router

25. Backbone.Router - PRACTICE

26. Questions?
Backbone - http://documentcloud.github.com/backbone/
Underscore - http://documentcloud.github.com/underscore
Tikal - http://www.tikalk.com