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.

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