INTRODUCTION TO BACKBONE JS

- Mohammed Saqib

AGENDA

2

Problems with JSWhat is Backbone JSModel –View - PresenterSingle Page ApplicationWhy BackboneQuick FactsReal time applications using Backbone JSSummaryReferences

PROBLEM WITH JAVASCRIPT APPLICATION

Web application that involves a lot of JavaScript applications end up as tangled piles of JQuery selectors and callbacks.

Hard to keep data in sync between the HTML UI, JavaScript logic & the database.

Pile of spaghetti code - code that is disorganized and difficult to follow.

Unstructured approach

3

JAVASCIRPT IS VERY POPULAR

WHAT IS BACKBONE JS

Backbone JS is JavaScript library of components with a RESTful JSON interface and is based on the model–view–presenter (MVP) application design paradigm.

Very lightweight, as its only dependency is on one JavaScript library, Underscore.js

Underscore is a JavaScript library which provides utility functions for common JavaScript tasks.

It is designed for developing single-page web applications and for keeping various parts of web applications (e.g. multiple clients and the server) synchronized.

Backbone JS is a framework?

Backbone is library not a framework.

Framework and library are the code written by some one else. This code give us a functionality.

In framework we change the structure of our code according to the rules given by them. In order to use the functionality provided by them.

In library we can use the functionality directly without changing our code.

Frameworks need configuration, usually a HTML.

Libraries have pre built functions ready to use. E.g. Jquery.

Example:– Libraries: knockout JS, Backbone JS

– Frameworks: Angular JS, Ember JS.

6

Backbone Organizes the code

Creates clean and efficient code.

Based on Model-View-Controller.

Backbone Components:

– Models

– View

– Collections

– Events

– Router

7

Model-view-presenter (MVP) is a derivative of the MVC design pattern which focuses on improving presentation logic.

Presenter component contains the user interface business logic for the view.

The presenter acts as a mediator which talks to both the view and model, however both of these are isolated from each other.

Make it very easy to handle complex views and user interaction where MVC may not fit the bill.

Simplify maintenance greatly .

MVP

Single Page Application

Also known as Single Page Interface(SPI).

Provides a fluid user experience similar to a desktop application.

Navigation is performed by changing the state.

In SPA all the necessary codes like HTML, CSS and JavaScript are retrieved in a single page load; or resources are loaded on demand without reloading the page at any time.

the web page is constructed by loading chunks of HTML fragments

Why SPA?

Capable of decreasing subsequent load time of pages by storing the functionality once it is loaded the first time.

Achieve a complex user interface with minimal communication to server.

To build very interactive and data driven dashboards and also build Event driven application.

9

WHY BACKBONE JS

Highly customizable.

Minimalistic library has very small footprint. (6.5kb)

Modularity and Reusability.

Designed more towards consuming RESTful web service.

Very easy to implement complex user interaction.

Free to use any JavaScript template engine.

Vibrant community of plugin and extension authors.

QUICK FAQ

Does it replace jQuery?

• NO

• Complementary in their scopes with almost no overlaps in functionality

• Backbone handles all the higher level abstractions, while jQuery – or similar libraries –work with the DOM, normalize events and so on

Where can I use

• Ideally suited for creating front end with heavy data driven applications

• Scales well, from embedded widgets to massive apps

• Think Gmail

can still use other libraries

• Absolutely.

• Typical DOM accessing, AJAX wrapping.

• The templates and script loading libraries.

• It's very, very loosely coupled, which means you can use almost all of your tools in conjunction with Backbone.

Has a steep learning curve.

As the code grows the application becomes difficult to manage, its

always better to use helper libraries to modularize the application.

(e.g. marionettejs, chaplinejs, layoutmanager etc)

Ineffective view management might lead to zombies views and

duplicate events

Nested collection and Nested model structure is difficult to manage

Backbone js is built for restful services which makes it troublesome

while dealing with soap and regular html responses.

14

CHALLENGES FACED

Real world Backbone.js Applications

USA Today

Takes advantage of themodularity of Backbone'sdata/model lifecycle —which makes it simple to

- create

- Inherit

-isolate

- link application objects to keep the codebase both manageable and efficient.

Website also makesheavy use of theBackbone Router tocontrol the page for bothpushState-capable andlegacy browsers.

LinkedIn Mobile

Backbone made it easy to keepthe app modular, organized andextensible in order to improveLinkedIn's user experience.

Views are rendered usingunderscore templates.

Backbone models / collections –To store the JSON data receivedfrom the server.

It uses RESTful API requestthrough Backbone.Sync - to reador save a model to the server.

Wal-Mart Mobile

To create the new version of their mobile web application.

Uses Backbone.js as core library of their mobile shopping cart.

created two new extension frameworks in the process - Thorax and Lumbar.

Airbnb

It started with AirbnbMobile Web and has since grown to :– Wish Lists

– Match

– Search

– Communities

– Payments

– Internal Tools

Airbnb uses Backbone.js to let users and search engines browse available travel accommodations.

SUMMARY

Limitations with plane JavaScript.

What and Why of Backbone JS.

Brief description about MVP and SPA.

Frequently asked Queries and Clarifications.

Big companies who use Backbone JS.

Backbone has many operations and options and isalways evolving, so be sure to visit the official websiteand documentation for more details and the latestfeatures.

20

21

Please, please, please !!!

A hammer is an excellent tool, but it’s not used for everything !!!

References

• http://backbonejs.org

• http://underscorejs.org

• http://addyosmani.github.io/backbone-fundamentals/

• http://www.pluralsight.com/training/Courses/Find?highlight=true&searchTerm=ba

ckbone

• http://backbonetutorials.com/

• http://www.codebeerstartups.com/2012/12/introduction-to-backbone-js-and-

setting-up-an-working-environment/

• http://code.tutsplus.com/tutorials/getting-started-with-backbonejs--net-19751

• https://www.youtube.com/watch?v=FZSjvWtUxYk

• http://coenraets.org/blog/2011/12/backbone-js-wine-cellar-tutorial-part-1-getting-started/

QUESTIONS

ThankYou

Bangalore Backbone JS

Hackers

24