ember-cli Anatomy
Every new developer coming to Ember.js is probably using ember-cli, but I’ve noticed that most of the time they are not fully aware of ember-cli’s main components and how they interact together so I took this from my ember-cli-101 book where I try to explain it.
ember-cli
is a Node.js
command line application sitting on top of
other libraries.
Its main component is Broccoli, which allows us to have fast builds,
Broccoli
is a builder designed with the goal of keeping builds as
fast as possible (currently there are some issues on Mac which slows down the build time but there is work in progress to fix it).
When we run ember server
, Broccoli
compiles our project and put it
in a directory where it can be served using
Express.js
which is a Node.js
library.
Express
is not only used to served files but also to extend
ember-cli
functionality using its middlewares
, an example of this
is the http-proxy
which supports the --proxy
option, allowing us
to develop against our development backend.
Testing is powered by QUnit
and Testem
, we can always navigate to
http:/localhost:4200/tests
and our test will be run automatically.
We can also run Testem in CI
or --development
mode with the ember
test
command. Currently there is just support for QUnit
through an
ember-cli add-on
, we will probably see support for other testing
frameworks and runners as people get familiar with the add-on system.
ember-cli
uses it’s own
resolver
and has a different naming convention to Ember.js's
defaults.
ember-cli
makes us write our application using ES6 Modules
, then the code gets transpiled (compiled)1 to AMD
2 and finally it is loaded with loader.js
which is a minimalist AMD
loader.
If you want to use coffee script you can use it but it is encouraged to use plain JS and ES6 where possible.
Finally we need to cover Broccoli
’s plugins because without them,
Broccoli
wouldn’t be as helpful. Every transformation that your
files are going through, are done with a Broccoli
plugin, e.g.
transpiling, minifying, finger-printing, uglifying. You can have your
own Broccoli
plugins and plug it wherever you want in the build
process.
** Learn how to write apps with Ember.js and ember-cli with my ember-cli-101 book.**