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