Ember Conf 2018 TP;DG

summary.markdown

About

Here's is a quick-and-dirty summary of all the important things (from the point of view of SONY and PSNOW) that happened at Ember Conf 2018.

References

• nucleartide's notes https://github.com/nucleartide/emberconf-2018

Tobias's Testing Talk

Gave a talk on the future of ember testing. This section wasn't too relevant for us because his talk used Qunit changes while we are using mocha through ember-cli-mocha which will handle all the changes for us.

But the one important take-away is:

Owner Registration and Injection

Right now, all our tests are injected on the this object like so:

describe('blah', () => {
  beforeEach(function() {
    this.register('service:footbarf', FakeFootService);
    this.register('service:legvomit', FakeLegService)

In newer embers, we will use the this.owner object to do both registrations and injections:

describe('blah', () => {
  beforeEach(function() {
    this.owner.register('service:footbarf', FakeFootService);
    this.owner.register('service:legvomit', FakeLegService)

Godfrey Chan's Prying Open the Black Box

Ember Debug Library

Ember has a debug library with methods like assert and debug that will allow us to make assertions within our code and log to the console, respectively. They are removed before the app is shipped to production.

import { assert, debug } from '@ember/debug';

You can write assertions as simple as the example below:

import { assert } from '@ember/debug';  

assert('Must pass a valid object', obj);

Debug statements will be written as any console.log statement using the debug syntax.

import { debug } from '@ember/debug';  

debug('I\'m a debug notice!');

Handlebars Debugger

You can also use {{debugger}} statements in handlebars to toggle elements at certain rendering points.

{{#each items as |item|}}
  {{debugger}}
{{/each}}

When using the debugger helper you will have access to a get function. This function retrieves values available in the context of the template. For example, if you're wondering why a value {{foo}} isn't rendering as expected within a template, you could place a {{debugger}} statement and, when the debugger; breakpoint is hit, you can attempt to retrieve this value:

> get('item.name')

Dan Gebhardt's Future of Data in Ember

@dgeb is apparently working on a large git-inspired approach to organization data and io in javascript, he calls the project [orbit.js|http://orbitjs.com/] and this project meets its first user case in ember-data.

Here's how this could be applicable to us:

• Potentially supports graphql
• Ships with things like batching, versioning, caching, and queueing
• We should probably keep an eye out on his progress as eventually his library may solve a large cadre of problems that we have leftover from our graphql upstream

Marie Chatfield's Ember Events

Marie Chatfield went over a deep dive on DOM events in Ember. Here's the big takeaway:

Don't attach DOM-element listeners:

<button onclick={{action 'myAction'}}>
  blah
</button>

and instead use Ember ones:

<button {{action 'myAction' on='click'}}>
  blah
</button>