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
© Copyright 2024 Paperzz
