Give your web apps some backbone
Download as PPTX, PDF•0 likes•762 views
The document discusses the Model-View-Controller (MVC) pattern and how Backbone.js implements it for single-page web applications. MVC originated in the 1970s and separates an application into three responsibilities - the model manages the data, view displays it, and controller handles user input. Backbone.js provides structure for web apps using MVC concepts with a RESTful API, event system, and routing. It embraces extensibility while remaining unopinionated.
Give your web apps some backbone
- 1. Give Your Web Apps Some Backbone { Using Backbone.JS to create a single-page web app
- 2. Model – View – Controller First showed up in SmallTalk-80 in the 70’s One of the first patterns to describe software in terms of responsibilities rather than implementations Eventually evolved to apply to lots of GUI programming, most recently web applications History Lesson: MVC
- 3. Model Represents a data object and its functionality (i.e. a Domain object) View Displays information within an application. Little to no logic other than what’s required to display information from the model Controller (or Presenter) Handles events from the user (and View) and interacts with the Model “Classic” MVC
- 4. Model View Browser Presentation Layer Controller Application Server Typical Web MVC
- 5. Same general idea – separation of concerns in model, view, and controller AJAX and improvements in the browser have made client-side rendering much more powerful More powerful client-side scripts as well as highly interactive websites required a more structured approach JavaScript MVC
- 6. Server Model View Presentation Layer Controller Browser JavaScript MVC
- 7. Library created by DocumentCloud to give structure to web applications using MVC concepts Provides a RESTful persistence interface Event system to communicate between layers Convenience methods for working with collections of data Routing for client-side URLs Enter Backbone.js
- 8. Code Time!
- 9. Separation of concerns Client browser is responsible for managing HTML, events Server is only responsible for managing data Lends itself well to an API-first approach Everything is retrieved on initial page load Important for mobile devices Allows for a stateful web application Why Client-Side MVC?
- 10. Embraces extensibility out of the box Not as opinionated as other JavaScript MV* frameworks Vanilla backbone requires some setup, but there are libraries to make setup and binding easier Lots of extensions – 4200 repositories in GitHub Why Backbone?
- 11. User bookmarking may be affected Use Backbone.Router Search Engine Optimization doesn’t work so well with JavaScript Ensure searchable information is accessable in HTML / with JS turned off Services that rely on page loads might be affected (i.e. Google Analytics, advertising) Work with services’ API, usually can use hidden iframe to simulate page visits Things to be aware of