HEY! I'm working on an awesome course on Golang and Ember.js skills that's live soon. Get early access to it here:

nerdyworm

Ember.js and Middleman

Middleman one of my favorite ways to build single page web applications these days. It is a simple static site generator that uses Sprokets. It is a really wonderful way to develop small applications.

This post is going to walk you through the process of setting up all the dependencies of an Ember.js App.

There are some builders and gems floating around these days. For the most part they fall behind Ember.js development too quickly. This ends up meaning that you spend more fixing dependencies than you do developing your app.

1. Install the middleman gem

Terminal
1
gem install middleman

2. Generate a middleman application

Terminal
1
middleman new blog

3. Add handlebars templates to the Gemfile

Gemfile
1
2
3
4
source 'https://rubygems.org'

gem "middleman", "~>3.0.13"
gem "middleman-ember", github: "nerdyworm/middleman-ember"
Terminal
1
bundle install

4. Configure the handlebars templates gem

config.rb
1
2
3
MiddlemanEmber::HandlebarsTemplate.options = {
  template_path: "app/templates"
}

This line of code tells our template compiler to strip out the template path from our file names. So any file with the path app/templates/template.hbs will be converted to template correctly.

5. JavaScript Structure

1
2
3
4
5
6
7
8
9
10
11
source/javascripts
├── app
│   └── templates
│       └── application.hbs
├── app.js
├── vendor
│   ├── ember-data-latest.js
│   ├── ember-latest.js
│   ├── handlebars.js
│   └── jquery.js
└── vendor.js

This is the project layout that I prefer to use. All application code gets tucked away in the app directory and all external libraries gets tucked away in vendor.

Also note that I build these two files separately. This is because the vendor file changes much less frequently than the app.js file. This means that the browser only has to update the vendor.js when we change a dependency, not when we change a line of application code.

6. Grab Dependencies

1
2
3
4
wget -O source/javascripts/vendor/jquery.js http://code.jquery.com/jquery-2.0.0.js
wget -O source/javascripts/vendor/handlebars.js http://builds.emberjs.com.s3.amazonaws.com/handlebars-1.0.0-rc.3.js
wget -O source/javascripts/vendor/ember-latest.js http://builds.emberjs.com.s3.amazonaws.com/ember-latest.js
wget -O source/javascripts/vendor/ember-data-latest.js http://builds.emberjs.com.s3.amazonaws.com/ember-data-latest.js

These four commands will get you the latest and greatest builds of Ember.js.

I personally like to work off the master branch. Bugs are getting fixed quickly these days, so it pays to be up to date.

7. Setup app.js and vendor.js

source/javascripts/app.js
1
2
3
4
//= require_self
//= require_tree ./app/

App = Ember.Application.create();

The require comments are part of sprokets. require_self includes the current file. require_tree includes all the files alphabetically in the directory specified.

source/javascripts/vendor.js
1
2
3
4
5
//= require ./vendor/jquery
//= require ./vendor/handlebars
//= require ./vendor/ember-latest
//= require ./vendor/ember-data-latest
//= require_tree ./vendor/

The vendor code needs to be loaded in a specific order.

8. Update layout.html.erb

source/layouts/layout.erb
1
<%= javascript_include_tag  "vendor", "app" %>

We need to include our vendor.js and app.js on the web page. Middleman makes this pretty easy by providing the javascript_include_tag helper.

9. Clear out index.html.erb

Empty the contents of source/index.htm.erb

10. Handlebars template application.hbs

source/javascripts/app/templates/application.hbs
1
<h1>Hello Ember.js</h1>

You did it! Checkout your masterpiece

Terminal
1
bundle exec middleman server

If you followed all the steps then you should see Hello Ember.js when you view localhost:4567.

When Ember.js has a stable release I will gladly turn this into a more full featured middleman template.

Comments