Creating your first Ember JS app w/ Apitools.

Ember-cli + Apitools == Instant App.

, in 27 July 2015

A couple of we reloaded the local Barcelona meetup.

For the occasion I wrote a quick application to show everyone how easy it easy to start developing with EmberJS. The idea was to recreate the feeling that first time Rails devs get when they start scaffolding. They type a few commands and everything works out of the box.

I also wanted to take the opportunity to stress the importance of thinking in terms of mircoapps for development agility and quick prototyping.

A microapp A microapp is small, self-contained, application focused on doing one thing and doing it well. Microapps can be integrated into more complex projects and use language agnostic APIs to communicate. Microapps speed up prototyping, innovation and therefore adoption of new technologies.

I decided to show off EmberJS capabilities with an app retrieving and displaying public Github events.

Not to get involved w any backend development I decided to use as middleware between my EmberJS app and Github API.


Our microapp in EmberJS is called Microgit. Microgit can:

To get started we first need to prepare our environment:

$ npm install -g ember-cli 

$ npm install -g bower

$ brew install watchman

$ npm install -g phantomjs

$ ember new microgit

Setting up is almost instant. We just, and create a service by using the Github premade example.

Once the service is setup on Apitools, we integrate this in our Routes in our EmberJS app. Routes in Ember are sometimes a complicated concept, especially if you come from Rails.

More specifically: - Routes represent application URLs - Routes represent RESTful resources - Routes represent app states

We siply have to add an index.js route to pull events from Apitools.

# app/routes/index.js

import Ember from "ember";

var IndexRoute = Ember.Route.extend({
  model: function(params) {
    return Ember.$.getJSON(
        + params.per_page);

export default IndexRoute;

We will then add a template to display the data we pull from the Github APIs. Ember.js uses the templating library to power your app’s user interface. Handlebars templates are just like regular HTML, but also give you the ability to embed expressions that change what is displayed.

# app/templates/index.hbs

        <strong>Github Event:</strong>
        <p>id: </p>
        <p>type: </p>
        <p>github user: </p>
          <a >
            <img style="width: 40px" > 
        <p>github repo: </p>
          <a >

And that’s it! You have your EmberJS microapp and can start visualising APIs traffic on

Repo for microgit is availiable on

If you are interested in microapps development and developing APIs w/ Rails you can checkout my book:

If you want to find out more about all you can do with check