Understanding ember in depth

Learning Team
1

Hi all.

I’m a javascript noob. How to go about learning ember js. I’ve tried learning from the official doc. But I don’t really seem to understand the concepts.

Any learning resource and methods would be highly appreciated. Thanks !

2

The book Rock and Roll with Ember.

Video courses by EmberMap and EmberCasts.

4 Likes
3

Are you able to articulate what the official docs have failed to help? We would really like to fill any knowledge gaps in those guides as much as possible.

2 Likes
4

@sukima For example, the hook order as mentioned in this article Ember Route Hooks — A Complete Look | Alex DiLiberto was not mentioned in the official doc. It took some time for me to figure out the order in which the hooks are called in the route. There are many such things. Do you want me to list ?

2 Likes
5

@JimParsons this is great feedback!

If you could share the list of things you had trouble with, it’d definitely be helpful.

2 Likes
6

A colleague just asked me the other day how to “extend” the Router service. Although this particular thing is tricky, I first had to explain that in Ember we can extend things by (1) knowing the original import path of a module, and (2) creating a new file where the resolver expects to find that module, and (3) importing , extending, and exporting that class. This is a piece of knowledge that I happen to know, but is not really documented anywhere as far as I know! Will add more if I think of them :slight_smile:

2 Likes
7

We all were at some point! I found the Eloquent Javascript book by Marijn Haverbeke helpful for walking through fundamentals of the language. If you prefer focused practice with code, I have been enjoying exercism.io for learning the fundamentals of a programming language. They have a JavaScript learning track.

3 Likes
8

Yeah, this is an example of where learners sometimes struggle because they’re dealing simultaneously with a Javascript feature that may be new to them (ES modules / import / export) and learning Ember’s own conventions.

The line where Javascript ends and Ember begins is not at all obvious to beginners, so they might think of it all as “learning Ember”.

The good news is that Javascript features are things people can learn once and then apply in any modern Javascript project, not just Ember. We can lean on existing teaching materials that explain those features without writing them all ourselves. Lots of the Javascript features people struggle with are the newer ones (imports, classes, decorators) but my hope is that as they become less new and more widely understood, we’ll see more and better teaching materials and more people who are new-to-Ember but already know these things.

This is also why we’ve been adopting standard Javascript features to replace Ember custom features wherever practical. Our class system is one example: Component.extend() was something we needed to write because there was no built-in “extend” in Javascript back when we were getting started. But now that can be class extends Component, which is built-in.

2 Likes
9

Importing/extending/re-exporting is plain ole JS, and I totally get your point about it being a blurry line, but the Ember bit I was pointing to was Ember’s custom resolver behavior.

For example, if I want to extend Ember Power Select but still invoke it as {{#power-select}}, Ember’s resolver and Ember CLI’s merging of trees gives me that power by adding a file at app/components/power-select.js that looks like this:

import PowerSelect from 'ember-power-select/components/power-select';
export default PowerSelect.extend({

  init() {
    this._super(...arguments);
    console.log('using power select!');
  }
});

Although the import/re-export is a JS feature, the location of this file is a feature of how Ember handles it’s filesystem and injects objects into the container1 based on that.

Shill that I am, I’ll also plug my earlier note of saying something similar on twitter:

https://twitter.com/mehulkar/status/1105960762822934528

My reason for chipping into this thread was to add another example of where the official guides fall short as @sivakumar_k asked :slight_smile:.

footnote

  1. The “container” is also a bit of dark magic that is’t super well explained in the Guides.
1 Like
10

I am not a programmer per se, but I have dabbled in Ember for a while … enough to create low to medium complexity CRUB apps.

I have to ask: if you are new to javascript and ember, why is it important for you to understand the order in which hooks are called on the route? Sure, you eventually need this information, but by then you kind of understand why you need it.

The training video provided by Embercasts is an excellent, well thought out and well presented walk-through of Ember through developing an application. Embermap provides great content, albeit more at the intermediate to advanced level.

11

New to Ember or not, I fully agree with @JimParsons that this list of hooks should be somewhere in the guides.

1 Like
12

@sivakumar_k The nesting of the controllers and routes. For example, if there’s a parent controller and some children controller, which value will be rendered… how the values get overwritten such stuff.

Actions can be handled in the route as well as the controller. In which situation we should go for what…things like these are something to think about at a noob level