Ember CLI

Emberopedia 2 – Detailed Description of Ember CLI

Welcome back to Emberopedia!!

In our previous post, we learned basic concepts of Ember. In this post, we will see what is there in Ember CLI.
Ember CLI(Command Line Interface) is a tool helps in ember development. Before CLI all ember scripting development happened in a single file named app.js ie, routes, controller, helper, etc., In a single file like below. This made the development so complex.

Later in CLI, all the respective components will be divided and kept in its respective folder.
Let’s see a simple example.

Before CLI :

app.js

var app = Ember.Application.create({});
app.Router.map(function(){
<Your router code goes here (router.js in CLI language)>;
});
app.<Routename>Route = Ember.Route.extend({
<Your route code goes here>
});
app.<Routename>Controller = Ember.Controller.extend({
<Controls here>
})

Like above snippet, everything written in a single file.

With help of Ember, CLI app.js has become lightweight (lol). This is not exactly true, ember build with CLI uses Bable to compile and puts it into a single file (Just said this in one line :P).

Project Structure

When you have created a new project with Ember CLI, the app structure is laid out in the default way.

Folders:

|–app/ # Core Ember functionality
|–bower_components/ # bower dependencies
|–config/ # Configurations
|–dist/ # Build output
|–node_modules/ # npm dependencies
|–public/ # Files, images, etc., Used in app
|–tests/ # Test framework
|–tmp/ # temp files
|–vendor/ # third party is files used

Files:

bower.json /# bower dependencies
ember-cli-build.js /# file responsible for build
package.json /# node dependencies
README.md
testem.js

The app directory is where the application code is written. In here you will have all of your routes, models, templates, and components that create the core parts of the app. All of the JS files in this directory are automatically compiled through the ES6 module transpiler Babel and concatenated into a single file (as like app.js meant early).

This makes life simple with ember development !!!!