Scribd
Upload
58 views17 pages

Create MVC Application Using Backbone JS: Presenter: Padmalochan, Mindfire Solutions Date: 14/04/2014

The document discusses creating an MVC application using Backbone.js. It outlines the agenda which includes why to use Backbone, its basics, preparing server-side code, getting data efficiently, adding views, templating, and creating an app from scratch. It then covers single page applications, Backbone architecture including models, collections and views, templating with Underscore, and demonstrates an example app.

Uploaded by

ascii02
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
58 views17 pages

Create MVC Application Using Backbone JS: Presenter: Padmalochan, Mindfire Solutions Date: 14/04/2014

The document discusses creating an MVC application using Backbone.js. It outlines the agenda which includes why to use Backbone, its basics, preparing server-side code, getting data efficiently, adding views, templating, and creating an app from scratch. It then covers single page applications, Backbone architecture including models, collections and views, templating with Underscore, and demonstrates an example app.

Uploaded by

ascii02
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

Create MVC application

using Backbone js
Presenter: Padmalochan, Mindfire Solutions
Date: 14/04/2014
Agenda
Why should we use backbone.

Quick review about basics of Backbone.

Preparing server side code.

Getting data efficiently.

Foundation and adding a view.

Client-Side Templating.

Creating app from Scratch.

Presenter: Padmalochan, Mindfire Solutions


SPA

Single Page Applications.

No round tripping

Loads all of resources at one go.

Its a concept not proper defination.

Rich user experience.

Net latency is reduced.

Performance is increased.

Presenter: Padmalochan, Mindfire Solutions


SPA Challenges

Search Engine Optimization.

Lack of tooling and experience.

Working with different browser

Presenter: Padmalochan, Mindfire Solutions


Prerequisites

Basics of Javascript.

HTML,CSS,Web programming knowledge.

JQuery.

FireBug,WebKit.

Required Dependencies

Underscore.

Jquery/Zepto.

Presenter: Padmalochan, Mindfire Solutions


What is Backbone js ?
Backbone.js gives structure to web applications
by providing Models with key-value binding and
custom events,Collections with a rich API of
enumerable functions,Views with declarative
event handling, and connects it all to your
existing API over a RESTful JSON interface.

http://backbonejs.org/

Presenter: Padmalochan, Mindfire Solutions


Why to use Backbone

It encourages you to abstract your data into models and


your DOM manipulation into views and bind the two
together using events.

Need to Build complex UI in Browser.

No More jQuery,no need to store data in DOM, store


data in models instead event binding just works.

If what you plan to build is something where the UI


regularly changes how it displays but does not go to the
server to get entire new pages then you probably need
something like Backbone.js.

Provides a structure into client side application

Presenter: Padmalochan, Mindfire Solutions


Before and After effects of Backbone

Presenter: Padmalochan, Mindfire Solutions


Architecture
1. Routers
2. Models
3. Collection
4. Views

Pros : Cons:
1. Fast 1. SEO problem (can't
2. Highly Interactive. index)
2. Difficult to test
3. Scalable
3. Security issues.
Presenter: Padmalochan, Mindfire Solutions
Models

Models are the heart of any JavaScript application, containing the


interactive data as well as a large part of the logic surrounding it:
conversions, validations, computed properties, and access control.

Communicate to View through events.

Provide LifeCycle.

Read attribute with get method and write with set method.

Validation Validate & isValid

Model Identity

Defaults,initialize.

Backbone.Model vs Backbone.Model.extend

Model have save,fetch and destroy methods for synchronizing with the
server

Presenter: Padmalochan, Mindfire Solutions


Collection

Collections group of related model.

Fetch model from server.

Create them and save them back.

Array like object.

Presenter: Padmalochan, Mindfire Solutions


Views

The general idea is to organize your interface into logical views,


backed by models, each of which can be updated independently when
the model changes, without having to redraw the page

Handles Model events as well as DOM events.

All views have associated el property.

$el is a Jquery wrapper.

Every view maps to exact one DOM element

Render the UI as you see fit.

Declarative syntax to register handlers for DOM elements.

Presenter: Padmalochan, Mindfire Solutions


Templating

Underscore.js Template.

Client-side templatating.Templating happens in views render method.

Dynamically build markup from template and some data.

Backbone doesn't have its own templating engine.

Underscore Templates

<%.... %> - execute arbitary code.

<% ...%> - evaluate an expression and render in result inline.

<% ...%> - evaluate an expression and render html escaped in result inline.

Presenter: Padmalochan, Mindfire Solutions


Demo

Presenter: Padmalochan, Mindfire Solutions


Question and
Answer

Presenter: Padmalochan, Mindfire Solutions


Thank you

Presenter: Padmalochan, Mindfire Solutions


www.mindfiresolutions.com

https://www.facebook.com/MindfireSolutions

http://www.linkedin.com/company/mindfire-solutions

http://twitter.com/mindfires

You might also like