Introduction to backbone_js
Download as PPSX, PDF0 likes876 views
This document provides an introduction to the JavaScript library Backbone.js. It describes some common problems with JavaScript applications, such as tangled code and difficulty keeping the UI, logic and database in sync. Backbone.js addresses these issues by providing an MVC-inspired framework that organizes code into structured models, views and controllers. It also supports single page applications through its use of a router and by handling synchronization between the client and server through RESTful APIs. Several large companies are highlighted that use Backbone.js for its modularity, extensibility and ability to build complex, interactive interfaces.
Ad
More Related Content
What's hot (20)
Viewers also liked (8)
![[2015/2016] Backbone JS](https://cdn.slidesharecdn.com/ss_thumbnails/07backbone-160513223420-thumbnail.jpg?width=560&fit=bounds)
Ad
Similar to Introduction to backbone_js (20)
Ad
Recently uploaded (20)
Introduction to backbone_js
- 1. INTRODUCTION TO BACKBONE JS - Mohammed Saqib
- 2. AGENDA 2 Problems with JS What is Backbone JS Model –View - Presenter Single Page Application Why Backbone Quick Facts Real time applications using Backbone JS Summary References
- 3. 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
- 4. WHAT IS BACKBONE JS
- 5. 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.
- 6. 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
- 7. Backbone Organizes the code Creates clean and efficient code. Based on Model-View-Controller. Backbone Components: – Models – View – Collections – Events – Router 7
- 8. 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
- 9. 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
- 10. WHY BACKBONE JS
- 11. 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.
- 12. QUICK FAQ
- 13. 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.
- 14. 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
- 16. USA Today Takes advantage of the modularity of Backbone's data/model lifecycle — which makes it simple to - create - Inherit -isolate - link application objects to keep the codebase both manageable and efficient. Website also makes heavy use of the Backbone Router to control the page for both pushState-capable and legacy browsers.
- 17. LinkedIn Mobile Backbone made it easy to keep the app modular, organized and extensible in order to improve LinkedIn's user experience. Views are rendered using underscore templates. Backbone models / collections – To store the JSON data received from the server. It uses RESTful API request through Backbone.Sync - to read or save a model to the server.
- 18. 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.
- 19. Airbnb It started with Airbnb Mobile 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.
- 20. 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 is always evolving, so be sure to visit the official website and documentation for more details and the latest features. 20
- 21. 21 Please, please, please !!! A hammer is an excellent tool, but it’s not used for everything !!!
- 22. 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/
- 23. QUESTIONS