Getting started with Ember.js in 2020
Tags: ember, javascript, tutorial, webdev
Published: 2020-04-13 14:35:06

---
title: Getting started with Ember.js in 2020
published: true
date: 2020-03-20 16:00:37 UTC
tags: ember,javascript,tutorial,webdev
canonical_url: https://blog.logrocket.com/getting-started-with-ember-js-in-2020/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/7f5qfm09w7d89pua1ljs.png
---
**Written by [Anjolaoluwa Adebayo-Oyetoro](https://blog.logrocket.com/author/anjolaoluwaadebayooyetoro/)**✏️

JavaScript, one of the core technologies that powers the web, has evolved over the years. Originally intended to be just a client-side scripting language, it has now grown to be a mature language and with its growth, we’ve seen the rise and fall of many libraries and frameworks over the years.

In this article, we will take a look at one of JavaScript’s oldest frontend frameworks, Ember.js. We will explore the core concepts and see how to get started using it.

## What is Ember?

Built by [Yehuda Katz](https://yehudakatz.com) and [Tom Dale](https://tomdale.net/about-me/) in 2011, Ember.js is an opensource JavaScript framework, it is popularly known as the framework for building ambitious applications and commonly referred to as the “together framework” due to its close-knit community. It is a framework best suited to building large scale client-side applications.

Its official [website](https://emberjs.com/) describes Ember as :

> A productive, battle-tested JavaScript framework for building modern web applications. It includes everything you need to build rich UIs that work on any device.

## Prerequisites

This tutorial assumes the reader has the following:

- [Node.js 10x](https://nodejs.org/en/download/) or higher
- [Yarn](https://yarnpkg.com/lang/en/) / [npm 5.2 or higher](https://www.npmjs.com/get-npm) installed on their PC
- Basic knowledge of JavaScript and how frameworks work

[![LogRocket Free Trial Banner](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/f760c-1gpjapknnuyhu8esa3z0jga.png?resize=1200%2C280&ssl=1)](https://logrocket.com/signup/)

## Basic usage

Install the ember-cli tool, this toolkit is for Ember.js that helps you bootstrap Ember projects on the fly.

Install the CLI tool with the following command:

```jsx
npm install -g ember-cli
```

Installing the Ember CLI package globally gives us access to the `ember` command in our terminal, the `ember new` command helps us create a new application.

Next, create an ember project with the `new` command:

```jsx
ember new ember-quickstart
```

This command will create a new directory called `ember-quickstart` and set up a new Ember application with all the necessary files and configurations for bootstrapping a project inside of it.

![](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2020/03/emberquickstart.png?resize=730%2C625&ssl=1)

Change directory into the application directory:

```jsx
cd ember-quickstart
```

start the development server:

```jsx
ember serve
```

You should get something similar to this running on [`http://localhost:4200`](http://localhost:8080/) after running the `ember serve` command.

![ember serve](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2020/03/emberserveproject.png?resize=730%2C530&ssl=1)

## Understanding the Ember directory structure and architecture

### Core concepts

The Ember.js is an MVC-based framework, it follows a uni-directional data flow pattern popularly know as Data Down Actions Up (DDAU) which was influenced by the [Flux architectural pattern](https://facebook.github.io/flux/docs/in-depth-overview/) created by [Facebook](https://facebook.github.io/flux/) and uses [Glimmer VM](https://github.com/glimmerjs/glimmer-vm) for rendering and updating the DOM, Glimmer is a **virtual machine** that compiles the handlebars templates code into bytecode herby delivering a faster experience., it parses the bytecode and renders the view to users.

Having an understanding of the following concepts in Ember is important.

### Models

Models are objects used to store and maintain data used in our application, The data can be retrieved with [Ember Data](https://guides.emberjs.com/release/models/) a library for robustly managing data in applications. The Ember Data library is included by default in our Ember CLI scaffold.

### Controllers

Controllers are wrappers around the model, they act as the intermediary between the views and models. They are used to retrieve, update and modify data in the model. Data requests to the models are performed by the controller.

### Templates

Templates represent the view layer in MVC, they are the interface used to render data to users. Templates are built with handlebars templating language.

### Routing

Routing is managed by the Router file, it maps a route to a route handler stored in the `/routes` folder, The router is responsible for rendering contents created using a template to the user.

### Components

Components are reusable collections of UI elements that contain markup, logic, and styling. They are the building block for an application.

### Directory structure

A new Ember project is structured similarly to this:

```jsx
├── app
│   ├── app.js
│   ├── components
│   ├── controllers
│   ├── helpers
│   ├── index.html
│   ├── models
│   ├── router.js
│   ├── routes
│   ├── styles
│   │   └── app.css
│   └── templates
│       └── application.hbs
├── config
│   ├── environment.js
│   ├── optional-features.json
│   └── targets.js
├── ember-cli-build.js
├── package.json
├── package-lock.json
├── public
│   └── robots.txt
├── README.md
├── testem.js
├── tests
│   ├── helpers
│   ├── index.html
│   ├── integration
│   ├── test-helper.js
│   └── unit
└── vendor
```

### Files and directories

Let’s take time to understand what the files and folder represent and how we can use them.

- `package.json` — contains information about your project like which dependencies are installed in your project and scripts that can be run
- `/app` — this folder houses the core code of your application. It contains critical parts of your application such as components, templates, models, routes, and styles. You’d mostly be working with files in this directory
  - `app.js` — this is the main application file. It is the apps entry point
  - `/templates` — this folder houses handlebars templates, these templates are compiled to `/dist` folder during build
  - `/controllers` — this folder contains your controllers, a controller is where you define data binding to variables on your templates
  - `/helpers` — this folder contains helper functions used in your handlebar templates. Helper functions are JavaScript functions that add additional functionalities to your templates beyond what is included out-of-the-box in Ember
  - `/index.html` — the `app/index.html` file lays the foundation for the Ember application. This is where the basic DOM structure is laid out, the title attribute is set, and stylesheet/JavaScript includes are done
  - `/models` — this directory is where your models are created, models are objects that represent the underlying data in your application. They are used to store and maintain data used in our application
  - `/router.js` — this file houses the applications route configurations. The routes defined here correspond to routes in `/routes` folder
  - `/routes` — this folder contains route handler files, which sets up what should happen when a route is loaded
- `ember-cli-build.js` — this file describes how Ember CLI should build our app
- `testem.js` — Ember CLI’s test runner [Testem](https://github.com/testem/testem) is configured in `testem.js`
- `/public` — this directory will be copied to the `dist` directory during build, use this for assets that don’t have a build step, such as images or fonts
- `/vendor` — this directory is where frontend dependencies (such as JavaScript or CSS) that are not managed by npm go
- `/tests` — The `tests` directory contains your automated tests, as well as various helpers to load and run the tests. [QUnit](http://qunitjs.com/) is the default testing framework for Ember
- `/config` — The `config` directory contains your application’s configuration files, environment, and browser build settings

## Why developers love Ember

Ember.js gets lots of love from developers who make use of it for several reasons, some include:

- **Convention over configuration** — one of the many reasons developers like Ember is the fact that it prioritizes convention over configuration. [Convention over configuration](https://en.wikipedia.org/wiki/Convention_over_configuration), championed by [David Heinemeier Hansson](https://en.wikipedia.org/wiki/David_Heinemeier_Hansson) (creator of Rails framework) is a software design paradigm that attempts to decrease the number of decisions that a developer using a framework is required to make without necessarily losing flexibility. This means developers don’t have to worry about the right thing to do or the right architecture as the framework makes these decisions
- **Tight-knit community** — the Ember community is also one of the things that is appealing for many with over 2,000 addons, the community also prioritize coming up with a standard way to do things instead of having people do things differently
- **It’s a Swiss army knife** — it comes pre-configured with almost all you need to get an application up and running
- **Stability without stagnation** — it has backwards compatibility
- **Early adoption** — the adoption of latest web standards and the latest JavaScript language feature

## The pros and cons of using Ember

### Pros

- Community
- Everything comes out of the box
- Detailed documentation and resources
- Early adoption of the JavaScript language features
- Glimmer VM makes compilation ridiculously fast

### Cons

- Size — it is quite large
- Learning curve — it has a steep learning curve
- Rigidity — no room for exploration
- Many tutorials are outdated

## Conclusion

In this article we’ve seen what Ember.js is, we’ve learned its core concepts and how to get started with using it.

The Ember.js framework has come a long way and has tons of guides and tutorials to help onboard new users of the framework, Check this [tutorial](https://www.notion.so/Coming-From-Another-Framework-742653afa2844a1c852476e69b28e728) made for people coming from other frameworks(it includes [Vue](https://www.notion.so/Ember-for-Vue-Developers-12570a04b02a453da73a6b8d14736c5e) and [React](https://www.notion.so/Ember-For-React-Developers-556a5d343cfb4f8dab1f4d631c05c95b)) also the [documentation](https://guides.emberjs.com/release/) is quite robust and explains concepts in-depth. The best part about Ember is the community – they have a [discord group](https://discordapp.com/invite/emberjs), their [discussion forum](https://discuss.emberjs.com/) is quite helpful, and the [Dev.to feed](https://dev.to/t/ember) is quite resourceful.

## Is it worth learning?

Except specifically needed for a job, I think it is quite unnecessary to learn it given its steep learning curve except obviously you’re doing so just for curiosity.

The low skill-demand rate also suggests that one might be better off using the newer and shiny libraries/framework such as React, Vue, or Svelte.

## Plug: [LogRocket](https://logrocket.com/signup/), a DVR for web apps
 
![LogRocket Dashboard Free Trial Banner](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/1d0cd-1s_rmyo6nbrasp-xtvbaxfg.png?resize=1200%2C677&ssl=1)
 
[LogRocket](https://logrocket.com/signup/) is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
 
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
 
[Try it for free](https://logrocket.com/signup/).
* * *

The post [Getting started with Ember.js in 2020](https://blog.logrocket.com/getting-started-with-ember-js-in-2020/) appeared first on [LogRocket Blog](https://blog.logrocket.com).