Tikal's Backbone_js introduction workshop

1,310 views
1,214 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
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,310
On SlideShare
0
From Embeds
0
Number of Embeds
264
Actions
Shares
0
Downloads
33
Comments
0
Likes
3
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

×