What is Ember?

A JavaScript Framework

Like Angular

• Modularity
• Reusability
• Data binding
• Easy Testing

Unlike Angular

• Highly opinionated
• Clearly structured data flow
• Strong commitment to maintainability

A Command Line Tool

• Provides application structure & generators
• No more fussing with Grunt/Gulp
• ES 6/7 JavaScript for free
• "Ember Addons"

What does it look like?

Using Ember.js

Data Flow

Router

// app/router.js

Router.map(function() {
  this.route('posts',  { path: '/'          }, function() {
    this.route('post', { path: '/posts/:id' });
    this.route('new',  { path: '/posts/new' });
  });
});

/**
 * URLs => Routes Created
 *
 * localhost:3000/            => posts
 *               /posts/1     => posts.post
 *               /posts/new   => posts.new
 */

Route

/**
 * URL: /posts/1
 *
 * File: app/routes/posts/post.js
 */

export default Ember.Route.extend({
  model(params) {
    return {
      id: 1,
      title: 'Hello, Code and Supply!'
    };
  }
});

Controller & Template

/**
 * File: app/controllers/posts/post.js
 */

export default Ember.Controller.extend({
  title: 'This is the title'
  model: null // set by the route
});

<!-- File: app/templates/posts/post.hbs -->

<h1>{{title}}</h1>
Id Number: {{model.id}}