1.
Backbone.js
Ben McCormick
Windsor Circle
Twitter: @ben336
Blog: http://benmccormick.org

2.
Why Listen To Me?
• Front-End Developer @ Windsor Circle
• Over a year working with Backbone
• Plenty of experience with alternatives: React,
Angular, Knockout, plain jQuery

3.
What To Expect
• What is Backbone?
• Why is it (still) relevant?
• Cool demos

4.
What is Backbone?

5.
Backbone Background
• Written in 2010 by Jeremy Ashkenas
(Underscore.js/Coffeescript)
• Currently at version 1.1.2 and essentially “stable”
• Dependencies: jQuery + Underscore (or
replacements)

6.
- backbonejs.org
“Philosophically, Backbone is an attempt to
discover the minimal set of data-structuring
(models and collections) and user interface
(views and URLs) primitives that are generally
useful when building web applications with
JavaScript.”

7.
– Me
“Anything you will always need for building a
front-end web application should be in
Backbone. Everything else should not be”

8.
What Backbone Provides
• Models
• Collections
• Views
• Router
• Events

9.
Model
• Represents an
object
• Contains helper
functions for
persistence to a
server

10.
Collection
• A list of Models
• Helpers for server
persistence and common list
operations

11.
View
• Controls the HTML for a
section of the DOM
• Connects to Models and
Collections to display their data
• Uses jQuery to listen to DOM
events

12.
Router
• Allows for client-side URL
handling
• Associates URLs with
Callbacks
• Works with either # syntax or
Browser History API

13.
Events
• Mixed into every other
component
• Facilitate communication
between components
• Events are synchronous,
different than jQuery/DOM
events

14.
Models
Collections
Views
Routers
Events

15.
Why is Backbone (still)
relevant?

16.
Question: Are JavaScript
frameworks always
evolving?

17.
Oct 2010 - Present

18.
Oct 2010 - Present

19.
2 Responses To Backbone
• “Backbone is much too basic. I need a tool that
does more for me, like Angular, Ember or React”
• “My needs are simple. I don’t need something
complicated like Backbone, I can get by just fine
with plain JavaScript or jQuery”

20.
Backbone’s Big Ideas
• Data - View Separation
• Extensibility
• Minimalism
• Transparency

21.
Data - View Separation
• Models & Collections handle data and
persistence
• Views handle display
• Now a minimal qualification for JavaScript
frameworks

22.
Extensibility
• Everything is replaceable
• Good defaults where possible, decisions left to
the user otherwise
• Reflected in the ecosystem that has grown up
around Backbone

23.
Minimalism
• Simple to learn
• No Lock-in
• No wasted code for most applications
• Solve problems however you want within a
structured environment

24.
Transparency
• Explicit Code, no magic
• Readable short source (under 2k LOC)
• 5 simple concepts

25.
Lines of Code
0
15000
30000
45000
60000
Backbone Angular Ember React

26.
Lines of Code (more fair)
0
15000
30000
45000
60000
Backbone + Extras Angular Ember React
* Backbone + jQuery + Underscore + Marionette

27.
It’s not about the bandwidth. It’s about
being able to understand what’s
happening

28.
What Value Do These Ideas
Provide?
• Flexibility
• Usable by anyone
• Fast Learning Curve
• Stability

29.
Technology for Maintainable
Applications
• Must be able to respond to change, without
requiring constant rewrites
• Must be able to bring on new developers quickly
• Have confidence that a technology will last

30.
How Do You Know If A
Technology Will Last?

31.
Demo Time
https://github.com/benmccormick/bb-comments/tree/master

32.
2010

33.
2012

34.
Marionette
• Standardizes best practices
• Focus on View and Application
structure
• Philosophically aligned with
Backbone

35.
2014

36.
2015

37.
Virtual DOM
• Pioneered by React
• Implementations now available in Ember and standalone
• Backbone Rendering strategies are replaceable

38.
ES6: Next-gen JavaScript

39.
ES6
• Classes
• Modules
• Promises
• Destructuring
• Template/Multiline Strings

40.
Wrap-Up
• Backbone allows for steady improvements
without “boil the ocean” rewrites
• Values Model => View Separation, Extensibility,
Minimalism, and Transparency

41.
Questions?

42.
Ben McCormick
Windsor Circle
Twitter: @ben336
Blog: http://benmccormick.org