Welcome to

Big thanks to..

for hosting us

This is a place for us to learn together.

Build a Microapp w/ EmberJS and Apitools

Why talking about microapps

A microapp is small, self-contained, focused on doing one thing and doing it well.
Microapps use language agnostic APIs to communicate.
Microapps speed up adoption of new technologies.

Our microgit app

Retrieves public Github events
Uses Apitools as middleware to talk to ext APIs
Uses EmberJS as frontend framework

Let's get started

npm install -g ember-cli 

npm install -g bower

brew install watchman

npm install -g phantomjs

ember new my-new-app

Prepare your env

Integrate an external service

Setup the backend or better a middleman

Touching routes

Routes represent application URLs
Routes represent RESTful resources
Routes represent app states

# app/routes/index.js

import Ember from "ember";

var IndexRoute = Ember.Route.extend({
  model: function(params) {
    return Ember.$.getJSON(
        "https://github7ad43e39-bd5086abac4b.my.apitools.com/events?per_page=" 
        + params.per_page);
  }
});

export default IndexRoute;

Adding templates

Ember.js uses the Handlebars 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

{{#each event in model}}
    <li>
      <div>
        <strong>Github Event:</strong>
        <p>id: {{event.id}}</p>
        <p>type: {{event.type}}</p>
        <p>github user: </p>
        <p>
          <a {{bindAttr href=event.actor.url}}>
            <img style="width: 40px" {{bindAttr src=event.actor.avatar_url}}> 
            {{event.actor.login}}
          </a>
        </p>
        <p>github repo: </p>
        <p>
          <a {{bindAttr href=event.repo.url}}>
            {{event.repo.name}}
          </a>
        </p>
      </div>
    </li>
{{/each}}