by Pamela Fox at HTML5 Texas Conference, Austin, Texas (Deck)
Backbone is one of the most popular MVC frameworks for JavaScript these days, and one of the reasons for its popularity is that its minimal and lightweight. That makes it easy to use in different ways and adapt to different projects – but can also make it hard to learn. In this talk, I’ll start with Backbone basics, and then dive into three different ways that we use it to power the frontends of Coursera.org.
Why use an MVC framework? Website includes: 242 js files, 28848 lines of code & 5-person frontend team. Needed more structure to their code.
Why Backbone?
- Structure
- Modularity
- Persistence Layer
- Common Services
- Best Practices
Backbone is a lightweight model view controller framework. Models use set & get so the framework know what’s going on. Collections group objects together. Views with basic data binding. Router is available, but you don’t have to use it.
The backbone backend – pull the info from the server from the JSON in the url.
Single-page web apps can be crazy because you don’t have normal page loads, etc.
Backbon is integrated with jQuery and underscore, as well as RequireJS, which helps you put all the JavaScript files back together.
How do they use backbone at coursera?
- custom router
- custom region manager
- custom API layer
Entire page is written in JavaScript. Pre-render static html pages for Google and Facebook.
“You don’t always have to do things the way they tell you to.”
Admin pieces require form building interfaces. Share models.
Enforce your permissions on the client, as well as the server or propagate them from the server.
The Router determines what models/collections are valid URLs based on groups in the cookie. Make sure you understand if what you’re building is a collaborative interface. Detect when others are entering the page or when the model was last saved. Don’t do real deletes. Make a deleted column and set it based on current status. Make a change log.
Using a front-end MVC allows you to easily connect to the backend, even if it changes.
You don’t have to use backbone for the entire site. You can pick and choose things that need to be fixed or updated and use a backbone app for one section at a time.
Backbone relational creates relational models.
Write all of your APIs consistently so that they can be used across different applications with different technologies.
If you want to start learning backbone, try a tutorial, not the docs.
Keep your options open
Figure out what’s important to you: modularity? data binding? testability? persistance?
Review your options: Ember? Spine? AngularJS? Enyo? and many more…
What do YOU think? Let me know...