Backbone.js Fundamentals

Backbone.js is a set of tools that gives structure to client-side web applications. It helps us write clean, maintainable JavaScript applications.
Course info
Rating
(848)
Level
Intermediate
Updated
Sep 5, 2012
Duration
4h 42m
Table of contents
Description
Course info
Rating
(848)
Level
Intermediate
Updated
Sep 5, 2012
Duration
4h 42m
Description

Backbone.js is a set of tools that gives structure to client-side web applications. It helps us write clean, maintainable JavaScript applications. This course will show you how to get the most out of each backbone component, and how to assemble them all into an advanced, modern web application.

About the author
About the author

Liam is a software developer, technologist and product delivery expert. He thinks a lot about how to manage software delivery projects and how to grow high performance teams.

More from the author
React Fundamentals
Intermediate
4h 13m
21 Jun 2018
F# Fundamentals
Beginner
5h 40m
10 Mar 2016
CoffeeScript Fundamentals
Intermediate
1h 59m
12 Sep 2011
Section Introduction Transcripts
Section Introduction Transcripts

Models
The previous module of this course introduced Backbone JS, explained why it is helpful for the modern web application developer and provided a quick demonstration of some of its features. Now, it's time to begin examining Backbone in detail and the best place to begin is with models. Backbone is a collection of loosely components so it is certainly possible to build an application with Backbone and not use Backbone models, but you probably won't and I'll explain why. I'll demonstrate how to define your own model types, how to instantiate new model objects, how to get and set model properties, and how to use model events. Model identity has complexity because models are often synced to a server. The model has identity in your client application and the model has identity on the server. Backbone provides some support to help maintain the identity of model objects throughout their life cycle. Backbone models can declare default property values and finally, we'll look at Backbone support for model validation.

Views
Views of the interface in both directions between your HTML document and your Backbone models end collections. For most applications, views will form the majority of your Backbone js code. (Silence) The first thing we need to cover is the high level description of what views are and how they're used. Then we'll move on to defining custom view types and instantiating instances of views. (Silence) Views provide a number of useful properties so we'll investigate each of those. Most views need to generate or modify some part of a HTML document and that is the random methods responsibility. (Silence) Views are often backed by a model. We'll have a look at how that's done. Views receive events from models and from the HTML document.

Templating
So far all of the views we've created have rendered themselves by manipulating the DOM with jQuery. But that is a slow and frustrating process. For any substantial real world view, we need a more efficient way of generating DOM elements. The solution is templating. Client-side templating is the technique of using javascript in the browser to render markup by substituting values into a static template. Underscore. js is a dependency or backbone. It includes a simple yet powerful templating function. Handlebars is an advanced templating solution that includes logic list templates and template pre-compilation. Pre-compiling templates is the technique of transforming templates into executable functions ahead of time. Template compilation is the slowest part of the template rendering process so doing it service side as a build step is a substantial performance boost. Client-side templating is a technology that we use to dynamically build markup from a template and some data. The template and the data are typically both retrieved from the server and passed through the templating library to produce markup. Templating is something that nearly all backbone apps will use but backbone doesn't include any specific support for templating. You have the freedom and the responsibility to evaluate and choose your own templating solution. Backbone applications typically use templating in the view's render method.

Routing
Routing is a part of Backbone. js that causes a lot of problems and confusion. The key to mastering routing is to understand exactly what it is and isn't and not to get it confused with the kind of routing you may have seen in server-side MVC frameworks. Client-side routing means responding to URL changes in client-side JavaScript code. The way Backbone does it, we start by defining routes. For Backbone a route is a combination of a URL pattern and a function to call when the URL is changed to match that pattern. Backbone is capable of triggering a route by changing the browser's URL and invoking the appropriate route handler. Modern browsers, other than Internet Explorer, support the HTML5 history API. Using history, Backbone can modify the URL for client-side routing. For browsers that don't support the HTML5 history API, Backbone can only modify the hash fragment for routing. The hash fragment is the part of the URL following a hash. Client-side routing and client-side applications have implications for search engine indexability. If your user interface is generated client-side by JavaScript, your content will not be automatically indexable by Google and other search engines.

Collections
There's only one thing better than the backbone model and that's a collection of backbone models. Collections group related models together at a convenient way to persist them and provide a set of helpful functions for dealing with sets of models. Just like models, a collection can be used as the basis for a view and binding a collection change event to a view's render function will automatically keep them in sync. When there is a set of models of the same type that you want to group together, use a collection. Collections have sorting capability that not only allows you to sort a collection but also to keep the collections sorted as models are added and removed. When working with collections, you are definitely going to want to move models in and out of the collection. There are many different ways to access models in a collection, the most basic being array-like random access. Backbone collections have 28 iterator methods. The things like funding a model, reducing a list, mapping a list, sorting, grouping, and shuffling. Like models, backbone in collections published a number of events. There are events from model added, model removed, model changed, model destroyed, collection synchronized, collection reset and validation error.

Connecting to a Server
While backbone does not require a server, most people will use one. First to serve their application to the user's browser, and then to synchronize model data changes. Backbone implements the client's side of a simple RESTful protocol for persisting changes to model data. The service side of the protocol is easily implemented using your service side web framework of choice. This module is about how backbone. js transfers model data to and from the server. Same origin policy is a browser security feature that greatly complicates data synchronization. Cross-origin resource sharing also known as CORS is a technology that makes it easy again. There are two collection operations that sync to the server-- create and fetch. Models have three operations that sync to the server-- fetch, save, and destroy. The server has to implement a simple RESTful HTTP API. Backbone. sync is the function responsible for all server communications overrided at the model collection of global level to change the way that model synchronization works. Backbone. localStorage is a simple plug-in that overrides the global Backbone. sync function converting the default service synchronization into local synchronization that saves all data to the browser's local storage.