Full Stack Web Development with Backbone.js

Errata for Full Stack Web Development with Backbone.js

Submit your own errata for this product.


The errata list is a list of errors and their corrections that were found after the product was released. If the error was corrected in a later version or reprint the date of the correction will be displayed in the column titled "Date Corrected".

The following errata were submitted by our customers and approved as valid errors by the author or editor.

Color Key: Serious Technical Mistake Minor Technical Mistake Language or formatting error Typo Question Note Update



Version Location Description Submitted By Date Submitted Date Corrected
PDF
Page vii
last paragraph

Missing word: "and the use _of_ Backbone plug-ins"

Note from the Author or Editor:
correct, typo

Stephan Max  Jul 06, 2014  Aug 15, 2014
Safari Books Online
Chapter 4 Router Basics -> Defining Routes

NOTE: I'm reading this book on Safari Books Online so not sure what page number this would be in the printed text initialize function is missing 'options' parameter Before: initialize: function() { this.movies = movies; this.moviesList = new MoviesList({ el: options.el, collection: movies }); } After: initialize: function(options) { this.movies = movies; this.moviesList = new MoviesList({ el: options.el, collection: movies }); }

Note from the Author or Editor:
Confirmed, the examples are cleaned up at github. No editing needs right now.

Raynald Mompoint  Aug 12, 2014 
Safari Books Online
Chapter 4 -> Preparing For a Layout View

Why does the code in the website (https://github.com/pipefishbook/ch_4/tree/master/layout) use the Backbone.xview plugin but the code presented in the book doesn't. Same is true for Chapter 5. Backbone.xview is only mentioned in passing at the end of Chapter 4.

Note from the Author or Editor:
The book example is OK, the github repo and book web page is outdated on this one.

Raynald Mompoint  Aug 13, 2014 
PDF
Page 9
2nd line from top of page

You have: var greeting = require('greeting'); Should be: var greeting = require('./greeting');

Note from the Author or Editor:
yes, sorry, this is confusing. the greeting.js file should be in node_modules/greeting.js not greeting.js which is according to the CommonJS convention discussed a bit later. indeed, the confusion could be avoided by taking the relative path too: var greeting = require('./greeting');

Cameron Skene  Jul 12, 2014  Aug 15, 2014
Printed
Page 9
footnote 1

Spelling... "ECMAScript 6 specification"

Note from the Author or Editor:
correct - specification instead of specifiaction

Anonymous  Oct 08, 2014 
PDF
Page 14
6th paragraph

"Sitch" should be "Stitch"

Note from the Author or Editor:
correct, this is a typo

Stephan Max  Jul 06, 2014  Aug 15, 2014
PDF
Page 15
3rd to last paragraph

browsers' should be browser's

Note from the Author or Editor:
correct, typo

Stephan Max  Jul 06, 2014  Aug 15, 2014
Printed
Page 15
1st code excerpt, 1st paragraph, 2nd command prompt

Both the code and text is inconsistent about the naming of the bundled Javascript. The first line of code at the top of the page, a comment, should read // Whenever a request goes to the client, we deliver the modules as bundle.js instead of // Whenever a request goes to the client, we deliver the modules as client.js And similarly, the first sentence in the first paragraph, it should read With this set up, Stitch manages and serves the client-side application whenever we request /static/bundle.js. instead of With this set up, Stitch manages and serves the client-side application whenever we request /client.js.

Note from the Author or Editor:
Indeed, the comment in the code example is outdated. The correct version indeed is: // Whenever a request goes to the client, we deliver the modules as bundle.js and // With this set up, Stitch manages and serves the client-side application whenever we request /static/bundle.js.

Anonymous  Oct 08, 2014 
PDF
Page 17
2nd paragraph

"uses cases" should be "use cases"

Patrick Mulder
Patrick Mulder
O'Reilly Author 
Jul 07, 2014  Aug 15, 2014
PDF
Page 27
2nd line

Code to be entered reads: var Backbone = require("Backbone"); Should read: var Backbone = require('backbone'); Uppercase causes "not found" error. VERY FRUSTRATING.

Note from the Author or Editor:
correct, this example should start with: var Backbone = require('backbone');

Josh  Dec 13, 2014 
PDF
Page 28
3rd code example

Midnight in Paris should be quoted.

Note from the Author or Editor:
Indeed, the correct syntax should be: > movie.set({"title": "Midnight in Paris"});

Bear Bibeault  Jun 29, 2014  Aug 15, 2014
PDF
Page 29
second-last paragraph

index.html should be index.html

Patrick Mulder
Patrick Mulder
O'Reilly Author 
Jun 29, 2014  Aug 15, 2014
PDF
Page 29
Example with browserify middle of page

At page 29 /page 47 in PDF) chapter “Preparing a Click Dummy” section. The example misses a .js extension. The correct line should read: $ browserify -r ./app/collections/movies.js:movies \ -r ./app/models/movie.js:movie > static/bundle.js Currently the .js is missing from movies.js:movies: $ browserify -r ./app/collections/movies:movies \ -r ./app/models/movie.js:movie > static/bundle.js

Patrick Mulder
Patrick Mulder
O'Reilly Author 
Aug 29, 2014 
Printed
Page 34
4th paragraph, 1st sentence

Should read "we will bind the data layer to a user interface" instead of "we will bind the data to layer to a user interface."

Note from the Author or Editor:
Indeed, there is a missing "to" too much. The correct version would be: "we will bind the data layer to the user interface"

Anonymous  Oct 13, 2014 
PDF
Page 37
2nd bullet of ordered list

models should be model

Note from the Author or Editor:
correct, the line: Bind a Movie view to changes from a Movie models. should be: Bind a Movie view to changes from a Movie model.

Stephan Max  Jul 06, 2014  Aug 15, 2014
PDF
Page 39
2nd code block

movies.resetSelected(); gives TypeError: undefined is not a function It should be app.movies.resetSelected();

Note from the Author or Editor:
Indeed, the correct form is app.movies.resetSelected()

James O'Donnell  Sep 28, 2014 
PDF
Page 52
2nd code example

The "initialize: function()" line should be "initialize: function( options )"

Note from the Author or Editor:
Yes, this would indeed more consistent: initiailize: function(options) { } The intendation also got slighty shifted too much.

Slavcho Slavchev  Jul 01, 2014  Aug 15, 2014
PDF
Page 52
2nd code example

There should be a require for the MoviesRoutes in the file main.js var MoviesRouter = require('routers/movies'); otherwise it fires a Reference Error.

Note from the Author or Editor:
Yes, it's better to have require('routers/movies') explicitly here

Slavcho Slavchev  Jul 01, 2014  Aug 15, 2014
PDF
Page 52
top example

The example lists the following code: // views var Movies = require('collections/movies'); var MoviesList = require('views/moviesList'); There is a line too much here, the "Movies = ...": The right code should be // views var MoviesList = require('views/moviesList');

Patrick Mulder
Patrick Mulder
O'Reilly Author 
Jul 31, 2014  Aug 15, 2014
PDF
Page 52
2nd code block

There are two errors in this block of code: var MoviesRouter = require('routers/movies'); should be var MoviesRouter = Backbone.Router.extend({ and the first } after initialize: function(options) { should be removed. The correct full output is var MoviesRouter = Backbone.Router.extend({ routes: { 'movies/:id': 'selectMovie', '': 'showMain' }, selectMovie: function(id) { this.moviesList.render(); this.movies.selectByID(id); }, showMain: function() { this.moviesList.render(); }, initialize: function(options) { this.movies = movies; this.moviesList = new MoviesList({ el: options.el, collection: movies }); } }); module.exports = MoviesRouter;

Note from the Author or Editor:
Indeed, the correct output is: var MoviesRouter = Backbone.Router.extend({ routes: { 'movies/:id': 'selectMovie', '': 'showMain' }, selectMovie: function(id) { this.movies.resetSelected(); this.movies.selectByID(id); this.layout.setDetails(this.movies.get(id)); }, showMain: function() { this.movies.resetSelected(); this.layout.setChose(); }, initialize: function(options) { this.movies = movies; this.layout = Layout.getInstance({ el: '#movies', router: this }); this.layout.render(); } }); module.exports = MoviesRouter;

James O'Donnell  Sep 30, 2014 
PDF
Page 52
first code block

var data = require('../../movies.json'); should be var data = require('../../../movies.json');

Note from the Author or Editor:
yes, this is correct: var data = require('../../../movies.json');

James O'Donnell  Sep 30, 2014 
PDF
Page 53
4th paragraph

I believe it should be noted that the line: e.preventDefault() should be commented out or removed from the views/movie.js file in order for the url to actually change as is stated in the page.

Note from the Author or Editor:
Correct, in Chapter 3, it was mostly ev.preventDefault() used, and from Chapter 4 it is not needed anymore. Maybe the paragraph should point this out as follows: "The URL can also be linked with an HTML anchor tag from a movie view. Then, the default behavior of the anchor tag automatically triggers the movies route. Note, that you must not use *ev.preventDefault()* since this would break the intentended page change. A nice plus on using the anchor tag directly, is that ypu don't need extra view callbacks to change routes, but the route change can be triggered via the view template. In the movies view app/views/movie.js, you can edit the template such:"

Slavcho Slavchev  Jul 01, 2014  Aug 15, 2014
PDF
Page 53
last code block

template: '<h1><a href='/movies/<%= id %>'><%= title %></a><hr></h1>' makes browserify give a parse error. Double quotes should be used around the value of href template: '<h1><a href="/movies/<%= id %>"><%= title %></a><hr></h1>'

Note from the Author or Editor:
Right, the correct syntax would be: '<h1><a href="/movies/<%= id %>"><%= title %></a><hr></h1>'

James O'Donnell  Sep 30, 2014 
PDF
Page 63
Last paragraph

It is not stated anywhere that you have to change the following line: this.listenTo (this.model, 'change: title', this.render); for this: this.listenTo (this.model, 'change', this.render); in Movie View, to select and deselect work.

Note from the Author or Editor:
Before bundling and reloading the page, you should bind the changes in the 'select' attribute of the model to a movie view. So, you add the following attribute observer in app/views/movies.js: initialize: function() { ... // to observe changes in the selected attribute: this.listenTo(this.model, 'change:selected', this.render); } Now you can bundle everything up and reload the page. As a result, you should be able to select movies from the moviesList view:

Flix Ortega  Jul 06, 2014  Aug 15, 2014
Printed
Page 76
2nd paragraph, 2nd sentence

"This will look familiar if you have worked with embedded Ruby other template approaches before." should read... "This will look familiar if you have worked with embedded Ruby or other template approaches before." or possibly... "This will look familiar if you have worked with embedded Ruby or other embedded template approaches before."

Note from the Author or Editor:
Indeed, there is a missing "or" here. The best correction would be: "This will look familiar if you have worked with embedded Ruby or other embedded template approaches before."

Anonymous  Nov 15, 2014 
Printed
Page 88
Figure 7-3 caption

"we discussed mainly DOM manipulation and tracking basic static with Backbone models and collections" should read "we discussed mainly DOM manipulation and tracking basic state with Backbone models and collections"

Note from the Author or Editor:
right, the "static" is without meaning here. the correct version is: "we discussed mainly DOM manipulation and tracking basic state with Backbone models and collections"

Anonymous  Nov 15, 2014 
PDF
Page 95
First example, 4th paragraph

The example for Firebase has changed in the meanwhile, the working example would be instead of: $ npm install client-backfire --save-dev to: $ npm install client-firebase --save-dev Then, the middle paragraph should become: "Now, you can include the sync adapter for Firebase in the movies collection: var Backbone = require('backbone'); Backbone.Firebase = require('./backbone_firebase'); " And last, the last example code should become: " var Movies = Backbone.Firebase.Collection.extend({ model: Movie, firebase: "https://movies-demo.firebaseio.com/movies", // ... same as previously }); "

Patrick Mulder
Patrick Mulder
O'Reilly Author 
Jul 31, 2014  Aug 15, 2014
Printed
Page 97
1st paragraph, 2nd sentence

'While Backbone.js is backend agnostic, you could work with any programming language or data store to build a "real" application stack.' should read... 'Since Backbone.js is backend agnostic, you could work with any programming language or data store to build a "real" application stack.'

Note from the Author or Editor:
Indeed, the proposed formulation is better: "Since Backbone.js is backend agnostic, you could work with any programming language or data store to build a "real" application stack"

Anonymous  Nov 27, 2014 
Printed
Page 102
line 12 of 1st code block

"// ... and we'll see how in a second with:" instead of "// ... and we'll see how in a second *how* with:"

Note from the Author or Editor:
correct, the line in the code example contains a typo. the correct version indeed is: "// ... and we'll see how in a second with:"

Anonymous  Dec 02, 2014 
Printed
Page 102
line 13 of first code block

Commented out live of code shouldn't end with a semi-colon... "// return ds.allMovies ()"

Note from the Author or Editor:
right instead of " // return ds.allMovies();" the line should be // return ds.allMovies()

Anonymous  Dec 02, 2014 
Printed
Page 103
1st paragraph, 1st sentence

I wasn't quite sure how to classify this error because it has two facets. When I first read the sentence "With a JavaScript promise, we abstract away the problems that uncertain runtimes for code execution bring.", the wording "uncertain runtimes" made it sound like the uncertainty of the Javascript engine it would be executing on, but this is not the case in this instance because we are talking about the server so the JavaScript engine is known. (The fact that my mind had to jump through that hurdle to understand the sentence suggests that a better choice of wording was needed.) So, it must be interpreted as the length of the execution of the code is uncertain. Then I think it becomes a minor technical mistake as the promise isn't required due to uncertainty of the execution time of a piece of code, but due to the lack of any guarantee of the order in which the code may be executed without the promise. To be specific, if the execution time was known and certain, but the order of execution was not, the potential problem requiring the promise would still exist. (By the way, I really like the book. I wouldn't be spending any time submitting these errata if I didn't think the book was great and worth putting effort into it to make it even better.)

Note from the Author or Editor:
Thanks, very good points. The style of this sentence got awry. Indeed, "runtime" has a double meaning here, which is confusing. A promise is a mental bridge between "now" and the "future". The promise makes it easier to reason about code execution without knowing how long the code execution takes. This behaviour is similar to controlling code execution with "blocking" programming languages such as Java or Ruby. But by using JavaScript and promises, you obtain the advantages of both, parallel code execution of the JavaScript event loop and some means to control the order of code execution.

Anonymous  Dec 02, 2014 
Printed
Page 107
1st code block

The "id: movie.id," line should be removed to be consistent with the output from the curl call on the same page and to match the spirit of switching from "id" to "_key".

Note from the Author or Editor:
correct - the line with movie.id might be confusing. this line in the example can be removed.

Anonymous  Dec 03, 2014 
PDF
Page 118
4th code fragment

the left parenthesis in "/api(auth/session" should be a forward slash

Note from the Author or Editor:
correct, another typo

Stephan Max  Jul 06, 2014  Aug 15, 2014
Printed
Page 123
paragraph 6, 1st sentence

"We can apply ideas to manage views..." instead of "We can apply ideas to manages views..."

Note from the Author or Editor:
Correct "manages" should be "manage"

Anonymous  Dec 10, 2014