Intro to Ember.js with “Hello World” and To-Do List App

6 min readJul 30, 2021

What is Ember.js?

Ember is a client-side JavaScript framework used to build web applications that is “productive and battle-tested, for adventurous developers” (according to emberjs.com). Ember comes with the helpful Ember CLI (Command Line Interface) that provides ways to create, build, test, serve files, and generate code scaffolding. Ember applications also include a built-in development environment, built-in routing solution, Handlebars templating library, hot-reloading, and a strong commitment to stability and upgrades. Many large companies use Ember.js including Apple, Microsoft, Netflix, LinkedIn, Square, Heroku, and Intercom.

Why Ember.js?

Ember predates most of the current popular options for client-side frameworks, including React and Vue. Ember touts productivity as its main advantage — it is valued for its simplicity and reliability by reducing accidental complexity, rather than endlessly innovating into a sea of complexity like some of its contemporaries (looking at you, React). The community is also much less fragmented than say, the React (sorry!) community — although much smaller. Ember.js is by no means a one-stop solution for all web development. In fact, if you are creating a content-centric, static website, your best bet is probably something totally different. Ember excels when being used for behavior-centric web applications i.e. Facebook or LinkedIn.

Getting Started with Ember.js

Let’s get our hands a little dirty now and spin up an Ember.js application!

Prerequisite - you will need to have Node.js and NPM installed on your local machine.

First, let’s do a global install of the Ember CLI, an essential tool for developing with the framework. In your terminal:

$ npm install -g ember-cli

Now that we have the CLI installed, we will have access to the ember command. Let’s use ember to create a new app:

$ ember new my-ember-app --lang en

This will create a new directory with a boilerplate ember application. This starter package comes with many things including a development server, JavaScript and CSS modification, template compilation, and Babel.

Let’s navigate into our new app and start the development server to ensure everything is in working order (I’ll be using VS Code as my editor in this example):

$ cd my-ember-app
$ code .
$ npm start

Once the build is complete, navigate to http://localhost:4200 in your browser and you should see an Ember app welcome page:

Press control+c to stop the server.

Templates, Routes, and Components

A brief summary of the folders/files found in an Ember app:

The templates folder will contain your HTML templates. The files within are written in the Handlebars templating library (hence the .hbs file name).

Each file in the routes folder will contain a model for a specific route that can asynchronously fetch data to be loaded onto the screen.

The components folder will contain any functions that react to user actions like a click.

Hello World

In your editor, open app/templates/application.hbs , delete everything in the file and add <h1>Hello World</h1> :

Now spin up the development server again with $ npm start , navigate to http://localhost:4200 in your browser, and you should see this:

Wow, this is a great app.

Creating a To-Do List in Ember

Let’s bump it up a notch and create a somewhat useful to-do list application. I mean, would this really be an intro tutorial without one?

Create the To-Do Route

Let’s first create a route for our to-dos:

$ ember generate route todo

Now let’s add in some seed data. Navigate to the newly created app/routes/todo.js file and add the following model that returns some made-up (although, you should call your mom!) to-dos:

Displaying the To-Dos

To display our new to-dos to the browser, navigate to app/templates/todo.hbs , delete everything in the file and add this:

Now start the server again with $ npm start and navigate to http://localhost:4200/todos and you should see the to-dos (as well as our previous Hello World):

Creating a Todo List Component

We should actually be using a component to display and add our to-dos, so let’s create one now:

$ ember generate component todo-list

Now let’s move our <ol></ol> that displays the list of to-dos from todo.hbs and put it into our new todo-list.hbs component:

Add To-Dos Text Field and Button

Now let’s add an HTML form with a text input and submit button for adding new to-dos above our list of todos:

Let’s now add our new todo-list.hbs component to the todo.hbs template, so we can display it in the browser:

If you run $ npm start and navigate to http://localhost:4200/todos you will notice our new text input and Add To-Do button are showing up, but not our to-dos. This is because our TodoList component doesn’t have access to our todo model in the routes folder. We will need to pass the model to the TodoList component like so:

The to-dos are now being correctly displayed in the browser.

Adding To-Dos

We need to create a JavaScript file to hold our logic for the form we just created in the TodoList component, so let’s do that now. Add the file todo-list.js to app/components (Ember may have already created this file for you when it generated your TodoList component):

The logic that will go in the new file is a bit complicated, so I suggest reading up on it in the Ember docs here. The finished todo-list.js file should look like this: