CODEWITHSUNDEEP
javascriptember.jsember-dataember-cliember-cli-pods
Panther Coder
Panther Coder

Reputation: 1078

What happens when we first boot our app using Ember JS?

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.

Upvotes: 2

Views: 455

Answers (2)

acorncom
acorncom

Reputation: 5955

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! 😉

Upvotes: 1

sheriffderek
sheriffderek

Reputation: 9043

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. : )

Upvotes: 3

Related Questions