Backbone.js introduction workshop
-
Upload
yifat-kanfi -
Category
Technology
-
view
213 -
download
0
Transcript of Backbone.js introduction workshop
![Page 1: Backbone.js introduction workshop](https://reader033.fdocuments.in/reader033/viewer/2022052910/559bf9f61a28ab1f588b45e7/html5/thumbnails/1.jpg)
Backbone.jsIntroduction / Oren Farhi
![Page 2: Backbone.js introduction workshop](https://reader033.fdocuments.in/reader033/viewer/2022052910/559bf9f61a28ab1f588b45e7/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, CSS3
github.com/tikalk
@tikalk
![Page 3: Backbone.js introduction workshop](https://reader033.fdocuments.in/reader033/viewer/2022052910/559bf9f61a28ab1f588b45e7/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: Backbone.js introduction workshop](https://reader033.fdocuments.in/reader033/viewer/2022052910/559bf9f61a28ab1f588b45e7/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: Backbone.js introduction workshop](https://reader033.fdocuments.in/reader033/viewer/2022052910/559bf9f61a28ab1f588b45e7/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: Backbone.js introduction workshop](https://reader033.fdocuments.in/reader033/viewer/2022052910/559bf9f61a28ab1f588b45e7/html5/thumbnails/6.jpg)
The Present: All we have is now
SimplicityOrganization
Focus
![Page 7: Backbone.js introduction workshop](https://reader033.fdocuments.in/reader033/viewer/2022052910/559bf9f61a28ab1f588b45e7/html5/thumbnails/7.jpg)
Backbone Background
Jeremy Ashkenas - Underscore, CoffeescriptDocumentCloud
Dependencies:jquery / zeptounderscore.jsjson2.js ( IE, other without JSON )
![Page 8: Backbone.js introduction workshop](https://reader033.fdocuments.in/reader033/viewer/2022052910/559bf9f61a28ab1f588b45e7/html5/thumbnails/8.jpg)
Backbone is:
MVC library (MIT)StructureRESTful JSON connectorHash Routing EngineEvent DrivenExtended
ModelEventsViewCollectionRouterUtilities - based underscore.jsTemplating Engine - based underscore.js
![Page 9: Backbone.js introduction workshop](https://reader033.fdocuments.in/reader033/viewer/2022052910/559bf9f61a28ab1f588b45e7/html5/thumbnails/9.jpg)
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
![Page 10: Backbone.js introduction workshop](https://reader033.fdocuments.in/reader033/viewer/2022052910/559bf9f61a28ab1f588b45e7/html5/thumbnails/10.jpg)
This is a backbone.
When used properlyIt keeps one's headOut of one's buttRand Macivor
![Page 11: Backbone.js introduction workshop](https://reader033.fdocuments.in/reader033/viewer/2022052910/559bf9f61a28ab1f588b45e7/html5/thumbnails/11.jpg)
What we're going to do today:
https://github.com/tikalk/backbone-workshop
![Page 12: Backbone.js introduction workshop](https://reader033.fdocuments.in/reader033/viewer/2022052910/559bf9f61a28ab1f588b45e7/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: Backbone.js introduction workshop](https://reader033.fdocuments.in/reader033/viewer/2022052910/559bf9f61a28ab1f588b45e7/html5/thumbnails/13.jpg)
Backbone.Model
![Page 14: Backbone.js introduction workshop](https://reader033.fdocuments.in/reader033/viewer/2022052910/559bf9f61a28ab1f588b45e7/html5/thumbnails/14.jpg)
Backbone.Model - PRACTICE
Model properties: defaults, Model Methods: initialize, set, get
![Page 15: Backbone.js introduction workshop](https://reader033.fdocuments.in/reader033/viewer/2022052910/559bf9f61a28ab1f588b45e7/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: Backbone.js introduction workshop](https://reader033.fdocuments.in/reader033/viewer/2022052910/559bf9f61a28ab1f588b45e7/html5/thumbnails/16.jpg)
Backbone.View
![Page 17: Backbone.js introduction workshop](https://reader033.fdocuments.in/reader033/viewer/2022052910/559bf9f61a28ab1f588b45e7/html5/thumbnails/17.jpg)
Backbone.View - PRACTICE
View properties: events, tagName, className, render
![Page 18: Backbone.js introduction workshop](https://reader033.fdocuments.in/reader033/viewer/2022052910/559bf9f61a28ab1f588b45e7/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: Backbone.js introduction workshop](https://reader033.fdocuments.in/reader033/viewer/2022052910/559bf9f61a28ab1f588b45e7/html5/thumbnails/19.jpg)
_.Underscore.js
![Page 20: Backbone.js introduction workshop](https://reader033.fdocuments.in/reader033/viewer/2022052910/559bf9f61a28ab1f588b45e7/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: Backbone.js introduction workshop](https://reader033.fdocuments.in/reader033/viewer/2022052910/559bf9f61a28ab1f588b45e7/html5/thumbnails/21.jpg)
Backbone.Collection
![Page 22: Backbone.js introduction workshop](https://reader033.fdocuments.in/reader033/viewer/2022052910/559bf9f61a28ab1f588b45e7/html5/thumbnails/22.jpg)
Backbone.Collection - PRACTICE
![Page 23: Backbone.js introduction workshop](https://reader033.fdocuments.in/reader033/viewer/2022052910/559bf9f61a28ab1f588b45e7/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: Backbone.js introduction workshop](https://reader033.fdocuments.in/reader033/viewer/2022052910/559bf9f61a28ab1f588b45e7/html5/thumbnails/24.jpg)
Backbone.Router
![Page 25: Backbone.js introduction workshop](https://reader033.fdocuments.in/reader033/viewer/2022052910/559bf9f61a28ab1f588b45e7/html5/thumbnails/25.jpg)
Backbone.Router - PRACTICE
![Page 26: Backbone.js introduction workshop](https://reader033.fdocuments.in/reader033/viewer/2022052910/559bf9f61a28ab1f588b45e7/html5/thumbnails/26.jpg)
Questions?
Backbone - http://documentcloud.github.com/backbone/Underscore - http://documentcloud.github.com/underscoreTikal - http://www.tikalk.com