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,053 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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,053
On SlideShare
0
From Embeds
0
Number of Embeds
241
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×