Historical errata for Deliver Audacious Web Apps with Ember 2

The code listing for `application.hbs` on page 8 shows the default content, rather than the changes that need to be made to actually include the link to the register route. This is especially confusing given that second paragraph on page 9 talks about {{#link-to}}, but we haven’t seen it before because the code listing is incorrect. This also means that people must explicitly look at the bundled source code to have their implementation match (or even be able to register a user).

I was eventually able to get the ‘register’ route to show up, but only after downloading the bundled source code.

You need to cd into ember-note dir before running bower install bootstrap —save otherwise this fails with: No bower.json file to save to, use bower init to create one

(you have cd ember-note on the following page)

Could you move the warning about ‘ember new’ to right under (or maybe better: to the right of) the ‘ember new ember-note’ command. This is less of an issue with the paper version, but I got the warning. The discussion of the warning was not yet visible, so I spent a bit of time researching this to find out I need to rerun it.

In the section labeled “New Projects with Ember CLI” there is a suggestion that we may want to install watchman. It would be nice to give a bit more background about what watchman can do along with the command to install watchman.

page 10
I’ve re-read this text a few times, and it’s not making sense to me:
The {{action}}
expression lets us bind the button it’s part of to the addNew action in our route.

“Then navigate to localhost:4200, click the register link, provide a user name, and click add. You should see a message that says your user was added.” - at no point previously have we added the register link to the application template

No code link provided for the login route class

At the end of the section “How this book is organized”

[…] and learn abut Ember’s component…

abut => about

In the “Setting Your Model” section, you create the Note model but write:

ember generate model notebook

In this chapter you’ll learn how to user Ember CLI
to structure your application using routes.

user -> use

File location for the login router is not listed. Should be:
ch2/ember-note/app/login/route.js

Are you supposed to be in the ember-note directory at this point? The next instructions tell you to cd into the directory.

there is a call to ember generate model notebook which should be ember generate model note to be consistent with the file referenced immediately below. Also the correct use of ember generate model notebook is on page 35 (PDF)

{{#each notebook in model}} template syntax is deprecated as of 0.12, to be replaced with {{#each model as |notebook|}}, apparently.

http colon-slash-slash emberjs.com/deprecations/v1.x/#toc_code-in-code-syntax-for-code-each-code

c.f. Question above. Seems that you need indeed to be in ember-note
before doing `bower install bootstrap —save` so that we get it installed into the bower_components of the app.

It’s a continuation of a sentence starting on the previous page. The full text is “They have built-in expectations of how develop web apps, known as convention-over-configuration.” It seems like there’s a word missing: “They have built-in expectations of how TO develop web apps, known as convention-over-configuration.”

For continuity, I would move the paragraph starting with: “When you run this command…” to just underneath the “New Projects” warning, moving the paragraphs about adding bootstrap lower.

Also, to remove the ```$ cd ember-note``` on page 14, add it to the code that installs bootstrap.

2d sentence: “As soon as you The file should then look like this:” should probably read like: “As soon as you do, the file should then look like this:” Or “The file should look like this:”

referring to 78516

seems still wrong page 3 contains the bootstrap install command after the new ember command

page 4 moved cd ember-note above ember serve but not above bootstrap install

At the end of chapter 1, file server/mocks/users.js in the post ‘/’ function: (not sure of page number, I’m reading in ebooks)

defines a variable called body, but never uses it, always uses req.body instead. (I know its a nit, but either use the variable or delete it) else its confusing.

page number is probably misleading so go to chapter 2, application.hbs — another nit, it seems over complex to have a #if followed by an #unless when an {{else}} would do. That way you specify the condition only once, and guarantee you take exactly one branch (instead of 0 or 2 times if somebody mistypes the condition one of the times) I know its nit picky. Maybe you wanted people to see an example of #unless.

If you do decide to lose the #unless, be sure to also update the text that discusses it just before the Promises callout box.

At the end of chapter 2 the notes template is added with links to a single note. This breaks the app, because the referenced route notebooks.notes.note doesn’t exist yet. Instead if would make more sense to instead link to notes from the notebooks template. Otherwise the added code is unreachable.
If one skips ahead to chapter 3 the notebooks template already has these links added, so maybe this is an error?

toexplore > to explore

I suggest to use more ES2015 features (not only modules)

• Fat-Array syntax => to avoid var self=this patterns
• Methods in Object Literals {actions: { addNew() { ..} } instead { addNew: function() {} }

These ES2015 features are also used in the blog posts of emberjs.

The book says “Our last step is to take the user’s id, and run one of Ember’s nav- igation functions, transitionTo. This function redirects the user to the notebooks route, and provides the users id to that route by means of a path segment.”

However, the code at that point for login action just includes:
“self.transitionTo(‘notebooks’);”

Since we end up adding a component to update and delete a note, we should add the ability to the mock service to support this. I spend a long time trying to figure out what was wrong w/ the Ember portions, when it ended up being that the mock service didn’t actually persist the updates or the deletes.
I didn’t see anywhere else in the book where this functionality was added.
The following can enable the mock service to update and delete:

notesRouter.put(‘/:id’, function(req, res) {
var to_update = parseInt(req.params.id);

noteDB.update({id: to_update}, {$set: req.body.note}, function(err, numReplaces, newNotes) {
res.send({
‘notes’: {
id: req.params.id
}
});
});
});

notesRouter.delete(‘/:id’, function(req, res) {
var to_delete = parseInt(req.params.id);
noteDB.remove({id: to_delete}, function(err, numRemoved) {
res.status(204).end();
});
});

Specify destination directory for Bootstrap .map file like this to prevent 404 error:

app.import(‘bower_components/bootstrap/dist/css/bootstrap.css.map’, {
destDir: ‘assets’
});

In the code for the users mock, the call to insert a user into the userDB [userDB.insert()] has only a comma to separate its two arguments. I confused this with a period. Having a space after the comma would make it easier to read.

Misspelling of component under ‘Handling Actions’

comopnent’s => component’s.

at end of chapter 2 discussing named outlets, and the options object passed to render(), “into” is described as “This is the of the template …”

I think you left out the word name, or maybe path

“This is the of the template you want to render your template into.”
The what?

“Perhaps you’d like to totally avoid creating your own front end. If that’s the case, you might be interested in Firebase, and an Ember addon known as Fireplace.”

Shouldn’t it be avoid creating your own back end, as Firebase provides the back end?

On Ember 1.12.0, currentURL() is broken and will fail the test. Upgrading to Ember 1.12.1 or later should fix the problem.

“Running Your App” section.
When attempting run ‘ember serve’ I get the following error:
Cannot find module ‘ember-cli/lib/broccoli/ember-app’

According to the app readme produced by the app, before I can run that command, I have to run ‘npm install’ followed by ‘bower install’.

Once that is done, I can successfully run ‘ember serve’.

First paragraph:
…Take a look at the following “”the“” code,

End of chapter 6 talks about non-confirming APIs.

“using creating” ?

How This Book Is Organized
In the first chapter, we begin by using creating our local development environ- ment, and then start working on a sample project.

definiing => defining

The lines of code with `app.import` are cut off on the MOBI version (Kindle Paperwhite), with no way to read them. I had to download and check the PDF version to see what the complete code is.

When the link is clicked, the login action will fire.
“link” should be “button”.

`this.store.find` is deprecated, use this.store.query instead.

`this.store.find` is described in Page 70 and used in many other places.

After getting bootstrap through bower, the book instructs the user to edit the ember-note/ember-cli-build.js file. However, the user has already changed directories into the ember-note directory. Additionally, the changes are supposed to be added “right before the last line of code”, but at this point, this file does not exist in the project.

The handlebars template code here uses block parameters:

{{#each model as |note|}}

However, the handlebars version used with the app up to this point is 1.3 and the above is a handlebars 3.0 feature.

Which lines are changed in code are mistakenly marked.
That is, the lines changed are not the line marked with “Changed this line from controllerFor”, but the lines that have “this.logger.log”.

“With a bit more understanding of what a route is an how it’s used”:
“an” should be “and”

On page 31 of PDF, in ch2/ember-note/app/notebooks/template.hbs we have the the link pointing to:

{{#link-to ‘notebooks.notes’ notebook.id}}

this resolves to /notebooks/:id/notes/:id

Since we want a list of notebooks at this point, and not list of notes at the top level - did you mean the following instead:

{{#link-to ‘notebooks’ notebook.id}}

so the links resolve to:

/notebooks/:id/

Thank you.

In the ‘Normalizing Data’ section, I believe you have the parameters mixed up. The first code snippet looks correct (where you are setting the ‘title’ property of the hash object, etc. However, the next snippet, where you add a date to the object looks wrong. You are setting it on the ‘prop’ param rather than the ‘hash’ param and the subsequent paragraph also mistakenly says the ‘hash’ is the name (it is the payload) and the prop is the payload (it is the name).

Here is the incorrect snippet:

normalize: ​function​(type, hash, prop) {
prop[​’currentTime’​] = ​new​ Date();
this._super(type, hash, prop);
}

In the section “Allow the Adapter to Query a Nonconventional API”, you have a snippet that extends the ‘query’ method in the notebook adapter, but the paragraph below the snippet states “We’re extending the findQuery method…”

In section detailing how mixins are used, the register/route.js code snippet is missing a closing param on the if statement:

if​(this.isValidEmail(name) {

should be

if​(this.isValidEmail(name)) {

The title of the book is “Audacious Web Apps with Ember 2”. This implies that it is talking about Ember version 2.0. I just completed chapter 1, and while cross-referencing with the official 2.0 documentation, I noticed that things were different. I loaded the Ember inspector for chrome and then noticed that the ember-notes application was using ember 1.13.7 and ember data 1.13.8. I switched to the 1.13 version of the docs, which do match the code depicted in your book. Finally, through some Googling, I discovered that ember-cli is still back version and generates code based on 1.13 and not 2.0. Although this doesn’t complete devalue the book, it most certainly invalidates the title referencing version 2.0. Since I am new to ember and didn’t want to learn 1.13 only to then learn 2.0, I intentionally skipped other books and targeted yours since it was for 2.0. Did I miss something?

Hi Gerry - If you take a look at this post, you’ll see that the the codebases in the 2.0 release and the 1.13 release are the same, so long as no deprecation warnings occur in your 1.13 app: http://emberjs.com/blog/2015/08/13/ember-2-0-released.html. Any app that runs 1.13 code without warnings will run under 2.0. You’re right, Ember CLI is still on 1.13.8, and by default includes 1.13.x versions of Ember and Ember Data. The beta version of the book you’re reading was cut a few days after the first production Ember 2.0 release, so and Ember CLI wasn’t yet at 2.0 yet.

As for code samples looking different, that’s a hard question to answer without seeing a specific difference, but I can tell you I tested the code running on 2.0 versions of Ember and Ember Data, and it worked.

Current text at location 1014 (Kindle):
Once the record has been saved with Ember Data, we clear out the UI fields and then refresh the list using self.refresh(). This reloads the model from the server and displays your new record.

self.refresh() ===> should be this.refresh()

PS - thanks for the info in my prev question.

When attempting to spin up ember-note using “ember serve”, I am receiving a build error: "ENOENT, no such file or directory ‘/Users/matt/Projects/ember-note/tmp/simple_concat-input_base_path-FQOWE9ua.tmp/0/bower_components/bootstrap/dist/css/bootstrap.css’. I included the bower package, bootstrap, as a dependency however in the ember-bs-drowdown. Any thoughts?

I’d check to make sure you’ve made the necessary changes to the ember-cli-build.js in your ember-note project. If that doesn’t help, would you mind creating a post in the forum? It allows for better back-and-forth. Thanks! - Matt White

I would use ES6 syntax consistently. For example:

export default Ember.Route.extend({
actions: {
addNew() {
let user = this.store.createRecord(‘user’, {
name: this.controller.get(‘name’)
});
user.save().then(() => {
console.log(‘save successful’);
this.controller.set(‘message’,
`A new user with the name “${this.controller.get(‘name’)}” was added!`);
this.controller.set(‘name’, null);
}, () => {
console.log(‘save failed’);
});
}
}
});

If you provided with a repo, I could send pull-requests.

The second URL under “Define Your Routes” has a semicolon before the port number.

The unit tests will not run with the test code generated by ember. In the source code supplied for chapter 8, the test\\unit\\serializers\\application-test.js file is missing a model reference in the moduleForModel function call. It currently has {needs: [‘model:user’]} as the third parameter, but what it should have is {needs:[‘model:user’, ‘model:notebook’]}. This is because the user model has a reference to notbooks.

extractArray and extractSingle are not in the docs for RESTSerializer. Im guessing these were for older versions of Ember

I’d recommend not using pods in the next print. From what I’ve seen, most people and tutorials are not using ember pods, and for someone getting started, this would be confusing. The default structure in ember is without pods, so it would make more sense to start off with that and then point out this feature towards the end.

Under testing components, it says unit testing in some areas and integration testing in others. This should be integration for all cases since that is how Ember 2 defines component tests.

“it creates a file called register.js in the route directory”

should be

“it creates a file called register.js in the routes directory”

“localhost;4200”

should be

“localhost:4200”

The expression ‘notebook.noteCount()’ in

assert.equal(notebook.noteCount(),noteCount)

is not valid. We should use “notebook.get(‘noteCount’)” instead.

Ember 2.4.2: The default adapter, serializer are now the JSON API ones (DS.JSONAPIAdapter, DS.JSONAPSerializer) so need to be hand-edited to be DS.RESTAdapter and DS.RESTSerializer for it to work with the nedb/http-mock setup.

Current text:
“The destoryRecord method will delete the record from the server without a need to call save first.”

Should be:
“The destroyRecord method will delete the record from the server without a need to call save first.”

A minor grammar error—under the heading “Use Serializers to Access Legacy APIs,” in the second paragraph, the last sentence reads as follows:

And you can serialize your model data back into the format the servers expects and save it.

There is bad subject-verb agreement in “servers expects.” I the believe the intention is for “servers” to be singular here:

… the format the server expects and save it.

“Let’s try one now. Open the ember-note/app/templates/application.hbs file. Its contents
should look like this:” seems to assume that app/templates/application.hbs was created by `ember new ember-note`, which did not happen for me. I’m running Ember-CLI 2.8.0 on Ubuntu (if that matters).

A `users/:user_id/notebooks` path would be more ReSTful than the current `notebooks/:user_id` in `app/router.js`.

I believe this sentence has the incorrect path for the login template. “The login template, defined in app/login/template.hbs, looks like this:”

‘We then add the following the the config.js file, which creates our mock API:’
‘the the’ should be ‘to the’