• Like
  • Save
Introduction to Backbone - Workshop
Upcoming SlideShare
Loading in...5

Introduction to Backbone - Workshop



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



Total Views
Views on SlideShare
Embed Views



2 Embeds 17

http://www.linkedin.com 15
https://www.linkedin.com 2



Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Introduction to Backbone - Workshop Introduction to Backbone - Workshop Presentation Transcript

    • Backbone.jsIntroduction / Oren Farhi
    • 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
    • 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”
    • Tikal by Numbers“Actions speak louder than words”Tikals motto1600+CommunityMembers150+Blog PostsLast Year460+MeetupMembers100+ProjectsLast Year90+Tikal’sExperts Team12+Years old
    • 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
    • The Present: All we have is nowSimplicityOrganizationFocus
    • Backbone BackgroundJeremy Ashkenas -Underscore, CoffeescriptDocumentCloudDependencies:jquery / zeptounderscore.jsjson2.js ( IE, other without JSON )
    • Backbone is:MVC library (MIT)StructureRESTful JSON connectorHash Routing EngineEvent DrivenExtendedModelEventsViewCollectionRouterUtilities - based underscore.jsTemplating Engine - based underscore.js
    • 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
    • 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:set - validategetescapeclearfetchsave (REST) - parsedestroy (REST)
    • 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: Model, CollectionCan use Any template engine to renderhtmlMethods:render (return this)makeremoveun/delegateEventsProperties:$ = $el.findel$eloptionsevents
    • Backbone.View
    • Backbone.View - PRACTICEView properties: events, tagName, className, render
    • _.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
    • _.Underscore.js
    • 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
    • Backbone.Collection
    • Backbone.Collection - PRACTICE
    • 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)
    • Backbone.Router
    • Backbone.Router - PRACTICE
    • Questions?Backbone - http://documentcloud.github.com/backbone/Underscore - http://documentcloud.github.com/underscoreTikal - http://www.tikalk.com