Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Async JavaScript in ES7

A brief overview of some upcoming language features in "ES7", which you can use today via babel.js

  • Be the first to comment

Async JavaScript in ES7

  1. 1. Async JavaScript in ES7 Modern Web UI Meetup http://www.modernwebui.org 5/13/2015 @ Mozilla HQ
  2. 2. Who is Mike North? 2 @MichaelLNorth UI Engineering Lead @MichaelLNorth github.com/truenorth
  3. 3. Blocking vs. Waiting 3 ▪ Some people think of this as “push” vs “pull” @MichaelLNorth var weather = getForecast(); getForecast(function (weather) { ... }); ▪ Blocking ▪ Waiting
  4. 4. Sync - Blocking is easy 4 ▪ Code is simple ▪ Error handling with try/catch ▪ We only have one thread @MichaelLNorth function getForecast() { let temperature = getTemperatureData(); let humidity = getHumidityData(); return {temperature, humidity}; }
  5. 5. Async - Callbacks 5 ▪ See: Node.js ▪ Increased complexity ▪ Explicit error handling @MichaelLNorth function getForecast(cb) { getTemperatureData( temperature => { getHumidityData( humidity => { cb({ temperature, humidity }); }, error => cb(error)); }, error => cb(error)); }
  6. 6. Async - Callbacks 6 @MichaelLNorth
  7. 7. Async - Promises 7 ▪ Better error handling model ▪ Still doesn’t look like our “blocking” code ▪ Promise-ness leaks out everywhere @MichaelLNorth function getForecast() { return getTemperatureData(temperature => { getHumidityData(humidity => { return { temperature, humidity }; }) }) }
  8. 8. Some cool stuff coming in 2016 that you can use right now
  9. 9. Iterators - Data Producers 9 ▪ A convention that all ES6 Collections will implement @MichaelLNorth let it = getCollection()[Symbol.iterator](); it.next(); // {value: 64, done: false} it.next(); // {value: 68, done: false} it.next(); // {value: undefined, done: true}
  10. 10. For-Of Loop 10 @MichaelLNorth let a = [1,2,3,4,5]; for (let y of a) { console.log(y); } let a = [1,2,3,4,5]; let it = a[Symbol.iterator](); for(var i = it.next(); !i.done; i = it.next()) { console.log(i.value); }
  11. 11. Generators - fns that return many values 11 @MichaelLNorth function* getValues() { yield 64; yield 68; return 71; } var values = getValues(); values.next(); // {value: 64, done: false} values.next(); // {value: 68, done: false} values.next(); // {value: 71, done: true} ▪ Generators return an iterator
  12. 12. Generators - fns that return many values 12 @MichaelLNorth function* getValues() { yield 64; yield 68; return 71; } ▪ execution suspends @ yield ▪ values can be passed into a generator function* getValues() { var x = yield 64; var y = yield 2*x; return 3*y; } it.next(31);
  13. 13. Generators - fns that return many values 13 @MichaelLNorth function* getValues() { yield 64; yield 68; return 71; } ▪ execution suspends @ yield ▪ values can be passed into a generator function* getValues() { var x = yield 64; var y = yield 2*x; return 3*y; } it.next(31); ▪ can iterate infinitely
  14. 14. Generators - fns that return many values 14 @MichaelLNorth function* getValues() { var x = yield 64; var y = yield 2*x; return 3*y; } var it = getValues();
  15. 15. Generators - fns that return many values 15 @MichaelLNorth function* getValues() { var x = yield 64; var y = yield 2*x; return 3*y; } var it = getValues(); it.next(); > {value: 64, done: false}
  16. 16. Generators - fns that return many values 16 @MichaelLNorth function* getValues() { var x = yield 64 6; var y = yield 2*x; return 3*y; } var it = getValues(); it.next(); > {value: 64, done: false} it.next(6); > {value: 12, done: false}
  17. 17. Generators - fns that return many values 17 @MichaelLNorth function* getValues() { var x = yield 64 6; var y = yield 2*x 3; return 3*y; } var it = getValues(); it.next(); > {value: 64, done: false} it.next(6); > {value: 12, done: false} it.next(3); > {value: 9, done: true}
  18. 18. @MichaelLNorth18
  19. 19. Async Iteration 19 @MichaelLNorth function spawn(generator) { return new Promise((resolve, reject) => { var resultHandler = lastResult => { var {value, done} = generator.next(lastResult); if (!done) { value.then(resultHandler, reject); } else { accept(value); } }; }); }
  20. 20. @MichaelLNorth20 function spawn(generator) { return new Promise((resolve, reject) => { var resultHandler = lastResult => { var {value, done} = generator.next(lastResult); if (!done) { value.then(resultHandler, reject); } else { accept(value); } }; }); } function* getWeather(zip) { var temperature = yield getTemperature(zip); var humidity = yield getHumidity(zip); return {temperature, humidity}; } spawn(getWeather(zip)).then(weather => console.log(weather));
  21. 21. @MichaelLNorth21 function spawn(generator) { return new Promise((resolve, reject) => { var resultHandler = lastResult => { var {value, done} = generator.next(lastResult); if (!done) { value.then(resultHandler, reject); } else { accept(value); } }; }); } function* getWeather(zip) { var temperature = yield getTemperature(zip); var humidity = yield getHumidity(zip); return {temperature, humidity}; } spawn(getWeather(zip)).then(weather => console.log(weather)); Promise
  22. 22. @MichaelLNorth22 function spawn(generator) { return new Promise((resolve, reject) => { var resultHandler = lastResult => { var {value, done} = generator.next(lastResult); if (!done) { value.then(resultHandler, reject); } else { accept(value); } }; }); } function* getWeather(zip) { var temperature = yield getTemperature(zip) 72; var humidity = yield getHumidity(zip); return {temperature, humidity}; } spawn(getWeather(zip)).then(weather => console.log(weather)); Promise Value
  23. 23. @MichaelLNorth23 function spawn(generator) { return new Promise((resolve, reject) => { var resultHandler = lastResult => { var {value, done} = generator.next(lastResult); if (!done) { value.then(resultHandler, reject); } else { accept(value); } }; }); } function* getWeather(zip) { var temperature = yield getTemperature(zip) 72; var humidity = yield getHumidity(zip) 0.32; return {temperature, humidity}; } spawn(getWeather(zip)).then(weather => console.log(weather)); Value
  24. 24. @MichaelLNorth But wait… 24 function* getWeather(zip) { var temperature = yield getTemperature(zip); var humidity = yield getHumidity(zip); return {temperature, humidity}; } async function getWeather(zip) { var temperature = await getTemperature(zip); var humidity = await getHumidity(zip); return {temperature, humidity}; } function getWeather(zip) { var temperature = getTemperature(zip); var humidity = getHumidity(zip); return {temperature, humidity}; }
  25. 25. Use it today 25 @MichaelLNorth babel: { nonStandard: false, optional: [ 'es7.asyncFunctions' ] } regeneratorRuntime.wrap(function getValues$ (context) { while (1) switch (context.prev = context.next) { case 0: context.next = 2; return 1; case 2: context.next = 4; return 2; case 4: return context.abrupt("return", 31); case 5: case "end": return context.stop(); } }, ...); function *getValues() { yield 1; yield 2; return 31; }
  26. 26. @MichaelLNorth Learn More 26 Netflix JavaScript Talks - Version 7: The Evolution of JavaScript

×