Tikal's Backbone_js introduction workshop
•
3 likes•833 views
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.
More Related Content
What's hot
What's hot (20)
Similar to Tikal's Backbone_js introduction workshop
Similar to Tikal's Backbone_js introduction workshop (20)
More from Tikal Knowledge
More from Tikal Knowledge (20)
Recently uploaded
Recently uploaded (20)
Tikal's Backbone_js introduction workshop
- 1. Backbone.js Introduction / Oren Farhi
- 2. Oren Farhi Front End Architect, JS Engineer @Tikal JS Group Leader - Meet, Share, Contribute & Coding Speaker (Israel & World Wide) Developing with: Pure Javascript, Backbone.js, Underscore.js, jQuery, Common Sense, CSS3 github.com/tikalk @tikalk
- 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. Tikal by Numbers 1600+ 150+ 460+ Community Blog Posts Meetup Members Last Year Members 90+ 100+ 12+ Tikal’s Projects Years old Experts Team Last Year “Actions speak louder than words” Tikal's motto
- 5. The Past: JS is the wild west No code conventions jQuery bloated code Data & DOM mixed jQuery ajax & callbacks are a bit messy No Reuse Most End Result: words and sentences with long selectors and "hanged" functions everywhere
- 6. The Present: All we have is now JS is the wild west No code conventions jQuery bloated code Data & DOM mixed Simplicity jQuery ajax & callbacks are a bit messy No Reuse Organization Focus Most End Result: words and sentences with long selectors and "hanged" functions everywhere
- 7. Backbone Background Jeremy Ashkenas - Underscore, Coffeescript DocumentCloud Dependencies: jquery / zepto underscore.js json2.js ( IE, other without JSON )
- 8. Backbone is: MVC library (MIT) Model Project "DocumentCloud" Events Structure View RESTful JSON connector Collection Hash Routing Engine Router Event Driven Utilities - based underscore.js Extended Templating Engine - based underscore.js
- 9. What is it good for? Web Applications Modular, Extensible Structure for Code Reusable Modules Divide & Conquer Loose Coupling One Responsibility Concept Model Driven Unit Test Ready M - Backbone.Model V - _.template C - Backbone.View / Router
- 10. This is a backbone. When used properly It keeps one's head Out of one's butt Rand Macivor
- 11. What we're going to do today: https://github.com/tikalk/backbone-workshop/downloads
- 12. Backbone.Model Where JSON data is stored Methods: REST, Constructor, Manually set - validate Data Change Events get Works With: Collection, View escape clear fetch save (REST) - parse destroy (REST)
- 13. Backbone.Model
- 15. Backbone.View A Controller for a DOM Element (wrapper) Methods: Renders Model/Collection to DOM (html) render (return this) Delegates DOM Events make Works With: Model, Collection remove Can use Any template engine to render un/delegateEvents html Properties: $ = $el.find el $el options events
- 16. Backbone.View
- 18. _.Underscore.js Utilities for Javascript (60) Methods: Collections, Arrays, Functions, Objects, Collections - each, map, filter, pluck, Uses Browsers Implementation if possible groupBy High Expressiveness Arrays - without, uniq Works With: Backbone, Standalone Functions - bind, debounce, Object - keys, values, is-* (Empty, Date, String, Function etc..), has Utility - template, escape, mixin Chaining - chain, value
- 19. _.Underscore.js
- 20. Backbone.Collection Collection of Models Methods: REST, Constructor, Manually add Inherits Change Events from Models remove Works With: Model, View length Many utilities methods from underscore.js fetch save (REST) - parse destroy (REST) + 28 Underscore methods: map, find, filter, sortBy, groupBy, pluck, invoke ... Properties: options
- 23. Backbone.Router Navigation Handling (bookmarks) Methods: Listens to url change events custom Natively integrated to Back/Forward navigate Easy routing handling route (create) Works With: Backbone.History Properties: routes (key - value) - (route - handler)
- 24. Backbone.Router
- 26. Questions? Backbone - http://documentcloud.github.com/backbone/ Underscore - http://documentcloud.github.com/underscore Tikal - http://www.tikalk.com