pixelhandler

# JavaScript Generators and Concurrency

1. Why generators are a nice fit for handling a coroutine (source/sink)
2. How we use generators in the Dashboard app
3. What generators can do to help wrangle async behavior

Generators are functions that can be paused and resumed (think cooperative multitasking or coroutines)

Pitch:

pixelhandler

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  someVal: 5
});

pixelhandler

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

pixelhandler

import { computed, defineProperty } from '@ember/object';
import { later } from '@ember/runloop';

export default Ember.Controller.extend({
  init() {
    later(() => {
      defineProperty(this, 'delayedProperty', computed(() => 'foo'));
      this.notifyPropertyChange('delayedProperty');
    }, 2000);
  },

pixelhandler

import Ember from 'ember';
import { computed, get } from '@ember/object';

export default Ember.Component.extend({
  baz: computed('foo', {
    get() {
      alert(get(this, 'foo'));
    }
  })
});

pixelhandler

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  count: 4,
  rawCount: 4,
  actions: {
    update(value) {
      if (value > 999) {
        this.set('count', 999);

pixelhandler

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

// Broken on 2.10.2
// Works as expected on 2.9.1

pixelhandler

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: '#15545',
  aliased: Ember.computed.alias('appName'),
  
  init() {
    this._super(...arguments);
    console.log('before:', this.cacheFor('aliased'));
    console.log('get:', this.get('aliased'));

pixelhandler

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'https://github.com/emberjs/ember.js/issues/15842'
});

pixelhandler

import Ember from 'ember';

export default Ember.Component.extend({
  // Comment out below to work around
  target: 'body',
  
  actions: {
    buttonClick() {
      this.sendAction('onClick');
    }