2

I am new to ember and I have been through the Ember JS Documentation for a while and suddenly struck with two questions. I even surfed on the Internet for hours and barely could find a solution. So, here are they:

Question 1:

Quoting Ember Documentation,

The application is entered when your app first boots up. Just like any other route, it will load an application template by default.

application in the above quote represents the application route which according to the doc is loadedwhen app boots and renders the application.hbs. Where is the application route situated?

Question 2:

Where exactly in the control flow does the router.js file get loaded? Before application route or after application route?

Request:

Also I would be thankful if anyone could assist me with the complete flow of the Ember JS (starting when the user enters localhost:4200).

Thanks.

Panther Coder
  • 1,058
  • 1
  • 16
  • 43

2 Answers2

3

I'll try and take a stab at this... but I'm also confused by some of this stuff.

  1. The Ember resolver does a lot of the work based on naming conventions. By default - an Ember install has a few things already created --- but on build / or some time in the process - it will create controllers and routes that may be implied but that you didn't create. For example... there isn't an application.js route in your folder structure... but Ember creates it in the mystery zone behind the scenes. This is probably so that you don't need to think about surface area - if you're not using it explicitly. Just like that 'route' - it will create a controller too. The route is 'entered' before the template is rendered - because it'll need to define things like the model - which by the way / is just a property that is set on the possibly non-existant (to your knowledge) controller of the same name. (See route lifecycle hooks) Other implicit routes are /index /error /loading etc - and they are all there - for every route - even though you can't see the files. If you want to use them, you'll need to explicitly create them(use the CLI).
  2. I can only imagine that the router is loaded well before you enter any route... otherwise, it wouldn't know how to resolve things ?- gotchas... try and create an application route - and actually add it to the router. Things will break. But the bright side is that you don't have to type a route that is there no matter what maybe?
  3. I'm not sure of any more specifics (yet) - but I think of it is a thread that moves through little eyelets and picks up more data in each scope depending on the models and attributes.

Here are a few things to chew on:

dockyard.com/blog/2016/09/14/understanding-ember-s-resolver

EmberConf 2017: An Animated Guide to Ember Internals by Gavin Joyce

Also, Mike North's course on frontend masters goes into this stuff in detail. https://frontendmasters.com/workshops/ember/ - but you aren't just learning Ember... you're learning everything that ember is made from like es2015 - and there isn't a ton of empathy in that zone

If you can get past the initial mysteries - Ember is super fun. : )

sheriffderek
  • 8,848
  • 6
  • 43
  • 70
  • So, I think it works like this: localhost:4200 --> /index.html --> application.hbs is placed in `{{content-for "head"}}` of index.html --> and then router loads the route as per the URL. Is this correct? – Panther Coder Feb 21 '18 at 05:12
  • I think that content-for-head is where addons put scripts and css ``- and content-for-footer just above the `` like `wp_head()` in wordpress etc. - or just best practices in HTML basically. / I think that application.hbs just kinda goes in the middle of the body somewhere. – sheriffderek Feb 21 '18 at 19:11
  • But when I comment out `content for head`, application.hbs failed to render. – Panther Coder Feb 21 '18 at 19:13
  • "The app/index.html file lays the foundation for your application. This is where the basic DOM structure is laid out, the title attribute is set and stylesheet/javascript includes are done. In addition to this, app/index.html includes multiple hooks - {{content-for 'head'}} and {{content-for 'body'}} - that can be used by Addons to inject content into your application’s head or body. These hooks need to be left in place for your application to function properly, but they can be safely ignored unless you are working directly with a particular addon." – sheriffderek Feb 21 '18 at 19:18
  • So, the template is likely loaded into `{{content-for 'body'}}` – sheriffderek Feb 21 '18 at 19:18
  • Just leave as much of the index.html alone as you can for upgrades... you don't really want anything unique in there - if you can get away with it. – sheriffderek Feb 21 '18 at 19:19
1

Looks like your main questions were taken care of here, will see if I can answer your main app flow question.

Ember runs a series of steps to turn your app “on”:

  • application turned on (runs initializers)
  • application instance turns on (run instance initializers)
  • app instance loads router.js file
  • router loads application route / controller
  • router loads specified route / controller (or falls back to index route/controller if none is specified)

Some of this is outlined in the diagram shown on this page (https://guides.emberjs.com/v3.0.0/getting-started/core-concepts/) but looks we could improve it to make things clearer. If you have the time/interest, would love to have some help updating the image!

acorncom
  • 5,975
  • 1
  • 19
  • 31