Backbone - Introduction

slides from Tikal's "Introduction to Backbone.js" workshop held by myself (Oren Farhi)

Transcript

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, CSS3 github.com/tikalk @tikalk
3. We help companies build, deliver, deploy, manage and optimize their products. JAVA JS RoR .NET ALM “Today we are SURE that we made the right decision, choosing Tikal” Guy Ben-Porat - Development Manager “ExLibris”
4. Tikal by Numbers “Actions speak louder than words” Tikal's motto 1600+ Community Members 150+ Blog Posts Last Year 460+ Meetup Members 100+ Projects Last Year 90+ Tikal’s Experts Team 12+ Years old
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 Simplicity Organization Focus
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) Structure RESTful JSON connector Hash Routing Engine Event Driven Extended Model Events View Collection Router Utilities - based underscore.js Templating Engine - based underscore.js
9. What is it good for? Linkedin Mobile, SoundCloud, Foursquar, Khan Academy, Airbnb, Rdio, Hulu Structure for Code Separation of Concerns Modular, Extensible Reusable Modules Loose Coupling 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
12. Backbone.Model Where JSON data is stored REST, Constructor, Manually Data Change Events Works With: Collection, View Methods: set - validate get escape clear fetch save (REST) - parse destroy (REST)
13. Backbone.Model
14. Backbone.Model - PRACTICE Model properties: defaults, Model Methods: initialize, set, get
15. Backbone.View A Controller for a DOM Element (wrapper) Renders Model/Collection to DOM (html) Delegates DOM Events Works With: Model, Collection Can use Any template engine to render html Methods: render (return this) make remove un/delegateEvents Properties: $ = $el.find el $el options events
16. Backbone.View
17. Backbone.View - PRACTICE View properties: events, tagName, className, render
18. _.Underscore.js Utilities for Javascript (60) Collections, Arrays, Functions, Objects, Uses Browsers Implementation if possible High Expressiveness Works With: Backbone, Standalone Methods: Collections - each, map, filter, pluck, groupBy Arrays - without, uniq 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 REST, Constructor, Manually Inherits Change Events from Models Works With: Model, View Many utilities methods from underscore.js Methods: add remove length fetch save (REST) - parse destroy (REST) + 28 Underscore methods: map, find, filter, sortBy, groupBy, pluck, invoke ... Properties: options
21. Backbone.Collection
22. Backbone.Collection - PRACTICE
23. Backbone.Router Navigation Handling (bookmarks) Listens to url change events Natively integrated to Back/Forward Easy routing handling Works With: Backbone.History Methods: custom navigate route (create) Properties: routes (key - value) - (route - handler)
24. Backbone.Router
25. Backbone.Router - PRACTICE
26. Questions? Backbone - http://documentcloud.github.com/backbone/ Underscore - http://documentcloud.github.com/underscore Tikal - http://www.tikalk.com