Non-trivial web applications demand moving beyond jQuery one-offs into testable, single-responsibility code architectures. Sam shows us Backbone’s lightweight approach to building client-side MVC applications and builds in unit tests with Mocha and Sinon.JS.
Sam is a core contributor to Backbone and the CTO of Quick Left. Sam is currently authoring the upcoming book Backbone In Action for Manning Publications.
Backbone Core Team
How We Got Here
- 0:00:00 - 0:06:54 Introduction Sam gives a brief introduction and schedule for the session
- 0:06:55 - 0:13:20 Backbone Dependencies: jQuery The DOM is a mess. Backbone depends on jQuery because jQuery is a DOM library and great for manipulating DOM elements.
- 0:13:21 - 0:15:03 jQuery Review While jQuery gives developers a consistent API for DOM manipulation and routines like AJAX, it's not a tool for organizing and managing applications.
- 0:15:04 - 0:18:52 Backbone Dependencies: Underscore Underscore is a utility library. It includes useful utilities for Objects, Arrays, Functions, etc.
- 0:18:53 - 0:27:36 Single Page Applications When approaching single page applications, developers want to remember the experience should mirror that of a traditional web application. For example, including bookmarkable pages/states.
- 0:27:37 - 0:34:25 Philosophy, usage, and convention When using Backbone, there is often more than one way to implement a system. Backbone attempts to remain agnostic leaving many of the patterns up to the implementers to figure out.
- 0:34:26 - 0:39:38 Core Backbone Components Backbone consists of models, collections, custom events, sync operations, and views. It works best with a RESTful architecture and if you're willing to do thing the "Backbone way".
Overview of the Comments Application
0:47:38 - 0:55:39
Comments Project Setup
The project file can either be view on jsBin or by cloning Sam's GitHub repository. Sam begins by describing the setup and functionality of the application. Sam also gives a quick overview of the code structure.
- 0:55:40 - 1:05:59 Comments Model, Collection and View The comments Model will represent the data and help with validation. The Collection represents a list of Model objects. The View will display the collection in the markup.
- 1:06:00 - 1:18:17 Comments Application View The overall comments application will have a Backbone View responsible for the entire comments section. The element for this view is going to be the ".comments" class. This allows for a very flexible design and reusability.
- 1:18:18 - 1:25:01 Summarizing the functionality A Backbone collection's add method receives a model object. This triggers the render method for that model's view. All functionality is globally declared inside a single JS file. Later, Sam will demonstrate a better architecture.
- 1:25:02 - 1:37:19 Comments Application Audience Questions While answer a question about model objects, Sam demonstrates some debugging techniques and the debugger keyword.
1:37:20 - 1:49:54
Comments Project Setup and Dependencies
Sam prepared a blank starter project tin the project-template branch of his GitHub project. Sam also introduces a few third-party libraries he recommends during development including RequireJS, Bower, and Grunt
- 1:49:55 - 1:54:02 Advanced Feature Demonstration This, more robust, comments application now has a login system, ability to edit/delete comments, and a "Zen interface" for adding comments. Sam will be diving into these advanced features and how they were implemented with Backbone.
- 1:54:03 - 2:04:26 Code Walkthrough The main.js file is the entry point for the application. From there, RequireJS includes the necessary dependencies and wires up the application. Sam also demonstrates the templating system within the views.
- 2:04:27 - 2:09:29 Additional Code Features Sam introduces a few additional topics that will be live-coded later in the course. This includes a more robust validation system and an AMD module examples. Sam field a few additional ES6 questions during a brief break as well.
- 0:47:38 - 0:55:39 Comments Project Setup The project file can either be view on jsBin or by cloning Sam's GitHub repository. Sam begins by describing the setup and functionality of the application. Sam also gives a quick overview of the code structure.
Backbone Models In-Depth
- 2:09:30 - 2:15:33 Models In-Depth As covered earlier, Models represent a single resources from the server and are useful for storing data in-memory within an application. Models can be made flexible with helper methods like parse, toJSON, and sync.
- 2:15:34 - 2:22:32 Model.parse & Model.toJSON The parse method gives developers the opportunity to manipulate data as it's returned from the server. This could be used for simply formatting the returned data or creating additional model objects.
- 2:22:33 - 2:32:12 Defining Models When defining models, data structures do not need to be predefined. However, predefining attributes allows developers to set default values.
- 2:32:13 - 2:37:09 Using RESTful APIs REST is a way to architect data and a means for traffic to act on that data. Backbone works well with REST APIs for data communication.
2:37:10 - 2:49:40
Live Coding: REST APIs
Using Mozilla Persona, Sam begins coding a model object that will communicate with the Persona APIs for managing login information. Setting the URL property within that model is the first step in the communication.
- 2:49:41 - 2:51:00 Persona Questions Sam addresses some audience questions regarding the personal integration including how to set up persona with the course files.
Backbone Views In-Depth
- 2:51:01 - 2:58:48 Views & Templates In Backbone, views are really versatile. They are simply an object that represents the presentation of a model so they can adapt to many MV* patterns.
- 2:58:49 - 3:06:19 Rendering Templates Including templates in individual files moves them from the DOM and into a middle-ware pattern. This is because module loaders like RequireJS can better optimize your templates in production.
- 3:15:35 - 3:23:24 Responsible Rendering Solid application design means applying the single responsibility principle and interface segregation. Also, organizing your application around a view allows for more reusability and a more modular approach.
- 3:23:25 - 3:27:55 Views Audience Questions Sam addresses some audience questions on using views versus routers and also on lazy loading data.
Backbone Collections and Routers In-Depth
- 3:27:56 - 3:36:28 Collections When creating collections, you are able to pass a single model or an array of model objects. The models property within a collection give you a number of useful methods for working with the data.
- 3:36:29 - 3:41:37 Retrieving Model Data Methods like get, at, where, and pluck help retrieve model data from within collections. When you have access to a model's ID, using the get method is the most efficient method to use.
- 3:41:38 - 3:55:25 Syncing Data with the Server The "url" property specifies a RESTful endpoint. The "fetch" method invokes the RESTful data request.
- 3:55:26 - 4:02:27 Routing Background Routing is the ability to look at a URL within a web application and recreate a state. Most client-side techniques use a hash(#) to determine a specific state. These routes are called hash fragments.
- 4:02:28 - 4:09:26 Backbone Router Backbone routers are hash-maps that tie a specific URL to a function call. The URLs specified in the router use regular expressions for more complex formations.
- 4:09:27 - 4:13:41 Router Code Walkthrough Sam walks through a routing example for a login scenario. The application contains routes for logging in, logging out and different authentication levels for each user.
Testing Backbone Applications
- 4:13:42 - 4:21:44 Backbone API Project Introduction For this live-coding session, a jsBin project has been set up. Data will be pulled from the quickleft.com server. Sam gives a little background information on the code setup.
- 4:28:54 - 4:37:58 Writing Tests The most basic test developers can write is an assertion based on the application existing. Tests are typically much more specific that that, however. Sam demonstrates adding test cases inside the comments application and how to handle side-effects.
- 4:37:59 - 4:49:20 Using Sinon.js Sinon.js can be used to "spy" on methods or watch when they are called. Testing method call often triggers side effects. In that case, Sinon.js can be used to "stub" the method or block it from running.
- 4:49:21 - 5:02:47 Testing Event Handlers Testing event handlers can be tricky because they are reliant on the DOM. The best way to test them in isolation would be to either trigger the event or pass the event a mock-object.
- 5:02:48 - 5:12:15 Testing Views When testing views, one important assertion is to verify the required model object is passed to the view when it initializes.
- 5:12:16 - 5:21:46 Final Q & A Sam answers a few questions on additional test-driven-development resources.