A complete guide to Ember - Ember.js Tutorial

Wed Nov 30 2016

Paul Shan

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.
MVC structure

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.

ember-install-run And finally after all those hurdle, you will be able to see the ember project output on your browser. ember-running-browser

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


Today everyone knows the importance of a lightning-fast website and how the speed impacts the conversion rate of a business. Today, everyone wants the site to be a PWA so that the mobile users can have an app-like experience with the website because, for the majority of the merchants, the customers come through mobile devices.
Tue Apr 20 2021
Here we are going to see how you can manage backup and restore of Postgres database with docker.
Thu Sep 03 2020
Image sliders or carousels always have increased the UI attraction of websites and they are pretty useful for reflecting the major roles/products too. In case, I am having a website that sells tee-shirts,
Mon Apr 30 2018

About VoidCanvas

This blog was created out of hobby and talks mostly about technology, web development, JavaScript, NodeJS and related topics. Thank you for reading my blog.

Copyright 2022 - www.voidcanvas.com

Popular Articles

Authentication using Google's oAuth api with node.js

Thu Mar 10 2016

OAuth authentications are pretty popular now a days and another thing which is popular is JavaScript. This article shows how to plugin google’s oAuth api for authentication in your own node application.

CSS3 Loader Snippet Collection: (Part 2 - Squares)

Sat Mar 01 2014

This is a continuation of my CSS3 loader snippet collection series. I've provided spinning css3 animation loader in the part 1 of this series and here in part 2, I'm providing various square type loading