Why are html and templates separated?


In Ember.js you have this structure where javascript is either in routes, controllers or components, and templates is in the quite separated templates folder or the templates/components.

I find this a bit of a nightmare when you are working in GUI editors like Visual Studio Code and Notepad and a few others because I seem to spend a lot of time scrolling a folder structure looking for the file I want to edit.

I asked a colleague who uses Angular whether he found it awkward but he pointed out that Angular packages up the components into one folder so that you have the javascript and template in the same sub-folders…well jell!

Could Ember.js not take on this structure instead? Does anyone have any solution for this other than using split views in the text editor?


The Module Unification RFC proposed exactly that! It was accepted quite a while ago, and has been slowly making its way towards readiness. It is included in the 2018 Roadmap.

There is still a bit of work to do (some of it includes features needing an RFC), but a number of straightforward app scenarios already work well.


If you’re curious what an ember app can look like with co-located files, check out https://gitlab.com/NullVoxPopuli/emberclear/

It’s the source for https://emberclear.io and uses all the upcoming and current but not yet documented features :slight_smile:


Mean while, if you are not into experimentation, or you can’t get something to work, there is an intermediate solution called PODs. You can do something like ember g component --pod my-component and you’ll get the following: