Successfully reported this slideshow.




Upcoming SlideShare
Component Based Development
Component Based Development
Loading in …3
1 of 51
1 of 51

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all


  1. 1. Backbone.js Ben McCormick Windsor Circle Twitter: @ben336 Blog:
  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. - “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
  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:

Editor's Notes

  • Hello

    Thank The underground
    Thank Kyle for organizing/inviting me
    Ask people checking twitter to move to the back (I won’t if you don’t)
    Ask questions if you want, may stop answering if I fall behind
  • Green pants are a WC thing

    Contributor to Marionette
  • What am I going to be talking about?
    Expect about 20 minutes of me talking, 20 minutes of demos, and then plenty of time for questions
  • “Basically finished”
  • This description is from the Backbone website
  • Backbone is foundational only. Nothing gets included that everyone won’t use. Obviously everybody doesn’t use the exact backbone code, but conceptually everybody has to have something like whats included in Backbone
  • Backbone provides 5 simple concepts.
    That’s it!
  • Single unit of data, roughly corresponds to a resource in a REST API, a database table, or a Class on the backend

    Blog => Post Comment

    Admin => Users
    Anything that you can have many of

    Above and beyond a normal object, Models provide easy persistence to the server, events that let you watch it for changes, and helper functions for common object operations
  • List of models

    Like models, they handle persistence and add lots of helper functions and events
  • Views are the most minimal part of Backbone

    They set up a framework for displaying content based on data, but don’t force you to do it in a particular way
  • Not everyone needs a router
    If you have a server driven app, you can probably ignore this

    But if you’re building an SPA, this is the way to do it with Backbone
  • Events are how Backbone objects coordinate with each other

    Views can listen to events on models, models can listen to events on sub models or collections, and you can define custom objects to trigger events and act as a message bus between parts of your app
  • That’s it
  • So its small, simple, and its been around for a while. Why should **I** care about Backbone?
  • First its always nice to see some credibility.

    Lots of big name companies are “still” using Backbone. You can see there are a good mix of use-cases as well. Plenty of content companies, some music companies, some ecommerce, productivity, really all over the map.
  • Is newer always better here? Have we just found definitively better ways of doing things?

    Important question

    I’ve seen a lot of talks like this, focused on a framework, and I know there’s a protocol I’m supposed to follow.
  • I’m supposed to talk about my framework “journey” and how my life has slowly gotten better as I started using jQuery, then moved onto other frameworks , and finally got to REALLY COOL FRAMEWORK X. It usually looks something like this

  • So there are an incredible amount of developers out there getting by just fine without any fancy frameworks. Who are hanging out on the first phase of that evolutionary ladder. And sure some of them are just using the only thing they know. But many are finding jQuery to be the right solution to their problem. What can we learn from that?
  • How you feel about this can lead to 2 responses.

    If you think Frameworks are constantly evolving along a track to becoming better and better, you might dismiss it and say you need the new thing

    If you don’t see the point of all the added code and complexity frameworks bring you might question whether you need a framework altogether
  • I prefer to think about JS frameworks the same way I think of programming languages on the backend. Some may be better, some worse, but the important ones all have a few central ideas that they bring to the table that can make you a better programmer, both when you’re using them or other frameworks
  • This is where Backbone most differs from Ember/Angular/React. For the most part its not trying to solve problems for you, it tries to provide an environment for you to solve problems
  • well over half of the backbone case is jQuery
  • The best thing about this is that the ecosystem embraces these traits
  • You look at its track record. How has it handled the change around it over time?
  • I want to show you what it might have looked like to write a Backbone App in 2010 and maintain it through today

    So we are going to write a blog commenting system
  • iPad was released
    We were still in a recession
    Duke won a national championship

    Show the simple Demo + App.js
  • No magic
    You can use some of it or all of it
    Adds more to Backbone but stays minimalist
  • Marionette helps give your application structure and provides much richer defaults and helpers for your View code
  • Note that we didn’t have to change any model code to do this
  • So the site was great. But now its 2013, and we don’t want to have to refresh the page to see what other people are saying as they comment
  • View code doesn’t have to change at all
  • Make sure to demo the fact that an update overwrites the comment in progress.
  • View code doesn’t have to change at all
  • ×