An Introduction to Ember CLIMarch 21, 2015
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:
- Maintaining a modular architecture and smart file structure
- Building applications and compiling assets
- 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
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 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.
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.
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.
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!