Your SlideShare is downloading. ×
0
Introduction to Backbone - Workshop
Introduction to Backbone - Workshop
Introduction to Backbone - Workshop
Introduction to Backbone - Workshop
Introduction to Backbone - Workshop
Introduction to Backbone - Workshop
Introduction to Backbone - Workshop
Introduction to Backbone - Workshop
Introduction to Backbone - Workshop
Introduction to Backbone - Workshop
Introduction to Backbone - Workshop
Introduction to Backbone - Workshop
Introduction to Backbone - Workshop
Introduction to Backbone - Workshop
Introduction to Backbone - Workshop
Introduction to Backbone - Workshop
Introduction to Backbone - Workshop
Introduction to Backbone - Workshop
Introduction to Backbone - Workshop
Introduction to Backbone - Workshop
Introduction to Backbone - Workshop
Introduction to Backbone - Workshop
Introduction to Backbone - Workshop
Introduction to Backbone - Workshop
Introduction to Backbone - Workshop
Introduction to Backbone - Workshop
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction to Backbone - Workshop

844

Published on

This is the presentation from Tikal's "Introduction to Backbone - Workshop" I gave at http://www.tikalk.com

This is the presentation from Tikal's "Introduction to Backbone - Workshop" I gave at http://www.tikalk.com

Published in: Education, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Backbone.jsIntroduction / Oren Farhi
  • 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. 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. Tikal by Numbers“Actions speak louder than words”Tikals motto1600+CommunityMembers150+Blog PostsLast Year460+MeetupMembers100+ProjectsLast Year90+Tikal’sExperts Team12+Years old
  • 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. The Present: All we have is nowSimplicityOrganizationFocus
  • 7. Backbone BackgroundJeremy Ashkenas -Underscore, CoffeescriptDocumentCloudDependencies:jquery / zeptounderscore.jsjson2.js ( IE, other without JSON )
  • 8. Backbone is:MVC library (MIT)StructureRESTful JSON connectorHash Routing EngineEvent DrivenExtendedModelEventsViewCollectionRouterUtilities - based underscore.jsTemplating Engine - based underscore.js
  • 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. This is a backbone.When used properlyIt keeps ones headOut of ones buttRand Macivor
  • 11. What were going to do today:https://github.com/tikalk/backbone-workshop
  • 12. Backbone.ModelWhere JSON data is storedREST, Constructor, ManuallyData Change EventsWorks With: Collection, ViewMethods:set - validategetescapeclearfetchsave (REST) - parsedestroy (REST)
  • 13. Backbone.Model
  • 14. Backbone.Model - PRACTICEModel properties: defaults,Model Methods: initialize, set, get
  • 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. Backbone.View
  • 17. Backbone.View - PRACTICEView properties: events, tagName, className, render
  • 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. _.Underscore.js
  • 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. Backbone.Collection
  • 22. Backbone.Collection - PRACTICE
  • 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. Backbone.Router
  • 25. Backbone.Router - PRACTICE
  • 26. Questions?Backbone - http://documentcloud.github.com/backbone/Underscore - http://documentcloud.github.com/underscoreTikal - http://www.tikalk.com

×