introduction to backbone_js
TRANSCRIPT
![Page 1: Introduction to backbone_js](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a791bb1a28ab29478b47f1/html5/thumbnails/1.jpg)
INTRODUCTION TO BACKBONE JS
- Mohammed Saqib
![Page 2: Introduction to backbone_js](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a791bb1a28ab29478b47f1/html5/thumbnails/2.jpg)
AGENDA
2
Problems with JSWhat is Backbone JSModel –View - PresenterSingle Page ApplicationWhy BackboneQuick FactsReal time applications using Backbone JSSummaryReferences
![Page 3: Introduction to backbone_js](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a791bb1a28ab29478b47f1/html5/thumbnails/3.jpg)
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
![Page 4: Introduction to backbone_js](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a791bb1a28ab29478b47f1/html5/thumbnails/4.jpg)
WHAT IS BACKBONE JS
![Page 5: Introduction to backbone_js](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a791bb1a28ab29478b47f1/html5/thumbnails/5.jpg)
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.
![Page 6: Introduction to backbone_js](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a791bb1a28ab29478b47f1/html5/thumbnails/6.jpg)
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
![Page 7: Introduction to backbone_js](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a791bb1a28ab29478b47f1/html5/thumbnails/7.jpg)
Backbone Organizes the code
Creates clean and efficient code.
Based on Model-View-Controller.
Backbone Components:
– Models
– View
– Collections
– Events
– Router
7
![Page 8: Introduction to backbone_js](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a791bb1a28ab29478b47f1/html5/thumbnails/8.jpg)
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
![Page 9: Introduction to backbone_js](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a791bb1a28ab29478b47f1/html5/thumbnails/9.jpg)
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
![Page 10: Introduction to backbone_js](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a791bb1a28ab29478b47f1/html5/thumbnails/10.jpg)
WHY BACKBONE JS
![Page 11: Introduction to backbone_js](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a791bb1a28ab29478b47f1/html5/thumbnails/11.jpg)
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.
![Page 12: Introduction to backbone_js](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a791bb1a28ab29478b47f1/html5/thumbnails/12.jpg)
QUICK FAQ
![Page 13: Introduction to backbone_js](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a791bb1a28ab29478b47f1/html5/thumbnails/13.jpg)
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.
![Page 14: Introduction to backbone_js](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a791bb1a28ab29478b47f1/html5/thumbnails/14.jpg)
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
![Page 15: Introduction to backbone_js](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a791bb1a28ab29478b47f1/html5/thumbnails/15.jpg)
Real world Backbone.js Applications
![Page 16: Introduction to backbone_js](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a791bb1a28ab29478b47f1/html5/thumbnails/16.jpg)
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.
![Page 17: Introduction to backbone_js](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a791bb1a28ab29478b47f1/html5/thumbnails/17.jpg)
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.
![Page 18: Introduction to backbone_js](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a791bb1a28ab29478b47f1/html5/thumbnails/18.jpg)
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.
![Page 19: Introduction to backbone_js](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a791bb1a28ab29478b47f1/html5/thumbnails/19.jpg)
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.
![Page 20: Introduction to backbone_js](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a791bb1a28ab29478b47f1/html5/thumbnails/20.jpg)
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
![Page 21: Introduction to backbone_js](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a791bb1a28ab29478b47f1/html5/thumbnails/21.jpg)
21
Please, please, please !!!
A hammer is an excellent tool, but it’s not used for everything !!!
![Page 22: Introduction to backbone_js](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a791bb1a28ab29478b47f1/html5/thumbnails/22.jpg)
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/
![Page 23: Introduction to backbone_js](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a791bb1a28ab29478b47f1/html5/thumbnails/23.jpg)
QUESTIONS
![Page 24: Introduction to backbone_js](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a791bb1a28ab29478b47f1/html5/thumbnails/24.jpg)
ThankYou
Bangalore Backbone JS
Hackers
24