Ember.js

C&S JS Framework Showdown

By Alex LaFroscia

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 (Defines URL Structure)

Route (Get Data from Server)

Controller (Provide content to page)

Template (Render dynamic HTML)

Example URL: www.mywebsite.com/posts/:id

Example File: app/routes/posts/post.js

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

Example File: app/templates/posts/post.js

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}}