Tikal's Backbone_js introduction workshop


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

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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