Ember.js framework. After working through the Getting Started Guide, I wanted to put my knowledge to the test and build my own app from scratch.

I decided that I wanted to do something similar in scope (no more than two controllers and one model), and something that would consume some public web API. After reading Balint Erdin’s Tutorial on Ember.js, I had an idea: wouldn’t it be neat if this thing could hook up to the Spotify Web API? And that’s how my idea was born.

"> Ember.js framework. After working through the Getting Started Guide, I wanted to put my knowledge to the test and build my own app from scratch.

I decided that I wanted to do something similar in scope (no more than two controllers and one model), and something that would consume some public web API. After reading Balint Erdin’s Tutorial on Ember.js, I had an idea: wouldn’t it be neat if this thing could hook up to the Spotify Web API? And that’s how my idea was born.

"> Ember.js framework. After working through the Getting Started Guide, I wanted to put my knowledge to the test and build my own app from scratch.

I decided that I wanted to do something similar in scope (no more than two controllers and one model), and something that would consume some public web API. After reading Balint Erdin’s Tutorial on Ember.js, I had an idea: wouldn’t it be neat if this thing could hook up to the Spotify Web API? And that’s how my idea was born.

" />
Christoph Wagner

Freelance Software Developer

Ember.js Tutorial, Part 1

06 March 2014

So I just started a new job and one of the first things I had to learn was the Ember.js framework. After working through the Getting Started Guide, I wanted to put my knowledge to the test and build my own app from scratch.

I decided that I wanted to do something similar in scope (no more than two controllers and one model), and something that would consume some public web API. After reading Balint Erdin’s Tutorial on Ember.js, I had an idea: wouldn’t it be neat if this thing could hook up to the Spotify Web API? And that’s how my idea was born.

Ember.js for n00bs

I’ve had almost 3 years of experience with Rails, and seeing that Yehuda Katz is one of the core members of the Ember.js team now, it comes to no surprise that both share a lot of similarities in concept and philosophy. However, this is JavaScript we’re dealing with here, so the devil is, of course, in the details.

To get started, it helps having an application skeleton ready to go, so we don’t have to do all the wiring by hand. Being spoiled with Rails’ generators for years, I was pleased to learn that something similar exists for JavaScript: enter Yeoman.

So, assuming you have a working installation of Node.js, go ahead and install Yeoman as follows:

npm install -g yo

Since yeoman is a generator framework, not a generator by itself, we also need to install a suitable generator for our project. We do this with the following command:

npm install -g generator-ember

Now we’re ready to start some fire!

First, we need to get our app skeleton started:

yo ember

This should generate the following directory tree for you:

├── app
│   ├── bower_components
│   ├── images
│   ├── scripts
│   │   ├── controllers
│   │   ├── models
│   │   ├── routes
│   │   └── views
│   ├── styles
│   │   └── fonts
│   └── templates
└── test

Now before I start, I don’t really like some of these names, specifically, bower_components and scripts. I prefer these to be named libs and js, respectively. Unfortunately this is not (yet?) configurable on the generator, so I manually renamed them and updated the appropriate references in .bowerrc, Gruntfile.js and app/index.html. The final directory layout should look like this:

├── app
│   ├── images
│   ├── js
│   │   ├── controllers
│   │   ├── models
│   │   ├── routes
│   │   └── views
│   ├── libs
│   ├── styles
│   │   └── fonts
│   └── templates
└── test

Now, to check that everything is working correctly, try running

grunt serve

This should open a browser window and you should see the generator’s default layout:

image

Check everything into git, and we’re done with the first part!