tikal's backbone_js introduction workshop
DESCRIPTION
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.TRANSCRIPT
![Page 1: Tikal's Backbone_js introduction workshop](https://reader034.vdocuments.net/reader034/viewer/2022052505/554bcd76b4c905ac708b4736/html5/thumbnails/1.jpg)
Backbone.jsIntroduction / Oren Farhi
![Page 2: Tikal's Backbone_js introduction workshop](https://reader034.vdocuments.net/reader034/viewer/2022052505/554bcd76b4c905ac708b4736/html5/thumbnails/2.jpg)
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
![Page 3: Tikal's Backbone_js introduction workshop](https://reader034.vdocuments.net/reader034/viewer/2022052505/554bcd76b4c905ac708b4736/html5/thumbnails/3.jpg)
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”
![Page 4: Tikal's Backbone_js introduction workshop](https://reader034.vdocuments.net/reader034/viewer/2022052505/554bcd76b4c905ac708b4736/html5/thumbnails/4.jpg)
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
![Page 5: Tikal's Backbone_js introduction workshop](https://reader034.vdocuments.net/reader034/viewer/2022052505/554bcd76b4c905ac708b4736/html5/thumbnails/5.jpg)
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
![Page 6: Tikal's Backbone_js introduction workshop](https://reader034.vdocuments.net/reader034/viewer/2022052505/554bcd76b4c905ac708b4736/html5/thumbnails/6.jpg)
The Present: All we have is now
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
SimplicityOrganization
Focus
![Page 7: Tikal's Backbone_js introduction workshop](https://reader034.vdocuments.net/reader034/viewer/2022052505/554bcd76b4c905ac708b4736/html5/thumbnails/7.jpg)
Backbone Background
Jeremy Ashkenas - Underscore, CoffeescriptDocumentCloud
Dependencies:jquery / zeptounderscore.jsjson2.js ( IE, other without JSON )
![Page 8: Tikal's Backbone_js introduction workshop](https://reader034.vdocuments.net/reader034/viewer/2022052505/554bcd76b4c905ac708b4736/html5/thumbnails/8.jpg)
Backbone is:
MVC library (MIT)Project "DocumentCloud"StructureRESTful JSON connectorHash Routing EngineEvent DrivenExtended
ModelEventsViewCollectionRouterUtilities - based underscore.jsTemplating Engine - based underscore.js
![Page 9: Tikal's Backbone_js introduction workshop](https://reader034.vdocuments.net/reader034/viewer/2022052505/554bcd76b4c905ac708b4736/html5/thumbnails/9.jpg)
What is it good for?
Web ApplicationsStructure for CodeDivide & ConquerOne Responsibility Concept
Modular, Extensible
Reusable Modules
Loose Coupling
Model Driven
Unit Test Ready
M - Backbone.Model
V - _.template
C - Backbone.View / Router
![Page 10: Tikal's Backbone_js introduction workshop](https://reader034.vdocuments.net/reader034/viewer/2022052505/554bcd76b4c905ac708b4736/html5/thumbnails/10.jpg)
This is a backbone.
When used properlyIt keeps one's headOut of one's buttRand Macivor
![Page 11: Tikal's Backbone_js introduction workshop](https://reader034.vdocuments.net/reader034/viewer/2022052505/554bcd76b4c905ac708b4736/html5/thumbnails/11.jpg)
What we're going to do today:
https://github.com/tikalk/backbone-workshop/downloads
![Page 12: Tikal's Backbone_js introduction workshop](https://reader034.vdocuments.net/reader034/viewer/2022052505/554bcd76b4c905ac708b4736/html5/thumbnails/12.jpg)
Backbone.Model
Where JSON data is storedREST, Constructor, ManuallyData Change EventsWorks With: Collection, View
Methods:set - validategetescapeclearfetchsave (REST) - parsedestroy (REST)
![Page 13: Tikal's Backbone_js introduction workshop](https://reader034.vdocuments.net/reader034/viewer/2022052505/554bcd76b4c905ac708b4736/html5/thumbnails/13.jpg)
Backbone.Model
![Page 14: Tikal's Backbone_js introduction workshop](https://reader034.vdocuments.net/reader034/viewer/2022052505/554bcd76b4c905ac708b4736/html5/thumbnails/14.jpg)
Backbone.Model - PRACTICE
![Page 15: Tikal's Backbone_js introduction workshop](https://reader034.vdocuments.net/reader034/viewer/2022052505/554bcd76b4c905ac708b4736/html5/thumbnails/15.jpg)
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
![Page 16: Tikal's Backbone_js introduction workshop](https://reader034.vdocuments.net/reader034/viewer/2022052505/554bcd76b4c905ac708b4736/html5/thumbnails/16.jpg)
Backbone.View
![Page 17: Tikal's Backbone_js introduction workshop](https://reader034.vdocuments.net/reader034/viewer/2022052505/554bcd76b4c905ac708b4736/html5/thumbnails/17.jpg)
Backbone.View - PRACTICE
![Page 18: Tikal's Backbone_js introduction workshop](https://reader034.vdocuments.net/reader034/viewer/2022052505/554bcd76b4c905ac708b4736/html5/thumbnails/18.jpg)
_.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
![Page 19: Tikal's Backbone_js introduction workshop](https://reader034.vdocuments.net/reader034/viewer/2022052505/554bcd76b4c905ac708b4736/html5/thumbnails/19.jpg)
_.Underscore.js
![Page 20: Tikal's Backbone_js introduction workshop](https://reader034.vdocuments.net/reader034/viewer/2022052505/554bcd76b4c905ac708b4736/html5/thumbnails/20.jpg)
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
![Page 21: Tikal's Backbone_js introduction workshop](https://reader034.vdocuments.net/reader034/viewer/2022052505/554bcd76b4c905ac708b4736/html5/thumbnails/21.jpg)
Backbone.Collection
![Page 22: Tikal's Backbone_js introduction workshop](https://reader034.vdocuments.net/reader034/viewer/2022052505/554bcd76b4c905ac708b4736/html5/thumbnails/22.jpg)
Backbone.Collection - PRACTICE
![Page 23: Tikal's Backbone_js introduction workshop](https://reader034.vdocuments.net/reader034/viewer/2022052505/554bcd76b4c905ac708b4736/html5/thumbnails/23.jpg)
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)
![Page 24: Tikal's Backbone_js introduction workshop](https://reader034.vdocuments.net/reader034/viewer/2022052505/554bcd76b4c905ac708b4736/html5/thumbnails/24.jpg)
Backbone.Router
![Page 25: Tikal's Backbone_js introduction workshop](https://reader034.vdocuments.net/reader034/viewer/2022052505/554bcd76b4c905ac708b4736/html5/thumbnails/25.jpg)
Backbone.Router - PRACTICE
![Page 26: Tikal's Backbone_js introduction workshop](https://reader034.vdocuments.net/reader034/viewer/2022052505/554bcd76b4c905ac708b4736/html5/thumbnails/26.jpg)
Questions?
Backbone - http://documentcloud.github.com/backbone/Underscore - http://documentcloud.github.com/underscoreTikal - http://www.tikalk.com