Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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.ALM      JAVA              JS        ...
Tikal by Numbers  1600+         150+         460+Community    Blog Posts     Meetup Members     Last Year     Members     ...
The Past:JS is the wild westNo code conventionsjQuery bloated codeData & DOM mixedjQuery ajax & callbacks are abit messyNo...
The Present: All we have is nowJS is the wild westNo code conventionsjQuery bloated codeData & DOM mixed                 S...
Backbone BackgroundJeremy Ashkenas -Underscore, CoffeescriptDocumentCloudDependencies:jquery / zeptounderscore.jsjson2.js ...
Backbone is:MVC library (MIT)         ModelProject "DocumentCloud"   EventsStructure                 ViewRESTful JSON conn...
What is it good for?Web Applications             Modular, ExtensibleStructure for Code           Reusable ModulesDivide & ...
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/downloads
Backbone.ModelWhere JSON data is stored      Methods:REST, Constructor, Manually    set - validateData Change Events      ...
Backbone.Model
Backbone.Model - PRACTICE
Backbone.ViewA Controller for a DOM Element (wrapper)   Methods:Renders Model/Collection to DOM (html)     render (return ...
Backbone.View
Backbone.View - PRACTICE
_.Underscore.jsUtilities for Javascript (60)              Methods:Collections, Arrays, Functions, Objects,   Collections -...
_.Underscore.js
Backbone.CollectionCollection of Models                        Methods:REST, Constructor, Manually                 addInhe...
Backbone.Collection
Backbone.Collection - PRACTICE
Backbone.RouterNavigation Handling (bookmarks)       Methods:Listens to url change events          customNatively integrat...
Backbone.Router
Backbone.Router - PRACTICE
Questions?Backbone - http://documentcloud.github.com/backbone/Underscore - http://documentcloud.github.com/underscoreTikal...
Upcoming SlideShare
Loading in …5
×

Tikal's Backbone_js introduction workshop

1,426 views

Published on

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.

Published in: Technology
  • Be the first to comment

Tikal's 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,Common Sense, CSS3github.com/tikalk@tikalk
  3. 3. We help companies build, deliver, deploy, manage and optimize their products.ALM JAVA JS .NET RoR“Today we are SURE that we made the right decision, choosing Tikal” Guy Ben-Porat - Development Manager “ExLibris”
  4. 4. Tikal by Numbers 1600+ 150+ 460+Community Blog Posts Meetup Members Last Year Members 90+ 100+ 12+ Tikal’s ProjectsYears old Experts Team Last Year “Actions speak louder than words” Tikals motto
  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 nowJS is the wild westNo code conventionsjQuery bloated codeData & DOM mixed SimplicityjQuery ajax & callbacks are abit messyNo Reuse Organization FocusMost End Result:words and sentences withlong selectors and "hanged"functions everywhere
  7. 7. Backbone BackgroundJeremy Ashkenas -Underscore, CoffeescriptDocumentCloudDependencies:jquery / zeptounderscore.jsjson2.js ( IE, other without JSON )
  8. 8. Backbone is:MVC library (MIT) ModelProject "DocumentCloud" EventsStructure ViewRESTful JSON connector CollectionHash Routing Engine RouterEvent Driven Utilities - based underscore.jsExtended Templating Engine - based underscore.js
  9. 9. What is it good for?Web Applications Modular, ExtensibleStructure for Code Reusable ModulesDivide & Conquer Loose CouplingOne Responsibility Concept Model Driven Unit Test Ready M - Backbone.Model V - _.template C - 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/downloads
  12. 12. Backbone.ModelWhere JSON data is stored Methods:REST, Constructor, Manually set - validateData Change Events getWorks With: Collection, View escape clear fetch save (REST) - parse destroy (REST)
  13. 13. Backbone.Model
  14. 14. Backbone.Model - PRACTICE
  15. 15. Backbone.ViewA Controller for a DOM Element (wrapper) Methods:Renders Model/Collection to DOM (html) render (return this)Delegates DOM Events makeWorks With: Model, Collection removeCan use Any template engine to render un/delegateEventshtml Properties: $ = $el.find el $el options events
  16. 16. Backbone.View
  17. 17. Backbone.View - PRACTICE
  18. 18. _.Underscore.jsUtilities for Javascript (60) Methods:Collections, Arrays, Functions, Objects, Collections - each, map, filter, pluck,Uses Browsers Implementation if possible groupByHigh Expressiveness Arrays - without, uniqWorks With: Backbone, Standalone Functions - bind, debounce, Object - keys, values, is-* (Empty, Date, String, Function etc..), has Utility - template, escape, mixin Chaining - chain, value
  19. 19. _.Underscore.js
  20. 20. Backbone.CollectionCollection of Models Methods:REST, Constructor, Manually addInherits Change Events from Models removeWorks With: Model, View lengthMany utilities methods from underscore.js fetch save (REST) - parse destroy (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) Methods:Listens to url change events customNatively integrated to Back/Forward navigateEasy routing handling route (create)Works With: Backbone.History 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

×