Backbone 4.0
0 likes57 views
This document provides an overview and plan for a 2-day training on Backbone.js. Day 1 will cover JavaScript concepts, jQuery, Underscore.js and the basic elements of Backbone. Day 2 will include examples using Backbone for local storage and persistence, as well as Boilerplate and RequireJS. The goal is for participants to understand the necessity of MV* frameworks and Backbone's basic elements. Resources and a practice site are provided.
![JS OOP Basics -Arrays
● Array.prototype
var empty = [];
var numbers = ['one', 'two'];
console.log(empty.length);
console.log(numbers.length);](https://image.slidesharecdn.com/backbone4-190322163234/85/Backbone-4-0-18-320.jpg)
![Underscore.js
● forEach - iterate over collections
● sortBy() - sort a collection on a specific attribute
● map() - iterate through a collection, mapping each value through a
transformation function
● pluck() - extract a specific attribute
● size() - return the size of a collection
● isEmpty()- determine whether a collection is empty
● groupBy()- group a collection into groups of like items
● pick() - extract a set of attributes from a model
● omit() - extract all attributes from a model except those listed
● keys() and values() - get lists of attribute names and values
● pairs() - get list of attributes as [key, value] pairs
●
http://jsfiddle.net/kbalavignesh/ujq80qm3/20/](https://image.slidesharecdn.com/backbone4-190322163234/85/Backbone-4-0-19-320.jpg)
Backbone 4.0
- 2. Introduction What? Backbone.js Why? Web Applications Demand Whom? Beginners to Intermediate *Beginners => Basic JS + Jquery
- 3. Plan Day 1: 1.5 hrs JS concepts + Jquery + Underscore library 1.5 hrs Basic Elements of Backbone Day 2: 1 hr Example with Backbone - Local Storage 1 hr Example with Backbone - Persistance 1 hr Boilerplate, RequireJS
- 4. Goal Understading the necessity of MV* Framework Understanding the basic elements of Backbone Overview on designing web app with backbone Sharing experience / knowledge
- 5. Resources / Books ● http://backbonejs.org/ ● http://addyosmani.github.io/backbone-fundame ntals/ ● Javascript The Good Parts – Douglas Crockford ● https://developer.mozilla.org/en/Learn/JavaScr ipt
- 6. Practice http://jsfiddle.net/ ● jquery 2.1.0 ● https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.min.js ● https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore- min.js ● https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js
- 7. Backbone.js ● Author - Jeremy Ashkenas ● Stable Release - 1.1.2 ● License - MIT ● http://backbonejs.org/ ● Dependency Underscore.js -> http://underscorejs.org/
- 9. Testimonials ● Digg ● LinkedIn Mobile ● Bit Torrent ● Wordpress ● Documentcloud
- 10. MVC -Design Pattern Image Source - http://addyosmani.github.io/backbone-fundamentals/
- 11. JS OOP Basics- DataTypes ● Numbers, ● Strings, ● Booleans, ● null, ● undefined ● Objects ( arrays, functions, regex, objects)
- 12. JS OOP Basics - Object ● Objects in JavaScript are class-free. ● Prototypal programing language ● http://jsfiddle.net/kbalavignesh/4m8kc6gv/
- 13. JS OOP Basics -Reference ● Objects are passed around by reference. They are never copied. ● http://jsfiddle.net/kbalavignesh/d5g5k0tL/
- 14. JS OOP Basics- Prototype ● Object.prototype - an object that comes standard with JavaScript. ● http://jsfiddle.net/kbalavignesh/rp68Ln5s/ ● Delegation
- 15. JS OOP Basics - Global abatement ● http://jsfiddle.net/kbalavignesh/s6njz5wz/
- 16. JS OOP Basics - Functions ● Functions in JavaScript are objects. ● Function objects are linked to Function.prototype (which is itself linked to Object.prototype ). ● http://jsfiddle.net/kbalavignesh/a92f3aos/
- 17. JS OOP Basics -Closure ● A closure is a function having access to the parent scope, even after the parent function has closed. ● http://jsfiddle.net/kbalavignesh/xq5qmz9n/
- 18. JS OOP Basics -Arrays ● Array.prototype var empty = []; var numbers = ['one', 'two']; console.log(empty.length); console.log(numbers.length);
- 19. Underscore.js ● forEach - iterate over collections ● sortBy() - sort a collection on a specific attribute ● map() - iterate through a collection, mapping each value through a transformation function ● pluck() - extract a specific attribute ● size() - return the size of a collection ● isEmpty()- determine whether a collection is empty ● groupBy()- group a collection into groups of like items ● pick() - extract a set of attributes from a model ● omit() - extract all attributes from a model except those listed ● keys() and values() - get lists of attribute names and values ● pairs() - get list of attributes as [key, value] pairs ● http://jsfiddle.net/kbalavignesh/ujq80qm3/20/
- 20. Underscore -Micro Template ● pre compiled templates ● other template engines Mustache, jQuery-tmpl ● how to select - http://garann.github.io/template-chooser/ ● http://www.2ality.com/2012/06/underscore-templates.html ● http://stackoverflow.com/questions/13536262/what-is-javascript-template- precompiling
- 21. Backbone Basic Elements ● Model ● Collections ● View ● Router ● Events
- 22. Model ● Holds the attributes ● Takes care of Validation ● Persistance ● Announces updates ● id, idAttribute, cid ● Default, set, get values - https://jsfiddle.net/kbalavignesh/ujq80qm3/9/ ● Change Event - https://jsfiddle.net/kbalavignesh/ujq80qm3/10/ ● Validation - http://jsfiddle.net/kbalavignesh/ujq80qm3/11/ ● Complete Validation - http://jsfiddle.net/kbalavignesh/ujq80qm3/12/
- 23. Collection ● Holds models ● Announces add/remove/reset/update model ● Collection - http://jsfiddle.net/kbalavignesh/ujq80qm3/13/ ● Collection get by id - http://jsfiddle.net/kbalavignesh/ujq80qm3/14/ ● Collection events - http://jsfiddle.net/kbalavignesh/ujq80qm3/15/ ● Collection with underscore functions - http://jsfiddle.net/kbalavignesh/ujq80qm3/16/ ● Collection sort functions - http://jsfiddle.net/kbalavignesh/ujq80qm3/17/
- 24. Persistance ● Collection.fetch() => HTTP GET ● Model.save() => HTTP PUT (for existing model) ● Model.save() => HTTP POST (for new model) ● Model.destroy() => HTTP DELETE ● model.save(attrs, {patch: true}) => HTTP PATCH
- 25. Event ● Event within object - http://jsfiddle.net/kbalavignesh/ujq80qm3/18/ ● Event across objects - http://jsfiddle.net/kbalavignesh/ujq80qm3/19/
- 26. View ● Logic to present model ● el - el is basically a reference to a DOM element and all views must have one
- 27. Router & History ● Bookmark ● To Share the link ● To enable backbutton http://backbonetutorials.com/what-is-a-router/#/route/action
- 28. Local Storage - HTML5 ● Local storage within browser ● Alternative to cookies ● Can save atleast 5MB ● Stored per domain localStorage.setItem("name", "Bala"); localStorage.getItem("name"); localStorage.removeItem("name"); http://www.w3schools.com/html/html5_webstorage.asp
- 29. TODO List - Example ● Demo - http://backbonejs.org/examples/todos/ ● ToDo Examples for all Framework - http://todomvc.com/ ● Explanation - http://backbonejs.org/docs/todos.html