Useful Links
Show All Blog Articles

ToDo MVC with Ember CLI (part 1)

Fri, 18 Jul 2014

Rewrite of the ToDo MVC application from Ember.js guides, following Ember CLI rules.

Ember CLI is the Ember command line utility for ambitious web applications and the recommended way to write an Ember application as it provides a good project structure and tools for building and keeping dependencies up to date.

Getting familiar with the application

To familiarize with the application and what we want to achieve, please read Planning the Application section from the Ember.js Getting Started guide and play with the final app at ToDo MVC.

When ready, come back here and we'll go ahead on a slightly different route of implementation using Ember CLI.

Installing Ember CLI

In order to install Ember CLI, we need to make sure we have Node.js installed.

node -v

Mac users prefer to get Node via homebrew package management.

brew install node

For other platforms, follow instructions from Node.js website. It's really simple to set it up.

At this point we are ready to install Ember CLI and its dependencies.

npm install -g phantomjs
npm install -g ember-cli
npm install -g bower

PhantomJS is used to run our integration tests, Ember CLI is our command line runner and bower is the package manager used by Ember CLI for managing front-end dependencies. -g flag is used to make these commands globally available at the command line.

Getting the Ember Inspector

Though not mandatory or dependency of Ember / Ember CLI, Ember Inspector is an essential tool for developing in Ember. Go to the Ember Inspector Github site and install one of the extensions for Chrome, Firefox or Opera browsers.

Ember Inspector

 

Creating the Application Structure

First step is to bootstrap our Ember CLI application, todo-ember.

ember new todo-ember

Try it out by cd into the directory and start the app with ember serve:

cd todo-ember
ember serve

Let's open a new tab in the browser and type in the URL http://localhost:4200 or just click on the preceding link! We should be prompted by Welcome to Ember.js message.

Time to hack in.

Just a note, it is advisable to leave ember serve command running. It will watch for any changes in our code, automatically build and refresh our app. Cool, isn't it?

Check Creating the Application Structure section code.

Creating a Mockup

The entry point that contains the application template, the core body of our application, is in app/templates/application.hbs. The new extension .hbs denotes the fact that the file is an handlebar template. More exactly, the application template contains everything in between <body> tags, of a static html page.

Let's feed our own mockup into the existing template:

The static mockup from the original example comes along with a stylesheet and a background image. In Ember CLI stylesheets are placed in app/styles folder. Let's replace the content of the app.css with the content of the provided stylesheet file. All the custom css files will be concatenated into a single file and served at the address http://localhost:4200/assets/todo-ember.css.

All images & other asset files are located into the public folder which is served directly onto the root (/) URL. Thus, place background image into public/assets/bg.png. If the background image is not rendered into the browser, you may also have to stop ember serve (use CTRL+C) and start it again. Since Live Reload is implemented into Ember CLI, there are only few cases when you need to restart the development server.

Here is a mockup screenshot:

Todo Mockup

Check Creating a Mockup section code.

The First Route and Template

I have presented before the Ember Inspector. Let's have a second look:

Ember inspector - a second look

In the Routes tab we can see that Ember gives us for free a set of routes and templates.

When the application starts, the application template renders into a <div> like (pay attention to the highlighted line):

The application div

The header, footer or any other global decorative elements should ideally stay into the application template. These will remain unchanged during the life span of our application. Additionally, we should have at least one {{outlet}}: a placeholder that the router will fill in with the appropriate template, based on the current URL.

Back to the Ember Inspector, we can find out that Ember gives us an IndexRoute route, an IndexController controller and an index template, all linked to / URL. Given the principles explained in the above paragraph, let's move the entire <section id="todoapp"> ... </section> to the index template (app/templates/index.hbs). Ember CLI uses a naming convention for the template files by appending the extension .hbs or .handlebars to the template name and stores them into app/templates folder.

Below is the remaining app/templates/application.hbs, with {{outlet}} placed in the proper place:

You can see how effective Ember can be if conventions are respected.

In the Ember Guide example, Adding the First Route and Template, you may notice that a resource has been added to the router which corresponds to / URL and the template name is todos.

Back into our code, let's also change the router to use todos resource and create its corresponding template. This is a good exercise to also understand the router before we move on to nested routes in a future installment.

The First Route and Template section code.

Generating a Resource

Ember CLI comes along with a set of generators. For a complete list type in the following command:

ember help generate
version: 0.0.39
Requested ember-cli commands:

ember generate <blueprint> <options...>
  Generates new code from blueprints.
  aliases: g
  --dry-run (Default: false)
  --verbose (Default: false)

  Available blueprints:
    ember-cli:
      acceptance-test
      adapter
      api-stub
      app
      blueprint
      component
      controller
      helper
      initializer
      mixin
      model
      resource
      route
      serializer
      service
      template
      transform
      util
      view

Generators may come in handy as they generate all required files for a particular action and save us of some of the boilerplate. In the case of this tutorial, I feel the generators introduce far too many concepts at once and I prefer creating all these files manually as we progress.

Just to have a taste of how generators work, let's take a look at an example of generating a resource. If you follow along with code, please skip the ember generate resource todos command below.

ember generate resource todos
version: 0.0.39
installing
installing
  create app/models/todo.js
  create tests/unit/models/todo-test.js
  create app/routes/todos.js
  create app/templates/todos.hbs
  create tests/unit/routes/todos-test.js

Ember's terminology might be a bit confusing at first.

We have router, resources and routes.

The easy way to think of the three terms is: router contains resources and routes. Resources are nouns (examples: person, people) and routes are verbs/actions (examples: create, update, destroy).

A generated resource includes files for models, routes & templates, whilst a generated route contains all of the above except the model files.

Manually Creating the Route and Template

Back to coding, let's create the files manually one by one, and walk through their content in order to have a better understanding.

Inside our app/routes.js file let's add our resource:

This will add todos namespace to our router and map it to the / URL. Do you still have ember serve running on the command line? If not, start it again, and check http://localhost:4200. Nothing will appear but the footer. If we take a look at the Ember Inspector, we shall see the following message:

Could not find "todos" template or view. Nothing will be rendered Object {fullName: "template:todos"}

It is pretty clear that the template is missing. Initially the template was called index (app/templates/index.hbs) and it was corresponding to the default route indexRoute. Now, the route is todosRoute and the corresponding template is todos (app/templates/todos.hbs).

What we need to do now, is renaming original index.hbs to todos.hbs. If you are the command line type, run following command from the root of our project:

mv app/templates/index.hbs app/templates/todos.hbs

Back to our http://localhost:4200 and everything should work again as before.

The Mannually Creating the Route & Template section code.

In part 2, we'll go ahead with the tutorial and take a look at the models, Ember CLI way. Till then, please share your opinion and things you would like to know about Ember.

Useful Links and References

For a better understanding of the content of this article, I strongly recommend reading further the entire Routing section from the Ember.js guides.

comments powered by Disqus