Upload
yifat-kanfi
View
213
Download
0
Tags:
Embed Size (px)
Citation preview
Backbone.jsIntroduction / Oren Farhi
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
We help companies build, deliver, deploy, manage and optimize their products.
JAVA JS RoR.NET ALM
“Today we are SURE that we made the right decision, choosing Tikal”
Guy Ben-Porat - Development Manager “ExLibris”
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
The Past:
JS is the wild westNo code conventionsjQuery bloated codeData & DOM mixedjQuery ajax & callbacks are a bit messyNo Reuse
Most End Result:words and sentences with long selectors and "hanged" functions everywhere
The Present: All we have is now
SimplicityOrganization
Focus
Backbone Background
Jeremy Ashkenas - Underscore, CoffeescriptDocumentCloud
Dependencies:jquery / zeptounderscore.jsjson2.js ( IE, other without JSON )
Backbone is:
MVC library (MIT)StructureRESTful JSON connectorHash Routing EngineEvent DrivenExtended
ModelEventsViewCollectionRouterUtilities - based underscore.jsTemplating Engine - based underscore.js
What is it good for?Linkedin Mobile, SoundCloud, Foursquar, Khan Academy, Airbnb, Rdio, HuluStructure for CodeSeparation of Concerns
Modular, Extensible
Reusable Modules
Loose Coupling
Model Driven
Unit Test Ready
M - Backbone.Model
V - _.template
C - Backbone.View / Router
This is a backbone.
When used properlyIt keeps one's headOut of one's buttRand Macivor
What we're going to do today:
https://github.com/tikalk/backbone-workshop
Backbone.Model
Where JSON data is storedREST, Constructor, ManuallyData Change EventsWorks With: Collection, View
Methods:set - validategetescapeclearfetchsave (REST) - parsedestroy (REST)
Backbone.Model
Backbone.Model - PRACTICE
Model properties: defaults, Model Methods: initialize, set, get
Backbone.View
A Controller for a DOM Element (wrapper)Renders Model/Collection to DOM (html)Delegates DOM EventsWorks With: Model, CollectionCan use Any template engine to render html
Methods:render (return this)makeremoveun/delegateEvents
Properties:$ = $el.findel$eloptionsevents
Backbone.View
Backbone.View - PRACTICE
View properties: events, tagName, className, render
_.Underscore.js
Utilities for Javascript (60)Collections, Arrays, Functions, Objects,Uses Browsers Implementation if possibleHigh ExpressivenessWorks 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
_.Underscore.js
Backbone.Collection
Collection of ModelsREST, Constructor, ManuallyInherits Change Events from ModelsWorks With: Model, ViewMany utilities methods from underscore.js
Methods:addremovelengthfetchsave (REST) - parsedestroy (REST)+ 28 Underscore methods:map, find, filter, sortBy, groupBy, pluck, invoke ...
Properties:options
Backbone.Collection
Backbone.Collection - PRACTICE
Backbone.Router
Navigation Handling (bookmarks)Listens to url change eventsNatively integrated to Back/ForwardEasy routing handlingWorks With: Backbone.History
Methods:customnavigateroute (create)
Properties:routes (key - value) - (route - handler)
Backbone.Router
Backbone.Router - PRACTICE
Questions?
Backbone - http://documentcloud.github.com/backbone/Underscore - http://documentcloud.github.com/underscoreTikal - http://www.tikalk.com