With a nearly endless stream of success stories, blog posts, add-ons and frameworks built on top of Backbone.js, you don’t need another set of marketing materials to tell you why you should be working with Backbone.js. What you need is a way to get started quickly – to get up to speed with Backbone’s components, learning how to orchestrate them to create rich, interactive applications in a browser. This series of screencasts from Backbone.js expert Derick Bailey, will teach you what you need to know in a straight-to-the-point, hands-on way to building single page applications for today’s modern web.
- Download and watch DRM-free episodes when and where it's convenient for you
- You get QuickTime, iPad/iPhone 4, and Theora Ogg formats.
- All the source code is available (visit the links tab).
All the episodes in this series have been released.
About this Screencast
Backbone.js is a hot topic these days, and with good reason. It powers some of the web’s most well-known applications including the LinkedIn mobile app, the Wal-Mart mobile app, rdio’s music player for both the web and their desktop clients, the Disqus commenting widget and much, much more. This little library of simple abstractions has helped to create a new generation of interactive and rich applications for the web, and it’s time for you to learn it.
In this 4 part screencast series, Backbone.js expert Derick Bailey will walk you through a hands-on introduction to building an image gallery application with Backbone, from the ground up. You’ll learn how to take an existing HTML form and jQuery code base, and migrate that into a Backbone view. You’ll use models and collections to store the image information entered into the form, and display a list of images to choose from and view. You’ll build an image viewer from a list, and see how to take advantage of the browser’s forward and back buttons with routers. Server persistence of image data will let the application reload from where the user left off, and common error scenarios will be handled.
Check out the preview (3 min):
Contents and Extracts
1. From jQuery To Backbone: Getting Started
- Introduction and a brief discussion of Backbone’s components
- Starting with a jQuery based form
- Migrating from jQuery to a Backbone view
- Introducing models for collecting data
- Storing models in a collection
- Displaying a list of images as thumbnails
2. A Single Page App: Routing And Navigation
- Some basic house cleaning (code cleanup)
- Preloading image data
- Clicking an image preview
- Displaying the selected image
- Code cleanup: a collection view and item view
- Routers: navigating between add and view image
- Visually tracking the selected image
- Navigating with the left and right arrows
3. A Better Structure: Application Initializers And Data Bootstrapping
- Managing visual regions
- Reducing boilerplate code with Backbone.Marionette
- Application initializers
- Bootstrapping data from the server
4. Saving And Loading: Server Side Persistent And Handling Common Errors
- A RESTful API for image data
- Fetching image data from the server
- Adding a new image (data persistence)
- Editing an image (data persistence)
- Updating the image list after editing an image
- Canceling edits
- Deleting an image
- Handling navigation errors