Andy Crum

An Introduction to Ember CLI

One of the benefits of Ember.js is the speed with which you can create new applications from scratch. But there are several potential issues that are not solved by Ember alone:

  1. Maintaining a modular architecture and smart file structure
  2. Building applications and compiling assets
  3. Managing external dependencies

So how do we solve these issues? Well, you can create a custom implementation if you’d like, but one way is to use Ember CLI. It’s a command line tool (hence the name) for creating Ember.js projects.

Ember CLI structure

Ember CLI uses ES6 Module syntax for organizing code. Using Square’s ES6 Module Transpiler, you can write code neatly organized in modules which compiles to JavaScript that the browser can interpret. To learn more about ES6 Modules, check out my Quick Introduction to ES6 Modules.

With Ember CLI’s custom resolver, it’s easy to structure your files in a way that makes sense. There is a well-defined structure (which you can read more about here), and using it gives the resolver all the information it needs to require your modules whenever they’re needed. This keeps you from polluting the global namespace with things like App.PostsController. Instead, you put your ES6-Modularized file at app/controllers/posts.js and you are ready to go.

Generators and Blueprints

Ember CLI comes with some built-in blueprints that you can use for easily generating files and directories. Need to create a new comments controller? Just type ember generate controller comments, and Ember CLI generates a file at app/controllers/comments.js, as well as a test file. The same goes for routes, models, and much more. To see all of the available generators, type ember help generate.

Addons

Addons in Ember CLI allow you to easily import vendor packages in a way that is [practically] guaranteed to work with Ember CLI. These are packages that have been written to work with Ember CLI’s modules, and usually add some kind of extra functionality to Ember. Some examples might be ember-cli-qunit, which adds QUnit to your Ember CLI application, or ember-cli-simple-auth, which includes a version of Ember Simple Auth made to play nicely with ES6 Modules. To see a full list of current Ember CLI addons, click here.

Broccoli

Ember CLI uses the ultra-fast Broccoli build tool for asset compilation, which you can access via the ember build and ember serve commands. Broccoli has support for compiling things like SASS and Coffeescript, so you are free to use those in your Ember CLI projects, as long as you include the plugins in the Brocfile.

Where to begin

First, you’ll want to install Ember CLI by running npm install -g ember-cli. Then, if you type ember into your Terminal, you’ll see all of the commands that Ember CLI provides.

To create a new project, type in ember new [projectname]. Once you’re in your project, Ember CLI also provides the ember serve and ember build commands to view your project.

Type ember serve and follow the instructions to view your project in the browser. You should see the ‘Welcome to Ember.js’ screen. Woo! You’re ready to go. Start generating some files, and you’re well on your way to having a very well-organized Ember CLI project.

Use it!

While still in heavy development, Ember CLI is already a very mature tool and is already used in many production environments today. Overall, Ember CLI is a great way to organize your code using ES6 Modules in a performant and convenient way, and it’s a great way to get started using Ember.js. On top of that, it’s fast, easy to use, and evolving and improving very quickly. Read the official documentation and try it out!

Do you have questions or comments about something I wrote here? Let me know at @andy_crum or andy@andycrum.com!