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

2

6

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:

Statis answered 12/2, 2014 at 12:6 Comment(1)
@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!Statis
N
5

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)

N answered 6/5, 2014 at 13:8 Comment(2)
I found your answer here because I too am having trouble figuring out how to leverage EAK. Should I take this answer as an indication that the original EAK is not well documented? Will I have a better understanding of how to plan out and build an app better by following your approach? Thanks.Goods
I think EAK is fairly well documented but it's a different kind of documentation. The blog series I wrote explains how you build EAK yourself from start to finish. It's intended to show the how/why of EAK and in the end the Gruntfile you build is nearly identical (in functionality) to what you get using EAK out of the box. Using my approach you end up with the same result, but having done it yourself you know how and where to tweak the build when needed.N
E
4

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.

Einsteinium answered 12/2, 2014 at 12:47 Comment(1)
Thanks for your response, it certainly helps. I guess that I will just have to delve into the internals of the resolver you mentioned to figure out where it looks for things, and the naming conventions expected.Statis

© 2022 - 2024 — McMap. All rights reserved.