With “Introduction to Backbone.js” workshop by Tikal’s Oren Farhi, attendees will learn to develop web application using Backbone.js framework. In addition to the basics of Backbone.js, attendees will get familiar with Twitter’s Bootstrap and will finally, connect to a live feed and develop a full working backbone.js application.

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,
Common Sense, CSS3
github.com/tikalk
@tikalk

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

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

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
JS is the wild west
No code conventions
jQuery bloated code
Data & DOM mixed Simplicity
jQuery ajax & callbacks are a
bit messy
No Reuse
Organization
Focus
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) Model
Project "DocumentCloud" Events
Structure View
RESTful JSON connector Collection
Hash Routing Engine Router
Event Driven Utilities - based underscore.js
Extended Templating Engine - based underscore.js

9. What is it good for?
Web Applications Modular, Extensible
Structure for Code Reusable Modules
Divide & Conquer Loose Coupling
One Responsibility Concept
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/downloads

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

13. Backbone.Model

14. Backbone.Model - PRACTICE

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

16. Backbone.View

17. Backbone.View - PRACTICE

18. _.Underscore.js
Utilities for Javascript (60) Methods:
Collections, Arrays, Functions, Objects, Collections - each, map, filter, pluck,
Uses Browsers Implementation if possible groupBy
High Expressiveness Arrays - without, uniq
Works With: Backbone, Standalone
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 Methods:
REST, Constructor, Manually add
Inherits Change Events from Models remove
Works With: Model, View length
Many utilities methods from underscore.js 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) Methods:
Listens to url change events custom
Natively integrated to Back/Forward navigate
Easy routing handling route (create)
Works With: Backbone.History
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