Organized web app development using backbone.js

(ORGANIZED) WEB-APP DEVELOPMENT USING BACKBONE.JSSHAKTI SHRESTHA

shakti.shrestha@gmail.com

ABOUT ME

I work at Miracle Interface as Chief Technical Officer.Software ArchitectFocus on delivering applications with good

performance

ABOUT ME

A certified OCP in oracle 10g.a Programmer by heart.Also involved with ASPNETCOMMUNITY

AGENDAS

Problems facing with jQuery-only Application

SolutionBackboneBackbone :: ArchitectureTips

Problems facing with jQuery-only Application

Problems facing with jQuery-only application

Data is tightly coupled with DOMjQuery Callback is hellMostly get lost in forest of jQuery selectors

and callbacksScripts get scattered

Problem while debugging code

Problems facing with jQuery-only application

Data is tightly coupled with DOM

Problems facing with jQuery-only application…

Data is tightly coupled with DOM

Problems facing with jQuery-only application…

jQuery Callback is hell

Problems facing with jQuery-only application…

Mostly get lost in forest of jQuery selectors and callbacks

Problems facing with jQuery-only application…

Scripts get scatteredWe love bugs

While trying to debug a jQuery application, I drink lots of caffeine

Solution?

SOLUTION

Decoupling Data from UI

SOLUTION…

Abstractionabstraction is the process of separating ideas from

specific instances of those ideas at work. Wikipedia

We already know about it.Model/CollectionViews/TemplatesController/Router

SOLUTION…

Callback Management (Events) Data & UI can be updated. Action & application status

SOLUTION…

Code Management

SOLUTION…

JS frameworks/librariesAngularJsBackboneJsCanJsEmberJsMeteorJsExtJs

Backbone.js

BACKBONE.JS,

Its MV* structure

Backbone does not force you to use a single template engine. Views can bind to HTML constructed in your favorite way.

BACKBONE.JS

Can easily be used in existing application or in a component of existing application.

The focus is on supplying you with helpful methods to manipulate and query your data.

BACKBONE.JS

Synchronous events are used as the fundamental building block. And if you want a specific event to be asynchronous and

aggregated, no problem.

http://underscorejs.org/#debounce

Backbone scales well, from embedded widgets to massive apps.

BACKBONE.JS

Backbone is a library, not a framework, and plays well with others. Dojo D3 visualization Knockoutjs Meteorjs

"Two way data-binding" is avoided. Extension available.

BACKBONE.JS DEPENDS ON

Underscore.jsjQuery or ZeptoJson2.js

BACKBONE.JS IS BACKBONE OF

Well known apps https://trello.com/ https://delicious.com/ http://www.khanacademy.org/ & many more

Project Done by my team Eternal Message Cocolink-discussion

Startup project onTreat.com (WIP)

Backbone.js, components?

BACKBONE.JS :: COMPONENTS

Backbone.ModelBackbone.CollectionBackbone.ViewTemplate (Underscore.js)Router

MODEL

Presents dataThrows eventsReusableHandles persistence

MODEL :: COMMUNICATE

RESTfulFetch http GET /urlSave(New) http POST /urlSave http PUT/url/id

Destroy http DELETE /url/id

MODEL :: COMMUNICATE

For legacy web server without REST/HTTP.Then use Backbone.emulateHTTP = true

MODEL :: DEFINE

key field

URL to perform RESTful operation

MODEL :: USECreate object of Model

class

Set data in model

call the function to save it.

Model :: more…

http://backbonejs.org/#Model

Collection

List of modelsOnly used for pulling data from server.

Collection :: Define

Collection :: Use

Collection :: More…

http://backbonejs.org/#Collection

View

Dom manipulationDom event handlingUses model/collection

View :: Define html element where

the view will be rendered

View :: Define (with events)

Define events & trigger point

function that will be called when event is

triggered.

View :: Use

View :: more …

http://backbonejs.org/#View

Template

Default template engine is underscore.jsCan use other template engines,

MustacheHandlebarjQuery-tmpl

Template :: Define

Model’s attribute

(data field)

Template :: Define

compile

template

generate html

Routers

Maps hash url to functionNeed to enable backbone history

Backbone.history.start();

Routers :: Define

Without parameter

Routers :: Define

With parameter

Routers :: Use

Tips

TIPS

AMD Require.js, common.js

MVC structure http://marionettejs.com/ http://chaplinjs.org/

Model-view binding Stickit

Extensions, Plugins, resources https://github.com/jashkenas/backbone/wiki/Extensions%2C-Plugins%2C-Resources

Tuts https://github.com/jashkenas/backbone/wiki/Tutorials%2C-blog-posts-and-example-sites

REFERENCES

http://backbonejs.org/http://www.slideshare.net/nabeelahali/backbone-in

trohttp://www.slideshare.net/iloveigloo/clientside-mvc

-with-backbonejs

Questions

Thank you.

THANK YOU