Backbonejs for beginners

28
Backbone.js -Divakar Gujjal

description

Backbonejs ppt for beginners

Transcript of Backbonejs for beginners

Page 1: Backbonejs for beginners

Backbone.js

-Divakar Gujjala

Page 2: Backbonejs for beginners

Topics

Overview

Models & Collections

Views & Templates

Routers

Events

Page 3: Backbonejs for beginners

History1995: JavaScript 2000: XMLHttpRequest

2006: jQuery 2010: Backbonejs

Page 4: Backbonejs for beginners

Overview

What?

Why?

Who?

Dependencies

Page 5: Backbonejs for beginners

What

Client side MVC fashion framework

Backbone.js was created by Jeremy Ashkenas,

author of the CoffeScript in 2010 (Oct 13th).

MIT licensed and on GitHub

RESTful JSON connector

Hash-Routing Engine

DOM AccessorAnimation toolkitControl suitAll in wonder package

Is notIs

Page 6: Backbonejs for beginners

Why

StructureReuseSeparation of Roles of concernsFlexibleLightweight (6.9kb)ModularPerfect OOP designCommunity

Page 7: Backbonejs for beginners

MV* Frameworks

Page 8: Backbonejs for beginners

Who uses Backbone.js?

Page 9: Backbonejs for beginners

What should I know?

Jquery

HTML

Template Engine (_, Mustage.js, Handlebars.js)

Json2.js (IE, other without json)

Page 10: Backbonejs for beginners

MVC Backbone.js

Page 11: Backbonejs for beginners

Architecture

REST APIROUTER

VIEW

MODELBROWSERAPP SERVER & DATABASE

Page 12: Backbonejs for beginners

Modules

Views

Events

Models

Collections

Routers

Page 13: Backbonejs for beginners

Events

A mixin which allows to dispatch events and register callbacks

Backbone's key feature, included by Model, Collection, View and History

Methods: on, off, trigger

Page 14: Backbonejs for beginners

REST

Page 15: Backbonejs for beginners

REST in Backbone.js

var PostModel = Backbone.Model.extend({ // Override id attribute. idAttribute: '_id', // Define URL root to access model resource. Otherwise use // url() method to provide full path to the model resource. urlRoot: function() { return 'http://example.com/posts/'; }});

var PostCollection = Backbone.Collection.extend({ model: PostModel, // Define path to the collection resource. url: function() { return 'http://example.com/posts/'; }});

Page 16: Backbonejs for beginners

REST in Backbone.js// Fetches data into a model.model.fetch();

// Saves a model.model.save();

// Destroys a model.model.destroy();

// Fetches data into a collection.collection.fetch();

// Adds models to a collection.collection.add(models);

// Removes specific models from collection.collection.remove(models);

Page 17: Backbonejs for beginners

Model Data storage and business logic

Key feature: the attributes hash

Changes on the attributes will fire change events

Models may be retrieved from and saved to a data

storage

Standard sync uses RESTful HTTP

Validation constraints

Methods• extend• constructor / initialize• get• set• escape• has• unset• clear• id• idAttribute• cid• attributes• changed• defaults• toJSON• sync• fetch• save• destroy• Underscore Methods (6)• validate• validationError• isValid• url• urlRoot• parse• clone• isNew• hasChanged• changedAttributes• previous• previousAttributes

Page 18: Backbonejs for beginners

Model

var Sidebar = Backbone.Model.extend({ promptColor: function() { var cssColor = prompt("Please enter a CSS color:"); this.set({color: cssColor}); }});

window.sidebar = new Sidebar;

sidebar.on('change:color', function(model, color) { $('#sidebar').css({background: color});});

sidebar.set({color: 'white'});

sidebar.promptColor();

Page 19: Backbonejs for beginners

Model

var Employee = Backbone.Model.extend({ defaults: { name: 'Divakar', location: ‘Location2', favoriteColor: 'blue', }}); var divakar = new Employee({ id: 1, name: 'Divakar', location:'Location2', favoriteColor: 'blue' });

var sudhakar = new Employee({ id: 2, name: 'Sudhakar', location: 'SEZ - Uppal', favoriteColor: 'green' });

var prabhakar = new Employee({ id: 3, name: 'Prabhakar', location: 'SEZ - Chennai', favoriteColor: 'red' });

Page 20: Backbonejs for beginners

Collections

A list of models

Fires add, remove and reset events

Implements underscore list helpers

Methods• extend• model• constructor / initialize• models• toJSON• sync• Underscore Methods (28)• add• remove• reset• set• get• at• push• pop• unshift• shift• slice• length• comparator• sort• pluck• where• findWhere• url• parse• clone• fetch• create

Page 21: Backbonejs for beginners

Viewvar DocumentRow = Backbone.View.extend({ tagName: "li",

className: "document-row",

events: { "click .icon": "open", "click .button.edit": "openEditDialog", "click .button.delete": "destroy" },

initialize: function() { this.listenTo(this.model, "change", this.render); }, render: function() { ... }});

Page 22: Backbonejs for beginners

Collections

var Library = Backbone.Collection.extend({ model: Book});

var Library = Backbone.Collection.extend({ model: function(attrs, options) { if (condition) { return new PublicDocument(attrs, options); } else { return new PrivateDocument(attrs, options); } }});

Page 23: Backbonejs for beginners

View

A view owns a DOM element

Knows about its model or collection

Handles DOM events (user input)

Observes model events (binding)

Invokes model methods

Methods• extend• constructor / initialize• el• $el• setElement• attributes• $ (jQuery)• template• render• remove• delegateEvents• undelegateEvents

Page 24: Backbonejs for beginners

Router

A Router maps URIs to its methods

History is the actual workhorse, observe URI changes and fires callbacks

Hash URIs (location.hash, hashchange) or HTML5 History (pushState or popState )

Route usually creates models and views

Methods• extend• routes• constructor / initialize• route• navigate• execute

Page 25: Backbonejs for beginners

Router

var Workspace = Backbone.Router.extend({

routes: { "help": "help", // #help "search/:query": "search", // #search/kiwis "search/:query/p:page": "search" // #search/kiwis/p7 },

help: function() { ... },

search: function(query, page) { ... }});

Page 26: Backbonejs for beginners

Templates (Underscore.js) Javascript Utility Library

Fills in holes in the language

Provides functional support

Makes you happier writing javascript

MethodsCollections - each, map, filter, pluck, groupBy

Arrays - without, uniq

Functions - bind, debounce

Object - keys, values, is-*(Empty, Date, Function etc...), has

Utility - template, escape, mixin

Chaining - chain, value

Page 27: Backbonejs for beginners

Underscore.js

<script type="text/template" id=“employee-list-template"><table> <thead> <tr> <th>Name</th> <th>Location</th> <th>Favorite Color</th> </tr> </thead> <tbody> <% _.each(employees, function(employee) { %> <tr> <td><%= employee.get('name') %></td> <td><%= employee.get(‘location') %></td> <td><%= employee.get('favoriteColor') %></td> </tr> <% }); %> </tbody></table></script>

Page 28: Backbonejs for beginners

References

Backbone.JS http://backbonejs.org

Underscore.JS http://underscorejs.org

Developing Backbone.js Applications http://addyosmani.github.io/backbone-fundamentals/