What awaits you in async programming?

This talk guides you through the world of asynchronous programming in JavaScript, more specifically the async/await paradigm. First, we'll compare async/await to other similarly-purposed paradigms. We'll then cover current browser support and performance implications of async/await, as well as a recent optimization done in V8 and how this affects the everyday work of web developers. We’ll finish with advice on how every JavaScript developer can get involved with standardization efforts and as a result help to shape the future of the language.

Transcript

1. What awaits you in async programming? Maya Lekova V8 team, Google @MayaLekova
2. > whoami • Maya Lekova • Background in game development ⇨ mainly in C++ • Working in the V8 team in Google ⇨ mainly in C++, JavaScript, CSA • V8… what?
3. What are we going to talk about today? The three “How’s”: 1. How do we do async in JavaScript? 2. How fast and well-supported is async? 3. How can I get involved?
4. How do we do async in JavaScript?
5. HTTP request handler Read user’s avatar fs.readFileSync Query DB for user’s data db.getUserData GET /user_profile send HTTP response Assemble data and avatar
6. “An asynchronous model allows multiple things to happen at the same time. When you start an action, your program continues to run. When the action finishes, the program is informed and gets access to the result (for example, the data read from disk).” Source: “Eloquent JavaScript”, Marijn Haverbeke, 3rd edition
7. HTTP request handler Read user’s avatar fs.readFile Assemble data and avatar callback GET /user_profile send HTTP response Query DB for user’s data db.getUserData callback Event loop running
8. Pros • Faster handling of the request • Doesn’t block the main event loop • Easier to implement uniform error handling ⇨ Allows for better throughput • Harder to write • Harder to read & debug ⇨ Needs more attention & education Cons
9. Callbacks const server = http.createServer(function(req, res) { // … authenticate user, attach userId to req fs.readFile(req.userId + '_avatar.png', function(err, avatar) { db.getUserData(req.userId, function(err, data) { const userProfile = { avatar, data }; res.end(JSON.stringify(userProfile), function(err) { // … clean-up after response is sent }); }); }); });
10. Preparation const util = require('util'); const fs = require('fs'); const db = require('pongo-db'); const http = require('http'); const readFile = util.promisify(fs.readFile); const getUserData = util.promisify(db.getUserData); http.ServerResponse.prototype.end = util.promisify(http.ServerResponse.prototype.end); // Ъх... // Promisify all the things!
11. Promises const server = http.createServer((req, res) => { // … authenticate user, attach userId to req readFile(req.userId + '_avatar.png').then((avatar) => { getUserData(req.userId).then((data) => { const userProfile = { avatar, data }; res.end(JSON.stringify(userProfile)).then(() => { // … clean-up after response is sent }); }); }); }); Lisp, anyone?...
12. Can we do better?
13. Async to the rescue! async function foo() { await some_promisified_function(); // do_more_things await other_async_function(); }
14. Async/await const server = http.createServer(async (req, res) => { // … authenticate user, attach userId to req const avatar = await readFile(req.userId + '_avatar.png'); const data = await getUserData(req.userId); const userProfile = { avatar, data }; await res.end(JSON.stringify(userProfile)); // … clean-up after response is sent });
15. image: www.avtora.com Найс, а? Error handling const server = http.createServer(async (req, res) => { try { const avatar = await readFile('nonexistent.png'); const data = await getUserData(req.userId); // … assemble and send response } catch (err) { res.end(JSON.stringify(err)); } finally { // … clean-up after response is sent } });
16. How fast and well-supported is async?
17. Support • Browsers: latest Chrome, Firefox, Edge, Safari - 100% • Servers: Node.js 8+ - 100% • Transpilers: Babel 6+, Traceur - partial (not 100% tested) Source: http://kangax.github.io/compat-table/es2016plus/#test-async_functions
18. Async performance - Node 8.11
19. Async performance - Node 8.11
20. Recent optimization in V8 • Promise/async micro-benchmarks: https://github.com/v8/promise-performance-tests • Speculatively change behaviour • Propose a PR to the language specification https://tc39.github.io/ecma262/#await - current spec https://github.com/tc39/ecma262/pull/1250 - the pull request • … and now we (a)wait!
21. await Promise.resolve(undefined) Promise Fulfilled undefined Promise Fulfilled undefined PromiseResolveThenableJob Promise Fulfilled undefined main PromiseReactionJob PromiseReactionJob [[Resolve]] Resume main v p t Await (original version)
22. await is challenging • 2 additional promises • 3+ ticks to the microtask queue
23. await Promise.resolve(undefined) Promise Fulfilled undefined Promise Fulfilled undefined PromiseResolveThenableJob Promise Fulfilled undefined main PromiseReactionJob PromiseReactionJob [[Resolve]] Resume main v p t Await (optimized version)
24. • We optimize away 2 of the ticks • Doxbee - 48% improvement in time • Fibonacci-async - 23% improvement in time • Hapi real-world benchmark ◦ With Async hooks enabled - 50% improvement in throughput ◦ Without Async hooks enabled - 20% improvement in throughput ◦ Thanks to @matteocollina for the results Await (optimized version)
25. How can I get involved?
26. “Ecma’s Technical Committee 39 (TC39): maintains the ECMAScript language standard (and more). Members of the committee are all major browser vendors and other companies interested in the web. Those companies send delegates to meetings which are also attended by invited experts.” Source: http://2ality.com/2011/06/ecmascript.html
27. TC39 - what developers think they do image: https://en.wikipedia.org/wiki/Parliament
28. https://github.com/tc39 TC39 - what they actually do
29. Where can I plug in? • Meetings every 2 months (follow at https://github.com/tc39/agendas) • Discuss proposals online & offline (follow & comment at https://github.com/tc39/proposals) • Write ECMAScript conformance tests (give a hand at https://github.com/tc39/test262 )
30. Thanks to our sponsors!
31. Thank you for the attention! Beer.js Beach Edition 2018