Downloaded 26 times
Uploaded byShakti Shrestha
Organized web app development using backbone.js
This document provides an overview of using Backbone.js for web application development. It discusses problems with jQuery-only applications, such as tightly coupling data with the DOM. Backbone.js is presented as a solution by decoupling data from the UI using an MVC architecture with Models, Collections, Views, and Routers. Key components of Backbone.js like Models for data, Collections for lists of models, Views for DOM manipulation, and Routers for mapping URLs are described at a high level. Tips discussed include using Require.js for module loading and extensions/plugins for additional functionality.
More Related Content
Similar to Organized web app development using backbone.js
Organized web app development using backbone.js
- 1. (ORGANIZED) WEB-APP DEVELOPMENTUSING BACKBONE.JS SHAKTI SHRESTHA shakti.shrestha@gmail.com
- 2. ABOUT ME I workat Miracle Interface as Chief Technical Officer. Software Architect Focus on delivering applications with good performance
- 3. ABOUT ME A certifiedOCP in oracle 10g. a Programmer by heart. Also involved with ASPNETCOMMUNITY
- 4. AGENDAS Problems facing withjQuery-only Application Solution Backbone Backbone :: Architecture Tips
- 5. Problems facing withjQuery-only Application
- 6. Problems facing withjQuery-only application Data is tightly coupled with DOM jQuery Callback is hell Mostly get lost in forest of jQuery selectors and callbacks Scripts get scattered Problem while debugging code
- 7. Problems facing withjQuery-only application Data is tightly coupled with DOM
- 8. Problems facing withjQuery-only application… Data is tightly coupled with DOM
- 9. Problems facing withjQuery-only application… jQuery Callback is hell
- 10. Problems facing withjQuery-only application… Mostly get lost in forest of jQuery selectors and callbacks
- 11. Problems facing withjQuery-only application… Scripts get scattered We love bugs While trying to debug a jQuery application, I drink lots of caffeine
- 12.
- 13.
- 14. SOLUTION… Abstraction abstraction is theprocess of separating ideas from specific instances of those ideas at work. Wikipedia We already know about it. Model/Collection Views/Templates Controller/Router
- 15. SOLUTION… Callback Management (Events) Data & UI can be updated. Action & application status
- 16.
- 17.
- 18.
- 19. BACKBONE.JS, Its MV* structure Backbonedoes not force you to use a single template engine. Views can bind to HTML constructed in your favorite way.
- 20. BACKBONE.JS Can easily beused 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.
- 21. BACKBONE.JS Synchronous events areused 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.
- 22. BACKBONE.JS Backbone is alibrary, not a framework, and plays well with others. Dojo D3 visualization Knockoutjs Meteorjs "Two way data-binding" is avoided. Extension available.
- 23. BACKBONE.JS DEPENDS ON Underscore.js jQueryor Zepto Json2.js
- 24. BACKBONE.JS IS BACKBONEOF 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)
- 25.
- 26. BACKBONE.JS :: COMPONENTS Backbone.Model Backbone.Collection Backbone.View Template(Underscore.js) Router
- 27.
- 28. MODEL :: COMMUNICATE RESTful Fetch http GET /url Save(New) http POST /url Save http PUT /url/id Destroy http DELETE /url/id
- 29. MODEL :: COMMUNICATE Forlegacy web server without REST/HTTP. Then use Backbone.emulateHTTP = true
- 30. MODEL :: DEFINE keyfield URL to perform RESTful operation
- 31. MODEL :: USE Createobject of Model class Set data in model call the function to save it.
- 32.
- 33. Collection List of models Onlyused for pulling data from server.
- 34.
- 35.
- 36.
- 37. View Dom manipulation Dom eventhandling Uses model/collection
- 38. View :: Define htmlelement where the view will be rendered
- 39. View :: Define(with events) Define events & trigger point function that will be called when event is triggered.
- 40.
- 41. View :: more… http://backbonejs.org/#View
- 42. Template Default template engineis underscore.js Can use other template engines, Mustache Handlebar jQuery-tmpl
- 43.
- 44.
- 45. Routers Maps hash urlto function Need to enable backbone history Backbone.history.start();
- 46.
- 47.
- 48.
- 49.
- 50. 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
- 51.
- 52.
- 53. Thank you. THANKYOU