Intro – Ember.js – Ember Data

Ember.js

Overview

Terminology

Router

Route

Model

Controller

Template

Views

Components

Overview

Ember.js is a JavaScript web application framework based on the model-view-controller (MVC) pattern.

It includes a rich object model, two-way data binding, computed properties, auto-updating templates, and a router for managing application state.

Terminology

Router

Defines available Routes.

"This URL loads this Route"

App.Router.map(function() {
  // AboutRoute
  this.route("about", { path: "/about" });
  // PostsRoute
  this.resource("posts", function() {
    // PostsNewRoute
    this.route("new");
    // PostsEditRoute
    this.route("edit", { path: ":id"});
   });
});

Route

Finds the Model and sets up the Controller

Handles actions

"Find Post with URL id parameter"

"Handles save action"

App.PostsRoute = Ember.Route.extend({
  model: function(params) {
    return this.store.find('post', params.id);
  }
});

Model

App.Post = DS.Model.extend({
  title:     DS.attr('string'),
  body:      DS.attr('string'),
  author:    DS.attr('string'),
  published: DS.attr('boolean'),
  date:      DS.attr('date')
});

Controller

Maps Model to Template, Controls App/Template State.

E.g. How many published posts listed?

App.PostsController = Ember.ArrayController.extend({
  numPublished: function() {
    var publishedPosts = this.filter(function(post) {
      return post.get('published') > 0;
    });
    return publishedPosts.get('length');
  }.property('@each.published')
});

Two main base controllers: Array and Object.

Template

Controls layout and display of Model & Controller data

(HTML/Handlebars)

<h1>Posts</h1>
<ul>
  {{#each}}
    <li>{{title}} by {{author}}</li>
  {{/each}}
</ul>
Total Published: {{numPublished}}v>

Components & Views

Create re-useable components

Components

• Support Custom Elements
• Isolated; No access to Controller

Views

• Support standard HTML tags
• Have access to Controller

Great StackOverflow Answer

Generated Objects

Ember tries to find Routes, Controllers, Views and Templates based on certain naming conventions. e.g. "posts" route: PostsRoute, PostsController, etc.

Otherwise Ember will instantiate its default classes. (e.g. ArrayController for RecordArray model).

Extension

Ember Extension (Chrome/Firefox/Opera) can help you identify if your classes or Embers defaults are being used.

Ember Data

Overview

Store

Models

Records

Adapter

Serializer

JSON API

Overview

Ember Data is a library that maps your persistence

layer (e.g. JSON API) to your Ember models,

and handles retrieving and persisting records.

Store

Let's you interact with your storage backend

var post = store.find('post', 123);

Models

These are your classes which extend DS.Model

Records

Instances of the Model that hold the actual record data

Adapter

Translates messages to and from your backend 

e.g. DS.RESTAdapter (default)

Serializer

Converts models to and from API format.

e.g. DS.JSONSerializer

Can be configured to suit your API spec.

JSON API

Specification that defines the conventions

Ember Data expects from your API

jsonapi.org

Some great tools already implementing the spec.

e.g. fortune.js

Ember App Kit

Overview

Grunt

Bower

ES6 Modules

Resolver

Future

CLI

Overview

Ember App Kit helps you get a new Ember app up and running more easily.

To get started, just download the latest ZIP from the EAK repo or git clone and remove the .git directory.

You get a sensible project/directory structure, with all the tooling required for a new Ember app.

Grunt

Grunt is a JavaScript task runner.

EAK Grunt configuration includes options for:

• LESS or SASS/Compass
• CoffeeScript
• JS Hint
• CSS/JS Minifiers
• ES6 Module Transpiler
• Testem, etc.

Bower

EAK uses Bower for managing packages

and dependencies.

Need a 3rd party library?

One line in bower.json and 'bower install'

# cat bower.json
{
  "name": "my-app",
  "dependencies": {
    "handlebars": "~1.1.2",
    ...
  }
}
# bower install

ES6 Module Transpiler

Write your code now so it's compatible with the ECMAScript 6 module spec.

The es6-module-transpiler will transpile it to Require.js or Common.js format, so it works in todays web browsers.

Many Ember projects are currently being updated to support ES6 modules, or do already (e.g. Ember Data).

Resolver

EAK includes the ember-jj-abrams-resolver which extends the standard Ember resolver to support things such as ES6 modules.

Default Resolver

Posts route would load App.PostsRoute

EAK Revolver

Posts route would load the "appkit/routes/posts" module

Future of EAK

"The goal is to eventually replace EAK with ember-cli, a faster, more user-friendly command line tool which is currently under development."

CLI will:

• Have similar folder structure to EAK
• Replace Grunt with Broccoli as its build tool
• Favour convention over configuration

CLI

Ember CLI is still Alpha.

But why wait for the future?!

npm install -g ember-cli
mkdir my-cool-app
cd my-cool-app
ember init
ember server

Report bugs on Ember CLI GitHub!