Ember Vocabulary

www.kylecoberly.com

ember.js

The JavaScript application framework.

export default Ember.Component.extend({
  classNameBindings: ['isUrgent'],
  isUrgent: true
});

Ember Data

Ember's official data modeling solution

export default DS.Model.extend({
  firstName: DS.attr(),
  lastName: DS.attr(),
  birthday: DS.attr()
});

Ember CLI

Ember's official scaffolding and build tool

ember g http-mock posts

Ember

A combination of technologies, philosophies, and people

Router

Maps URLs to routes

Router.map(function() {
  this.route('about', { path: '/about' });
  this.route('favorites', { path: '/favs' });
});

Route

Sets data on a controller, renders templates, redirects requests, handles/bubbles actions

export default Ember.Route.extend({
  model: function(){
    return this.store.findRecord("author", 1);
  },
  actions: {
    invalidateModel: function(){
      this.refresh();
    }
  }
});

Controllers

Binds data to templates, holds temporary data, receives/bubbles actions

export default Ember.Controller.extend({
  sortedData: [1,2,3],
  actions: {
    upvote: function(){
      return true;
    }
  }
});

Services

A "routeless controller". A singleton that represents application-wide state. Can be injected into other Ember objects.

export default Ember.Service.extend({
  currentSong: Ember.computed(function(){
    return {
      title: "It's My Job To Keep Punk Rock Elite",
      artist: "NOFX"
    })
  })
});

Templates

HTML that can use bound variables, apply simple logic, and send actions

<p>Currently listening to {{currentSong.artist}}: "{{currentSong.title}}"</p>

Actions

A response to a user interaction. Looks to controller for handler. Will bubble through the route hierarchy until it finds a handler.

export default Ember.Controller.extend({
  setCityDropdown: function(state){
    // Set a list of cities
  },
  actions: {
    stateDropdownChanged(state) {
      this.setCityDropdown(state);
    }
  }
});

View

The object that backs a template, determines its parent tag, and responds to DOM events. Removed in 2.0.

export default Ember.View.extend({
  click: function(event){
    // Handle clicks
  },
  didInsertElement: function(){
    // Load jQuery plugin
  }
});

Component

A view combined with a controller. Renders templates directly. Instantiated in a template, and can send actions out.

export default Ember.Component.extend({
  tagName: "nav",
  click: function(event){
    // Handle click event
  },
  actions: {
    upvote: function(){
      this.sendAction("upvoteArtist");
    }
  }
});

Mixin

A collection of properties and methods that you can add to an Ember object.

export default Ember.Mixin.create({
  edit: function() {
    console.log('starting to edit');
    this.set('isEditing', true);
  },
  isEditing: false
});

Observer

Triggers a function when a primitive property changes.

Ember.Object.extend({
  valueObserver: Ember.observer('value', function() {
    // Executes whenever the "value" property changes
  })
});

Computed Property

Property that recalculates whenever other properties change.

Ember.Component.extend({
  firstName: "Kyle",
  lastName: "Coberly",
  fullName: Ember.computed("firstName", "lastName", function(){
    return this.get("firstName") + " " + this.get("lastName");
  })
});

Model

Defines properties and relationships for a type of data

export default DS.Model.extend({
  firstName: DS.attr(),
  lastName: DS.attr(),
  fullName: Ember.computed('firstName', 'lastName', function() {
    return this.get('firstName') + ' ' + this.get('lastName');
  })
});

Adapter

Translates your application's data request into a server request

export default DS.RESTAdapter.extend({
  host: "www.kylecoberly.com",
  namespace: "api",
  headers: {
    "API_KEY": "secret key",
    "ANOTHER_HEADER": "Some header value"
  }
});

Serializer

Formats your data payload to and from the server

export default DS.JSONSerializer.extend({
  primaryKey: '_id'
});

HTTP Mock

Fake server endpoint that can return mock data

var data = {
  author: {
    firstName: "Kyle",
    lastName: "Coberly"
  }
};

module.exports = function(app) {
  var express = require('express');
  var projectRouter = express.Router();
  projectRouter.get('/', function(req, res) {
    res.send(data);
  });
  app.use('/api/project', projectRouter);
};

Fixtures

Mock data that's attached to a model. Deprecated.

var Author = DS.Model.extend({
  firstName: DS.attr('string'),
  lastName: DS.attr('string')
});

Author.reopenClass({
  FIXTURES: [
    {id: 1, firstName: 'Bugs', lastName: 'Bunny'},
    {id: 2, firstName: 'Wile E.', lastName: 'Coyote'}
  ]
});

export default Author;

Transform

A data type on a model that you can coerce to or from

// Transport in C, app uses F
export default DS.Transform.extend({
  deserialize: function(serialized) {
    return (serialized *  1.8) + 32;
  },
  serialize: function(deserialized) {
    return (deserialized - 32) / 1.8;
  }
});

Record

A specific instance of a model

var tyrion = this.store.findRecord('person', 1);
// ...after the record has loaded
tyrion.set('firstName', "Yollo");

Store

Collection of all the records in the application

var post = this.store.findRecord('post', 1);

Snapshot

The state of a record at a particular point in time. Used internally in Ember Data.

// store.push('post', { id: 1, author: 'Tomster', title: 'Ember.js rocks' });
postSnapshot.attr('author'); // => 'Tomster'
postSnapshot.attr('title'); // => 'Ember.js rocks'

Resolver

The tool that Ember uses to look up modules, files, and objects based on naming conventions

Module

An encapsulated Ember object

// app/routes/index.js
import Ember from "ember";

export default Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  }
});

Pod

File organization style where files are organized by feature rather than object type.

├── post
│   ├── model.js
│   ├── route.js
│   └── template.hbs

├── comment
│   ├── model.js
│   ├── route.js
│   └── template.hbs

Helper

Custom Handlebars function

export default Ember.Helper.join(function(params, hash) {
  return params.join(' ');
});

{{join firstName lastName}}

Initializer

Function that runs when the application starts

// app/initializers/observation.js
export default {
  name: 'observation',
  initialize: function() {
    // code
  }
};

Util

Container for generic functions and values that can be imported into other objects

export default Ember.Object.extend({
  getRandomNumber: function(min, max){
    return Math.floor(Math.random() * (max - min)) + min;
  }
});

Others

• CSP
• JSON-API
• HTMLBars
• Promise
• Unit/Integration/Acceptance Tests

Questions?

Thank you!

www.kylecoberly.com