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
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
Broccoli compiles our project and put it
in a directory where it can be served using
Express.js which is a
Express is not only used to served files but also to extend
ember-cli functionality using its
middlewares, an example of this
http-proxy which supports the
--proxy option, allowing us
to develop against our development backend.
Testing is powered by
Testem, we can always navigate to
http:/localhost:4200/tests and our test will be run automatically.
We can also run Testem in
--development mode with the
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
and has a different naming convention to
ember-cli makes us write our application using
ES6 Modules, then the code gets transpiled (compiled) to
AMD and finally it is loaded with
loader.js which is a minimalist
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
Broccoli plugins and plug it wherever you want in the build