Your SlideShare is downloading. ×
0
Give your web apps some backbone
Give your web apps some backbone
Give your web apps some backbone
Give your web apps some backbone
Give your web apps some backbone
Give your web apps some backbone
Give your web apps some backbone
Give your web apps some backbone
Give your web apps some backbone
Give your web apps some backbone
Give your web apps some backbone
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Give your web apps some backbone

776

Published on

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

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
776
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Give Your Web AppsSome 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 applicationsHistory 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 ServerTypical 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 approachJavaScript MVC
  • 6. Server Model View Presentation Layer Controller BrowserJavaScript 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 URLsEnter 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 applicationWhy 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 GitHubWhy 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 visitsThings to be aware of

×