Backbone.jsIntroduction / Oren Farhi
Oren FarhiFront End Architect, JS Engineer @TikalJS Group Leader - Meet, Share, Contribute & CodingSpeaker (Israel & World...
We help companies build, deliver,deploy, manage and optimize their products.JAVA JS RoR.NETALM“Today we are SURE that we m...
Tikal by Numbers“Actions speak louder than words”Tikals motto1600+CommunityMembers150+Blog PostsLast Year460+MeetupMembers...
The Past:JS is the wild westNo code conventionsjQuery bloated codeData & DOM mixedjQuery ajax & callbacks are abit messyNo...
The Present: All we have is nowSimplicityOrganizationFocus
Backbone BackgroundJeremy Ashkenas -Underscore, CoffeescriptDocumentCloudDependencies:jquery / zeptounderscore.jsjson2.js ...
Backbone is:MVC library (MIT)StructureRESTful JSON connectorHash Routing EngineEvent DrivenExtendedModelEventsViewCollecti...
What is it good for?Linkedin Mobile, SoundCloud, Foursquar,Khan Academy, Airbnb, Rdio, HuluStructure for CodeSeparation of...
This is a backbone.When used properlyIt keeps ones headOut of ones buttRand Macivor
What were going to do today:https://github.com/tikalk/backbone-workshop
Backbone.ModelWhere JSON data is storedREST, Constructor, ManuallyData Change EventsWorks With: Collection, ViewMethods:se...
Backbone.Model
Backbone.Model - PRACTICEModel properties: defaults,Model Methods: initialize, set, get
Backbone.ViewA Controller for a DOM Element (wrapper)Renders Model/Collection to DOM (html)Delegates DOM EventsWorks With:...
Backbone.View
Backbone.View - PRACTICEView properties: events, tagName, className, render
_.Underscore.jsUtilities for Javascript (60)Collections, Arrays, Functions, Objects,Uses Browsers Implementation if possib...
_.Underscore.js
Backbone.CollectionCollection of ModelsREST, Constructor, ManuallyInherits Change Events from ModelsWorks With: Model, Vie...
Backbone.Collection
Backbone.Collection - PRACTICE
Backbone.RouterNavigation Handling (bookmarks)Listens to url change eventsNatively integrated to Back/ForwardEasy routing ...
Backbone.Router
Backbone.Router - PRACTICE
Questions?Backbone - http://documentcloud.github.com/backbone/Underscore - http://documentcloud.github.com/underscoreTikal...
Upcoming SlideShare
Loading in...5
×

Backbone.js introduction workshop

227

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
227
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Backbone.js introduction workshop

  1. 1. Backbone.jsIntroduction / Oren Farhi
  2. 2. Oren FarhiFront End Architect, JS Engineer @TikalJS Group Leader - Meet, Share, Contribute & CodingSpeaker (Israel & World Wide)Developing with:Pure Javascript, Backbone.js, Underscore.js, jQuery, CSS3github.com/tikalk@tikalk
  3. 3. We help companies build, deliver,deploy, manage and optimize their products.JAVA JS RoR.NETALM“Today we are SURE that we made the rightdecision, choosing Tikal”Guy Ben-Porat - Development Manager “ExLibris”
  4. 4. Tikal by Numbers“Actions speak louder than words”Tikals motto1600+CommunityMembers150+Blog PostsLast Year460+MeetupMembers100+ProjectsLast Year90+Tikal’sExperts Team12+Years old
  5. 5. The Past:JS is the wild westNo code conventionsjQuery bloated codeData & DOM mixedjQuery ajax & callbacks are abit messyNo ReuseMost End Result:words and sentences withlong selectors and "hanged"functions everywhere
  6. 6. The Present: All we have is nowSimplicityOrganizationFocus
  7. 7. Backbone BackgroundJeremy Ashkenas -Underscore, CoffeescriptDocumentCloudDependencies:jquery / zeptounderscore.jsjson2.js ( IE, other without JSON )
  8. 8. Backbone is:MVC library (MIT)StructureRESTful JSON connectorHash Routing EngineEvent DrivenExtendedModelEventsViewCollectionRouterUtilities - based underscore.jsTemplating Engine - based underscore.js
  9. 9. What is it good for?Linkedin Mobile, SoundCloud, Foursquar,Khan Academy, Airbnb, Rdio, HuluStructure for CodeSeparation of ConcernsModular, ExtensibleReusable ModulesLoose CouplingModel DrivenUnit Test ReadyM - Backbone.ModelV - _.templateC - Backbone.View / Router
  10. 10. This is a backbone.When used properlyIt keeps ones headOut of ones buttRand Macivor
  11. 11. What were going to do today:https://github.com/tikalk/backbone-workshop
  12. 12. Backbone.ModelWhere JSON data is storedREST, Constructor, ManuallyData Change EventsWorks With: Collection, ViewMethods:set - validategetescapeclearfetchsave (REST) - parsedestroy (REST)
  13. 13. Backbone.Model
  14. 14. Backbone.Model - PRACTICEModel properties: defaults,Model Methods: initialize, set, get
  15. 15. Backbone.ViewA Controller for a DOM Element (wrapper)Renders Model/Collection to DOM (html)Delegates DOM EventsWorks With: Model, CollectionCan use Any template engine to renderhtmlMethods:render (return this)makeremoveun/delegateEventsProperties:$ = $el.findel$eloptionsevents
  16. 16. Backbone.View
  17. 17. Backbone.View - PRACTICEView properties: events, tagName, className, render
  18. 18. _.Underscore.jsUtilities for Javascript (60)Collections, Arrays, Functions, Objects,Uses Browsers Implementation if possibleHigh ExpressivenessWorks With: Backbone, StandaloneMethods:Collections - each, map, filter, pluck,groupByArrays - without, uniqFunctions - bind, debounce,Object - keys, values, is-* (Empty, Date,String, Function etc..), hasUtility - template, escape, mixinChaining - chain, value
  19. 19. _.Underscore.js
  20. 20. Backbone.CollectionCollection of ModelsREST, Constructor, ManuallyInherits Change Events from ModelsWorks With: Model, ViewMany utilities methods from underscore.jsMethods:addremovelengthfetchsave (REST) - parsedestroy (REST)+ 28 Underscore methods:map, find, filter, sortBy, groupBy, pluck,invoke ...Properties:options
  21. 21. Backbone.Collection
  22. 22. Backbone.Collection - PRACTICE
  23. 23. Backbone.RouterNavigation Handling (bookmarks)Listens to url change eventsNatively integrated to Back/ForwardEasy routing handlingWorks With: Backbone.HistoryMethods:customnavigateroute (create)Properties:routes (key - value) - (route - handler)
  24. 24. Backbone.Router
  25. 25. Backbone.Router - PRACTICE
  26. 26. Questions?Backbone - http://documentcloud.github.com/backbone/Underscore - http://documentcloud.github.com/underscoreTikal - http://www.tikalk.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×