I’m using Ember 2.10.0 here

It has been years I wrote my last article on Ember.js. Since then lot of things have changed. Ember cli came into the picture, ES6 was released, htmlbars replaced the handlebars and many more. Thus I decided to rewrite the entire series of Ember tutorial.

JavaScript as a language

Before jumping into Ember related things, let me tell a bit about JavaScript itself. If you are already familiar with JavaScript, the language; you can skip this paragraph.
There are so much of myths in the market regarding JavaScript. But still, JavaScript is one of the most popular programming languages used in the developers community. Being asynchronous by nature, JavaScript took an advantage over thread pool driven languages. The language was used mostly in browsers previously; but now with the rise of node.js, JavaScript can be found everywhere. Be in browser, server, task runner and many other places. Knowing the behavior of node.js may help you knowing the facts of JavaScript.

A bit on MVC architecture

As you are here to deal with Ember.js, chances are more that you are familiar with MVC. Still let me touch it a bit.
MVC is an architecture first introduced by Trygve Reenskaug into Smalltalk-76 in 1976. Since then it became a widely used architectural pattern in server side. And since the rise of the new era of JavaScript, MVC was brought to client side as well. However lot of people like me has doubts on client side MVC being the actual MVC.
In an MVC architecture, under a particular route, there is a Controller, which holds a Model in it to store data and displays those data on View, which is the presentation layer.

Introduction to Ember.js

Ember is an JavaScript MVC framework developed by Yehuda Katz and Tom Dale. It has been always one of the most popular frameworks and with its cli, it got a major boost in popularity. There are plenty of things which you will like about Ember. Some of them are given below.

Why Ember.js?

• Convention over configuration. It reduces the configuration related codes like anything.
• Much better data change observing mechanism than angular.js like frameworks.
• A priority based run loop, who decides which task to run first.
• Built in architecture (with ember cli) has its own advantages. Easier to shuffle developers across teams.
• ES6 syntaxes. Modern technology.
• Huge community. Ember even has npm like emberobserver.
• There are a lot more other reasons.

Ember cli

Ember projects can be scaffolded using ember cli which is a all in one solution to scaffold, develop, run, build and test your application. Ember cli gives you a predefined architecture (just like voidcanvas cli provides for node.js) which is why it’s easier to be with the best practices and also to on board new people to the team. And reducing the pain of creating new files and writing the initial lines is a plus.

Installation and scaffolding

Installation is easy if you are familiar with node.js and npm. If you are not, please install node and npm in your computer and open your command prompt or terminal. Now use the commands below to install ember cli.

Install ember-cli

npm install -g [email protected]

Remember you need node 0.12 or higher and npm 2.7 or higher.

After completing the installation of ember cli, you will get the command ember to use anywhere in your computer (as you have globally installed it with -g).

Install watchman

If you are on Linux or Mac, you can install the node module watchman, to make your file change detection faster. This is an optional step.

npm install -g watchman

Create the application

So now, when the cli is ready, it’s time to scaffold the project. Create a folder in your computer and navigate to that via your terminal or cmd.
Now run the following command to scaffold a new project.

ember new yourProjectName

yourProjectName can be anything. After running this command, ember will create a folder named yourProjectName and inside that it will scaffold the entire ember project.

Run your ember project

To run it, navigate inside the yourProjectName folder and hit the following command.

ember server

Now you will see the project is being built and will be served in a particular port. Generally the port is 4200.

Next Part

In the next part of this series of ember tutorial with ember cli 2.10.0, we will give you details of the architecture of the application scaffolded by ember cli. You can also find below all our article links of this series of Ember.js tutorial.

All tutorials in this series

• Scaffolding & understanding an ember application
• Ember.js template syntaxes and helpers
• Ember objects, computed properties & observers
• A brief on routers of Ember.js
• Components, a very important concept for UI
• Ember data & how you can make the application really simple, using it
• Unit, Integration & Acceptance testing in Ember.js