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

Let's see some code!

Ember.js

By Alex LaFroscia

Ember.js

C&S Angular vs. Ember Showdown

  • 640
Loading comments...

More from Alex LaFroscia