Diving into Ember.js: Part 1

by Nastia ShaternikMay 27, 2013

This tutorial explains how to create a JavaScript app with Ember.js: build the skeleton, prepare vendor code, set up an entry point, etc.

This article is a part of the tutorial on Ember.js framework. The goal is developing of a JavaScript application: neither too complex, nor too trivial. We are going to build it up from scratch, without using bootstrapping tools. Feel free to look into the source code to feel the idea. Note: I’m going to create a JavaScript application in the context of the Padrino. Actually, only JavaScript files will matter by now. Let’s go!

Table of Contents

Creating the skeleton

If you develop this application in conjunction with Padrino, check out the
guides how to create a Padrino project. In addition, it makes sense to add asset pipeline: follow this how-to. And, I highly recommend you to write core JavaScript files in short-spoken CoffeeScript :).

So, assume we have javascripts directory eventually, and it’s currently our working directory.

Prepare vendor code

Now, we need to add necessary JavaScript files to make Ember work:

Handlebars is the default template language for Ember.js, but you can (and should) use Emblem.js over it. Emblem is yet another slim-like template language. Download these libraries and save them into the lib directory.

Set up the application entry point

Ok. Look at the application.js file. The so-called manifest (was brought with asset pipeline) is an application entry point. We’re going to include some libraries here:

//= require lib/jquery
//= require lib/handlebars
//= require lib/emblem
//= require lib/ember
//= require_self

Furthermore, you need to add the line at the end to bootstrap the application. App(or any other name) is the namespace of the application:

App = Ember.Application.create();

Create the application structure

So, as we do the MVC application, we should provide a specific structure, also keeping in mind Ember features. Based on that assertion, we need to create the next directories:

We also need to create a router.js file to describe application routes.

According to official docs on Ember known, when your application boots, the framework will look for some objects: App.ApplicationRoute, App.ApplicationController, and the application template. This means, we should initialize them with routes/application_routes.coffee.

App.ApplicationRoute = Ember.Route.extend()

controllers/application_controller.coffee

App.ApplicationController = Ember.Controller.extend()

Eventually, create a bare application.emblem file in the templates directory. Our next step is to create a file where we can list all these dependencies. Let’s name it as our namespace—app.js.

//= require_tree ./models
//= require_tree ./controllers
//= require_tree ./views
//= require_tree ./helpers
//= require_tree ./templates
//= require ./router
//= require_tree ./routes
//= require_self

Don’t forget to include this file into application.js. Its full view looks as shown below.

//= require lib/jquery
//= require lib/handlebars
//= require lib/emblem
//= require lib/ember
//= require_self
//= require app

App = Ember.Application.create();

Create static content

Now, we’ll try to print out the standard HELLO WRLD! message. So, we have an application template. It’s the so-called application layout. Let’s add our welcoming message to it as shown below.

h1 HELLO WRLD!

If we reload the browser page, we’ll see nothing, because all the templates have to be precompiled previously.

Template precompilation

Meet Grunt.js and, in particular, grunt-emblem. Please, watch this nice intro for Grunt, if you have no idea about it. You can also consult with theinstallation how-to. To read about grunt-emblem installation, please check out the project’s GitHub repo. You also need to learn how to use the grunt-contrib-watch plugin in order to add the watch task.

Since this article isn’t about Grunt, I’ll just list Gruntfile.coffee.

module.exports = (grunt) ->
  grunt.loadNpmTasks 'grunt-emblem'
  grunt.loadNpmTasks 'grunt-contrib-watch'

  grunt.initConfig
    emblem:
      compile:
        files:
          'templates.js': 'templates/*.emblem'

        options:
          root: 'templates/'
          dependencies:
            jquery: 'lib/jquery.js'
            ember: 'lib/ember.js'
            emblem: 'lib/emblem.js'
            handlebars: 'lib/handlebars.js'

    watch:
      files: ['templates/*.emblem']
      tasks: ['emblem']

Right now, we have two tasks: grunt emblem:compile and grunt watch.

The grunt emblem:compile command produces templates.js. So, we need to get back to app.js file and add templates.js to the requirements’ list.

You can start the grunt watch command in the terminal, and all your templates will be precompiled every time you’ve changed them.

Lastly, reload the page, and you should see the message.

You can guess that a lot of details were left behind the scenes. For details, browse through the commits history on GitHub. In the next parts, we’ll create a kind of CRUD application. Stay tuned.