silesky

sitegroup: rotary_myrotary

deploy_tasks:
  development:
    after_deploy:
      - cd $AMAZEEIO_WEBROOT && drush -y updb --cache-clear=0
      - cd $AMAZEEIO_WEBROOT && drush -y cc all
      - cd $AMAZEEIO_WEBROOT/sites/all/modules/custom/rotary_donate_widget/js && git update-index --skip-worktree build/main.js
      - cd $AMAZEEIO_WEBROOT/sites/all/modules/custom/rotary_donate_widget/js && yarn && yarn build
      - cd $AMAZEEIO_WEBROOT/sites/all/modules/custom/rotary_donate_widget/js && yarn build-test-app

silesky

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import styles from './styles.css';

const loadScript = src => {
  const ref = global.document.getElementsByTagName('script')[0];
  const script = global.document.createElement('script');
  script.src = src;
  script.async = true;
  ref.parentNode.insertBefore(script, ref);

silesky

A Brief History of Async Javascript: Callbacks to Promises to Generators to Async/await

Synchronous Functions

In Javascript, most functions get called one at a time, or synchronously. Execution happens in order, one a time. Standard functions like Math.random, Math.floor are synchronous functions. They get executed immediately, and to the exclusion of any other runtime operation. This is the default behavior of javascript, and so obvious we barely even think about it.

const x = Math.random();
console.log(x)  // 0.6142...

Synchronousity is about dependency; Line 2 waits for Line 1 because Line 2 is dependent on line 1. This code is said to have a synchronous flow. Because theses line depend on one another, the user waits until Math.random() has returned a value. This happens so fast that it doesn't hurt UX, but it does take some minuscule amount of time.

silesky

const promiseTimeout = (delay) =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve() // when this fires, .then gets called
      console.log('hi')
    }, delay)
  })

promiseTimeout(1000) // this function returns a promise.
  .then(() => promiseTimeout(2000))

silesky

 setTimeout(() => {
  console.log('hi')
  setTimeout(() => {
    console.log('hi')
    setTimeout(() => {
      console.log('hi')
    }, 1000)
  }, 2000)
}, 3000)

silesky

getDataFromDb()
  .then(res => getDataFromAPI(res.id))
  .then(data => getUserDataFromAPI2(data.userToken)})
  .then(userData => {
      if (!userData) throw;
      return someMachineLearningAPI(userData.Image)
  })
  .then(imageUri => {
    document.getElementById('myImage').src = imageUri
  })

silesky

const asyncify = (generatorFn) => {
  const myIterator = generatorFn();
  // recursive function that continue to feed itself
  // yielded Promises until there are none left
  const runNext = ({ value, done }) => {
    if (done) return;
    value.then(() => runNext(myIterator.next()))
  }
  runNext(myIterator.next())
}

silesky

const timer = () => asyncify(function* () {
  yield promiseTimeout(1000)
  yield promiseTimeout(2000)
  yield promiseTimeout(3000)
})
timer()

//=> hi (after 1 sec...)
//=> hi (after 2 more secs...)
//=> hi (after 3 more secs...) ... success!

silesky

const timer = async () => { // function* -> async
  await promiseTimeout(1000) // yield -> await
  await promiseTimeout(2000)
  await promiseTimeout(3000)
 }

silesky

function* gen() { // new * syntax for declaring generator functions.
  yield 1 // yield says 'output the value and stop'.
  yield 2
}
// we use our generator to create an 'iterator': an object with a .next method.
const myIterator = gen()

// every time .next gets called, it returns an object that looks like: {value: ..., done: ...}
myIterator.next() //=> {value: 1, done: false}
myIterator.next() //=> {value: 2, done: false}