Wrapping my head around Ember App Kit -differences compared to working with plain Ember

6
votes

I have begun using ember app kit and heave read through its guides. However I having trouble wrapping my head around the differences between a regular app and this way that Ember App Kit structures the various bits using ES6 modules instead of stuffing everything into a global variable used as a namespace (e.g. App).

I found that this aspect is not very clearly explained:

  • How does Ember apply its magic in auto generating models, views, routes, and controllers?
  • Where does it expect to find them?
  • What naming conventions should I follow?
  • If I have created a template, route,or controller, and Ember does not find/ detect it, and just generates a default one in its place, how do I find out where it is looking; or otherwise debug in this situation?
  • How is any of this different in the standard Ember app development, as compared to development using Ember App Kit?

Much appreciated in advance!

EDIT (20140506):

These resources explain ES6 modules and EAK really well:

2
javascriptember.jsecmascript-6ember-app-kit
@ToranBillups: I really like how you deconstructed EAK into its constituent parts - it really helps to explain it very well; and I must say that was one helluva better answer than I was expecting to get. If you would like to re-post the link as an answer, I'll award you the solution. Cheers! – bguiz

2 Answers

5
votes

I actually did a blog series on this very topic just a few weeks ago. I start with a basic (globals) ember app and transform it over 8 different posts.

In the end, you have a Gruntfile w/ tasks just like EAK (but you've built it all by hand -one step at a time)

4
votes

Stefan Penner does a pretty good job of explaining modules on Ember App Kit's site, but to summarize:

Ember App Kit uses the ES6 Module Transpiler to convert all your app's Ember classes into AMD modules. In "normal" Ember development, you assign classes as properties of your app...

App.IndexController = Ember.Controller.extend(...);

But with EAK, you write your modules in ES6 syntax:

export default Ember.Controller.extend(...);

The transpiler will use the file name as the basis for its module name (assuming that it's saved at app/controllers/index.js:

define('controllers/index', Ember.Controller.extend(...));

Ember App Kit then uses a custom resolver to look up modules using AMD, rather than looking for them as camel cased properties of your App. (I don't have the rep to post another link, so google for ember-jj-abrams-resolver.)

If Ember looks for a module and doesn't find it, it behaves the same way it does outside of EAK.