Document 6563497

ember-cli 101
Adolfo Builes
This book is for sale at http://leanpub.com/ember-cli-101
This version was published on 2014-10-13
This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishing
process. Lean Publishing is the act of publishing an in-progress ebook using lightweight tools and
many iterations to get reader feedback, pivot until you have the right book and build traction once
you do.
©2014 Adolfo Builes
Contents
Why . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1
Anatomy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2
Why
Before getting into the specifics I’d like to explain why ember-cli was created and how it is different
to other tools.
The main objective of ember-cli is to reduce what we call glue code and allowing developers to focus
in what is most important for them: building their app.
Glue code are all those things which are not related to your application but that you require to have
in every project, for example, you need to test your code, you have to compile your assets, you need
to somehow serve your files in the browser, you need to interact with a back-end API, you might
have to use third party libraries, and so on. All those things can be automated and as it is done in
other frameworks, some conventions can be used to give you a common ground to start building
your applications.
Having a tool that does that for you is not just easing the process to start writing your app but is
also saving you time and money (you don’t have to think about problems which are already solved).
ember-cli aims to be exactly that tool, it tries to reduce the time you have to wait while your assets
compile using Broccoli¹, it has built-in support to start writing your tests with QUnit² and then
run them with Testem³, if you need to deploy you build with production environment then you get
fingerprint, compression, and some other features for free.
It also encourages you to write ES6(ECMAScript 6)⁴, having built-in support for modules, integrating
easily with other plugins allowing you to write your applications using other ES6 features.
Next time you are considering to waste your time wiring up all those things that I just mentioned,
consider ember-cli, it will make your life easier and you will get support from a lot of smart people
who is also using this tool.
¹https://github.com/broccolijs/broccoli
²http://qunitjs.com/
³https://github.com/airportyh/testem
⁴https://people.mozilla.org/∼jorendorff/es6-draft.html
Anatomy
In this chapter we will learn about ember-cli main components.
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.
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)⁶ to AMD⁷ 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, we’ll explore on next chapters its syntax and features.
Finally we need to cover Broccoli 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.
⁵http://expressjs.com/
⁶The transpiring process is done with es6-module-transpiler.
⁷To know more about AMD checkout their wiki