4 Essential Ember Tools

Last reviewed on November 29, 2018 with Ember 3.5.1 Update to Ember Octane in progress!

Code is always the star in a web framework. Articles, guides, tutorials will always show us the code first.

When we invest in a technology, however, we also need to consider the quality of ancillary tools for an optimal development experience.

The Ember ecosystem has first-class tools to support our development work. What’s the ideal file layout and conventions? Best practices to handle dependencies? How to debug an app? Which backend to use for testing?

In this article we will explore four essential tools for Ember that will give us extraordinary value over time.

1. Ember CLI

Ember CLI is a vital command-line program, packed with features, that will assist us in many aspects of our life as an Ember developer. It would be quite hard to build an Ember app without Ember CLI.

Let’s have a deeper look.

Blueprints

Ember CLI promotes Ember’s philosophy of not reinventing the wheel. It encourages best practices, such as a convention-driven project structure.

Blueprints are like master templates, off which many kinds of files are generated.

For instance, an Ember CLI command to create a new Ember app will generate a directory skeleton and a bunch of configuration and entry-point files:

$ ember new blog

Other blueprints are available to create new routes, components, tests, adapters and so on.

A new component can be created like this:

$ ember generate component blog-post

Add-ons (which will see later) may also provide their own blueprints.

Asset pipeline

Ember CLI, based on Broccoli, is a classic asset pipeline. It will automatically compile source files such as Handlebars templates, Javascript/ES6 code, SCSS and more.

All of our client-side code will end up in three files: one HTML, one CSS and one Javascript. External libraries will be grouped in “vendor” CSS and JS files.

Dependencies and add-ons

Built on top of npm and Bower, Ember CLI will use package.json and bower.json to manage tooling and browser dependencies.

What’s more, Ember CLI is the cradle for Ember-specific npm modules. This flourishing add-on ecosystem today counts with close to 2500 third-party modules, from data libraries to jQuery plugins, making Ember one of the richest front-end frameworks out there.

Testing support

Testing is a first-class citizen in Ember. For this reason, Ember CLI ships with appropriate blueprints for acceptance, integration and unit tests.

For example, creating a Comment resource will include unit tests for the model and the route.

If we needed an acceptance test for submitting comments, this is how we’d generate it:

$ ember generate acceptance-test submit-comment

Ember’s default test framework is QUnit but others are supported through add-ons.

It ships with Test ‘em Scripts, a TDD-centric, CI-friendly test runner that works with node.js, PhantomJS and web browsers.

diagram

Backend proxy

Running an Ember CLI server will expose our Ember app at http://localhost:4200/ by default.

$ ember server

If our backend is running in a different process, we can easily forward requests to that port. For a Rails API listening at port 3000 we would do:

$ ember server --proxy http://localhost:3000

An additional cool feature is live reloading. Any time we update our Ember app, the browser will reload the freshest version.

Speaking of backends, do you have one already?

2. Ember CLI Mirage

A mock server behaves as a surrogate of our backend API. With Mirage, we can run a functional prototype of our app entirely in the client – perfect for proofs of concept and development. Even if we do have a backend API, it is indispensable for testing purposes.

Mirage supports data provision through scenarios, factories and fixtures. It also features shorthands to quickly set up mock API endpoints and responses, and serializers to format them.

When developing an API incrementally, Mirage can pass-through certain endpoints to our “real” backend server.

// app/mirage/config.js

export default function() {

  this.get('/api/users', function() {
    return {
      users: [
        { id: 1, name: 'Zelda' },
        { id: 2, name: 'Link' },
        { id: 3, name: 'Epona' },
      ]
    }
  });

}

Check out the Mirage documentation.

So, let’s say you created your new app and have your backend set up. Once you run into an issue, how do you go about it?

Do you need professional help with Ember or your back-end?

Leave me your name and e-mail and I will get in touch shortly:
You can also    Book session on Codementor

3. Ember Inspector

diagram

Available for Firefox and Chrome, Ember Inspector is a super handy extension to look into the state of a running Ember app. It offers a way to inspect:

  • the template hierarchy
  • the complete routes layout
  • Ember Data’s Store explorer
  • deprecations, performance, and much more
diagram

To examine a specific property, we can click on the $E link anywhere in the extension panels. $E is a variable that will appear in the console for us to use:

diagram

An Ember app is just another Javascript app, so regular debugging tools will work just fine!

diagram

If you run into an issue, you may need to share it…

4. Ember Twiddle

Ember Twiddle is a fun and easy way to develop and share small proofs of concept.

Unlike other fiddle tools, it is specifically designed for Ember. This means that the file layout follows Ember CLI conventions. Models, routes, components, helpers and other Ember building blocks can be easily generated.

In addition, specific library versions can be chosen right from the toolbar!

The backend is Github – all twiddles are saved as Github gists. These can be shared and embedded in a blog post.

diagram

See Ember Twiddle.

Community!

Not a “tool” per-se but Ember’s greatest asset is its helpful community. These are some of the best Q&A resources:

Enjoyed this article? Don't miss my next one!

Join other 3800+ smart developers.

(Time is our most valuable asset. I promise never to waste yours.)