Backbone.

JS

Training Session by 17th -19st May 2012

1 For Training Purpose Only

Contents

Objective Of The Training

Classic Web-App Model

Modern Web-App Model Hands-On Modules

For Training Purpose Only

Objective

Introducing Backbone Client Side MVC

Backbone Advance Concepts ( Routers, Hash Events etc)

End to end Application Development using Backbone and REST Organizing Applications using Require.js Optimizing Apps for Production using Require.js Optimizer Introducing Qunit for unit testing Introducing Jquery Jquery concepts ( Selectors, Wrapped Set Operations, Utility Functions, Plugin Dev) At the end of the training the participants would be able to write applications making use of Backbone, Jquery and Require.js

At the end of the training the participants would be required to develop a case study based on the concepts covered during the training

For Training Purpose Only

Classic Web-App Model (1/2)

Server

Client

Process Business Logic Manage Data (get, validate, create, etc.) Loading and Parsing Templates Sending Back (heavy) Results X Number of Clients

Send Request Load Content X1

For Training Purpose Only

Classic Web-App Model (2/2)

Server

Client

For Training Purpose Only

Analysis, Whats wrong?

Small scalability

Server is doing more than it should

Slow answer to user Unresponsive apps Client often still has unused (free) resources

For Training Purpose Only

Contents

Objective Of The Training

Classic Web-App Model

Modern Web-App Model Hands-On Modules

For Training Purpose Only

Modern Web-App Model (1/2)

Server

Client

Manage DB (Validate) Sending Back Pure Data (JSON)

Send Request Load Templates Load Data Process Business Logic Validate Data

For Training Purpose Only

Modern Web-App Model (2/2)

Server

Client

DB

For Training Purpose Only

Information Flow Model

Server provides template ( e.g. like) as an answer for the first request, and a JSON data to fill it

Server

When event is triggered, browser ask for JSON data (pureRESTful request

Browser

Server gives just JSON data

Because they fill template using JS, they can display data in a fancy way

For Training Purpose Only

10

What does Backbone Offer?

Implements Observer Pattern on its View

Full rest support

Support for Jquery or zepto for DOM manipulation Proxies underscore functions so that they can be directly used on collections Provides structure to your client side code

For Training Purpose Only

11

Comparative Analysis

Advantages
Combination of Backbone & Require.js can provide a solid architecture for your client side

Disadvantages
Learning Curve Increased Effort(billing hours) No Advanced Validation features

code
When used together they can provide significant No Widgets performance benefits enabling faster response times for the users. Automated handling of ajax requests Views are smart enough to handle changes to the models they display

12

12

Backbone.JS Views: Client-Side

For Training Purpose Only

13

Backbone.JS Views: Data Events

For Training Purpose Only

14

Contents

Objective Of The Training

Classic Web-App Model

Modern Web-App Model Hands-On Modules

For Training Purpose Only

15

For Training Purpose Only

16