Tikal's Backbone_js introduction workshop
3 likes836 views
The document is an introduction to Backbone.js by Oren Farhi, highlighting its features and the importance of the framework for web applications. It discusses Backbone's structure as an MVC library and its integration with other JavaScript libraries like Underscore.js, emphasizing modular, extensible code and the separation of concerns. The presentation covers various components of Backbone including models, views, collections, and routers, along with practical examples and links to resources.
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