Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Give Your Web AppsSome Backbone  {   Using Backbone.JS to create a single-page web app
   Model – View – Controller           First showed up in SmallTalk-80 in the 70’s           One of the first patterns ...
   Model           Represents a data object and its functionality (i.e.            a Domain object)       View        ...
Model        View        Browser                Presentation                   Layer                  Controller       App...
   Same general idea – separation of concerns in        model, view, and controller       AJAX and improvements in the b...
Server   Model              View                         Presentation                            Layer                    ...
   Library created by DocumentCloud to give        structure to web applications using MVC        concepts       Provide...
Code Time!
   Separation of concerns           Client browser is responsible for managing            HTML, events           Server...
   Embraces extensibility out of the box       Not as opinionated as other JavaScript MV*        frameworks       Vanil...
   User bookmarking may be affected           Use Backbone.Router       Search Engine Optimization doesn’t work so     ...
Upcoming SlideShare
Loading in …5
×

Give your web apps some backbone

1,095 views

Published on

Quick overview of traditional M-V-C and how Backbone.js moves it from the server to the browser

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

Give your web apps some backbone

  1. 1. Give Your Web AppsSome Backbone { Using Backbone.JS to create a single-page web app
  2. 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 applicationsHistory Lesson: MVC
  3. 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. 4. Model View Browser Presentation Layer Controller Application ServerTypical Web MVC
  5. 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 approachJavaScript MVC
  6. 6. Server Model View Presentation Layer Controller BrowserJavaScript MVC
  7. 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 URLsEnter Backbone.js
  8. 8. Code Time!
  9. 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 applicationWhy Client-Side MVC?
  10. 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 GitHubWhy Backbone?
  11. 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 visitsThings to be aware of

×