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 AMD2 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.**