Dependency management

Let's look at dependency management and how we can use it in our Ember projects.

How to do it...

Bower is used for dependency management for Ember CLI. Bower is a frontend tool that is used to help fetch and install packages that you might need.

1. The bower.json file is located in the root folder of your project. It contains all the dependencies. Let's say that we want to install the Bootstrap library:

   $ bower install bootstrap --save
   

   This command will install bootstrap in the bower_components folder and save the package information in the bower.json file.

   Tip

   Ember add-ons

   Another popular way of adding third-party libraries to Ember is using add-ons or addons as you sometimes see it. An add-on is Ember's way of sharing libraries between applications. There are well over a thousand of them available.

   You can install add-ons using Ember CLI. For example, to install Bootstrap, you'd type this on the command line in the project directory:

   $ ember install ember-bootstrap

   You can easily find a list of add-ons at these websites:

   http://www.emberobserver.com

   http://www.emberaddons.com

   This will be discussed in more detail in the Working and creating add-ons recipe in Chapter 11, Real-Time Web Applications.

2. If, for some reason, you need to reinstall your dependencies, you can run the install command by itself:

   $ bower install
   

   This will install all dependencies that are listed in the bower.json file.

The app.import code

Ember CLI allows you to load Asynchronous Module Definition (AMD) and non-AMD assets. It's a way of defining code modules and their dependencies.

1. To load a non-AMD asset, you'll need to import it using the ember-cli-build.js file:

   …
   app.import('bower_components/moment/moment.js');

2. This is useful as you can use Bower to install components, and then use the app.import AMD so that it's available in the program. You'll need to consult the package specification to see how to use it.

   Tip

   Tip on JSHint

   JSHint is a community-driven tool that detects errors and potential problems with JavaScript code. It's built-in in Ember CLI. When using non-AMD assets, you may get errors with JSHint if you have global variables. To fix this, add /* global MY_GLOBAL */ at the top of your module page. In the moment example, it would look like /* global moment */.

3. AMD assets are imported in a similar way. You add the path in the first argument and a list of exports and modules in the second:

   app.import('bower_components/ic-ajax/dist/named-amd/main.js', {
     exports: {
       'ic-ajax': [
         'default',
         'defineFixture',
         'lookupFixture',
         'raw',
         'request',
       ]
     }
   });

4. To use this asset in your application, you can import it as follows:

   import { raw as icAjaxRaw } from 'ic-ajax';;

How it works...

Dependency management is done via Bower. After the dependency is installed, the Broccoli library is called on to add the assets to the pipeline. Both these tools are written in node and are built-in in Ember CLI.