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.
Backbone.js
Ben McCormick
Windsor Circle
Twitter: @ben336
Blog: http://benmccormick.org
Why Listen To Me?
• Front-End Developer @ Windsor Circle
• Over a year working with Backbone
• Plenty of experience with a...
What To Expect
• What is Backbone?
• Why is it (still) relevant?
• Cool demos
What is Backbone?
Backbone Background
• Written in 2010 by Jeremy Ashkenas
(Underscore.js/Coffeescript)
• Currently at version 1.1.2 and ess...
- backbonejs.org
“Philosophically, Backbone is an attempt to
discover the minimal set of data-structuring
(models and coll...
– Me
“Anything you will always need for building a
front-end web application should be in
Backbone. Everything else should...
What Backbone Provides
• Models
• Collections
• Views
• Router
• Events
Model
• Represents an
object
• Contains helper
functions for
persistence to a
server
Collection
• A list of Models
• Helpers for server
persistence and common list
operations
View
• Controls the HTML for a
section of the DOM
• Connects to Models and
Collections to display their data
• Uses jQuery...
Router
• Allows for client-side URL
handling
• Associates URLs with
Callbacks
• Works with either # syntax or
Browser Hist...
Events
• Mixed into every other
component
• Facilitate communication
between components
• Events are synchronous,
differen...
Models
Collections
Views
Routers
Events
Why is Backbone (still)
relevant?
Question: Are JavaScript
frameworks always
evolving?
Oct 2010 - Present
Oct 2010 - Present
2 Responses To Backbone
• “Backbone is much too basic. I need a tool that
does more for me, like Angular, Ember or React”
...
Backbone’s Big Ideas
• Data - View Separation
• Extensibility
• Minimalism
• Transparency
Data - View Separation
• Models & Collections handle data and
persistence
• Views handle display
• Now a minimal qualifica...
Extensibility
• Everything is replaceable
• Good defaults where possible, decisions left to
the user otherwise
• Reflected...
Minimalism
• Simple to learn
• No Lock-in
• No wasted code for most applications
• Solve problems however you want within ...
Transparency
• Explicit Code, no magic
• Readable short source (under 2k LOC)
• 5 simple concepts
Lines of Code
0
15000
30000
45000
60000
Backbone Angular Ember React
Lines of Code (more fair)
0
15000
30000
45000
60000
Backbone + Extras Angular Ember React
* Backbone + jQuery + Underscore...
It’s not about the bandwidth. It’s about
being able to understand what’s
happening
What Value Do These Ideas
Provide?
• Flexibility
• Usable by anyone
• Fast Learning Curve
• Stability
Technology for Maintainable
Applications
• Must be able to respond to change, without
requiring constant rewrites
• Must b...
How Do You Know If A
Technology Will Last?
Demo Time
https://github.com/benmccormick/bb-comments/tree/master
2010
2012
Marionette
• Standardizes best practices
• Focus on View and Application
structure
• Philosophically aligned with
Backbone
2014
2015
Virtual DOM
• Pioneered by React
• Implementations now available in Ember and standalone
• Backbone Rendering strategies a...
ES6: Next-gen JavaScript
ES6
• Classes
• Modules
• Promises
• Destructuring
• Template/Multiline Strings
Wrap-Up
• Backbone allows for steady improvements
without “boil the ocean” rewrites
• Values Model => View Separation, Ext...
Questions?
Ben McCormick
Windsor Circle
Twitter: @ben336
Blog: http://benmccormick.org
Backbonemeetup
Backbonemeetup
Backbonemeetup
Backbonemeetup
Backbonemeetup
Backbonemeetup
Backbonemeetup
Backbonemeetup
Backbonemeetup
Upcoming SlideShare
Loading in …5
×

Backbonemeetup

793 views

Published on

Talk on Backbone for the Triangle JS Meetup March 17 2015.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Backbonemeetup

  1. 1. Backbone.js Ben McCormick Windsor Circle Twitter: @ben336 Blog: http://benmccormick.org
  2. 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. 3. What To Expect • What is Backbone? • Why is it (still) relevant? • Cool demos
  4. 4. What is Backbone?
  5. 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. 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. 7. – Me “Anything you will always need for building a front-end web application should be in Backbone. Everything else should not be”
  8. 8. What Backbone Provides • Models • Collections • Views • Router • Events
  9. 9. Model • Represents an object • Contains helper functions for persistence to a server
  10. 10. Collection • A list of Models • Helpers for server persistence and common list operations
  11. 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. 12. Router • Allows for client-side URL handling • Associates URLs with Callbacks • Works with either # syntax or Browser History API
  13. 13. Events • Mixed into every other component • Facilitate communication between components • Events are synchronous, different than jQuery/DOM events
  14. 14. Models Collections Views Routers Events
  15. 15. Why is Backbone (still) relevant?
  16. 16. Question: Are JavaScript frameworks always evolving?
  17. 17. Oct 2010 - Present
  18. 18. Oct 2010 - Present
  19. 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. 20. Backbone’s Big Ideas • Data - View Separation • Extensibility • Minimalism • Transparency
  21. 21. Data - View Separation • Models & Collections handle data and persistence • Views handle display • Now a minimal qualification for JavaScript frameworks
  22. 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. 23. Minimalism • Simple to learn • No Lock-in • No wasted code for most applications • Solve problems however you want within a structured environment
  24. 24. Transparency • Explicit Code, no magic • Readable short source (under 2k LOC) • 5 simple concepts
  25. 25. Lines of Code 0 15000 30000 45000 60000 Backbone Angular Ember React
  26. 26. Lines of Code (more fair) 0 15000 30000 45000 60000 Backbone + Extras Angular Ember React * Backbone + jQuery + Underscore + Marionette
  27. 27. It’s not about the bandwidth. It’s about being able to understand what’s happening
  28. 28. What Value Do These Ideas Provide? • Flexibility • Usable by anyone • Fast Learning Curve • Stability
  29. 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. 30. How Do You Know If A Technology Will Last?
  31. 31. Demo Time https://github.com/benmccormick/bb-comments/tree/master
  32. 32. 2010
  33. 33. 2012
  34. 34. Marionette • Standardizes best practices • Focus on View and Application structure • Philosophically aligned with Backbone
  35. 35. 2014
  36. 36. 2015
  37. 37. Virtual DOM • Pioneered by React • Implementations now available in Ember and standalone • Backbone Rendering strategies are replaceable
  38. 38. ES6: Next-gen JavaScript
  39. 39. ES6 • Classes • Modules • Promises • Destructuring • Template/Multiline Strings
  40. 40. Wrap-Up • Backbone allows for steady improvements without “boil the ocean” rewrites • Values Model => View Separation, Extensibility, Minimalism, and Transparency
  41. 41. Questions?
  42. 42. Ben McCormick Windsor Circle Twitter: @ben336 Blog: http://benmccormick.org

×