Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Backbone.js Tutorial: Learn MVC Architecture, Features & Real World Apps (39
Similar a Backbone.js Tutorial: Learn MVC Architecture, Features & Real World Apps (39 (20)
Último
Último (20)
Backbone.js Tutorial: Learn MVC Architecture, Features & Real World Apps (39
- 2. AGENDA What is Backbone.js? Why to use? When to use Backbone.JS? Backbone.js Architecture Features PROGRAM Real world Backbone.js Application Which companies uses backbone.js? Advantages and disadvantages
- 3. What is Backbone.js? Backbone.js was initially released on October 13, 2010. It was developed by Jeremy Ashkenas. Backbone.js is lightweight Javascript library that adds structure to your client-side code Makes it easy to manage and decouple concerns in your application MVC (model view controller)for the client Light weight at under 8kb Backbone is available for use under the MIT software license… Backbone is an open-source component of DocumentCloud.
- 4. Why to use? STRUCTURE REUSE SEPRARATION OF ROLES OF CONCERNS
- 5. When to use Backbone.JS? • Backbone.js is used to reduce complications. • If we want a better design with less code, then it is better to use the BackboneJS library . • BackboneJS communicates via events; this ensures that you do not mess up the application. Your code will be cleaner, nicer and easy to maintain.
- 6. Backbone.js Architecture The Backbone.js architecture specifies the structure to the web applications that allows users to separate business logic and user interface logic. It contains the following modules: • HTTP Request • Router • View • Events • Model • Collection • Data Source
- 8. Features Backbone provides different types of building blocks like models, views, events, routers and collections for assembling client side web applications. Backbone.js is a free and open source library and contains over 100 available extensions. Backbone.js allows developers to create client side web applications or mobile applications in well structured and organized format. In Backbone.js when model changes, it automatically updates the HTML of your application.
- 9. <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <meta http-equiv = "X-UA- Compatible" content = "IE = edge,chrome = 1"> <title> using Backbone.js</title> </head> <body> <div id = "container">Loading...</div> <script src = "https://code.jquery.com/jquery-2.1.3.min.js" type = "text/javascript"></script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1 .3.3/underscore-min.js" type = "text/javascript"></script> PROGRAM:
- 10. <script src = "https://cdnjs.cloudflare.com/ajax/libs/backbone. js/0.9.2/backbone-min.js" type = "text/javascript"></script> <script type = "text/javascript"> var AppView = ({ el: '#container', Backbone.View.extend initialize: function() { this.render(); }, render: function() { this.$el.html("HELLO B10 GROUP!!!"); } }); var appView = new AppView(); </script> </body> </html> },
- 12. Real world Backbone.js Application LinkedIn Mobile To create its next generation HTML5 mobile web app. Backbone made it easy to keep the app modular, organized and extensible so that it was possible to program the complexities of LinkedIn user experience
- 13. Which companies uses backbone.js? Pinterest Uber MasterCard Reddit
- 14. Advantages • You can develop a web application with Backbone.js by using JavaScript with the minimal set of data-structuring (models & collections) and user interface (views & URLs). • It is best for developing MVC like web applications, single page web applications or complex JavaScript web applications in an organized and structured manner without JavaScript code mixing with HTML. • It provides API with many functions. • It facilitates you to abstract your data into models and your DOM application into views and binds the two together using events.
- 15. DISADVANTAGES • Serves to be difficult to understand how to apply the code for the ones who are new to JavaScript. • Demands longer development time.