scale your multicore JavaScript… elegantly. Async patterns to

I’m Jonathan Lee Martin. @nybblr

I teach developers to craft exceptional software.

I’ve worked with over 300 developers — from career switchers to senior developers at Fortune 100 companies — through their journey into software development.

Let’s do something together. jonathanleemartin.com Functional React 3 days Practical TDD 5 days Full Stack JavaScript 8 week Express in a Hurry 1 day Remote Collaboration 5 days Functional Programming in JS 3 days

I travel the world as a landscape photographer. !

A

" in !

" in ! to for Take a Make a ☎ on " a

to for Take a Make a ☎ on " a " in !

task3() task1() task2()

eatBreakfast() emails() googleHangout()

eatBreakfast() Time emails() googleHangout() Task #3 Task #2 Task #1

task3() Time task1() task2() Thread #3 Thread #2 Thread #1 eatBreakfast() emails() googleHangout() Task #3 Task #2 Task #1

task3() Time task1() task2() Core #3 Core #2 Core #1 eatBreakfast() emails() googleHangout() Task #3 Task #2 Task #1

Did I… Mishear you? Sigh, one less excuse to dismiss JavaScript.

JavaScript is highly concurrent in Node and the browser. fetch('videos.json') setTimeout(refresh, 5000) db.transaction(['videos']) .objectStore('videos') .get('lotr-1') 2 1 3 4

How does this magic work? Event Loop & Web APIs

Call Stack Web APIs Callback Queue Event Loop Fetch IndexedDB Timer fetch('videos.json') .then(parse) setTimeout(refresh, 5000) db.transaction(['videos']) .objectStore('videos') .get('lotr-1') .then(render) stack.empty? && !queue.empty? Source Code

Call Stack Web APIs Callback Queue Event Loop Fetch IndexedDB Timer fetch('videos.json') .then(parse) setTimeout(refresh, 5000) db.transaction(['videos']) .objectStore('videos') .get('lotr-1') .then(render) stack.empty? && !queue.empty? Source Code parse()

Call Stack Web APIs Callback Queue Event Loop Fetch IndexedDB Timer fetch('videos.json') .then(parse) setTimeout(refresh, 5000) db.transaction(['videos']) .objectStore('videos') .get('lotr-1') .then(render) stack.empty? && !queue.empty? Source Code parse()

Call Stack Web APIs Callback Queue Event Loop Fetch IndexedDB Timer setTimeout(refresh, 5000) db.transaction(['videos']) .objectStore('videos') .get('lotr-1') .then(render) stack.empty? && !queue.empty? Source Code parse() refresh()

Call Stack Web APIs Callback Queue Event Loop Fetch IndexedDB Timer setTimeout(refresh, 5000) db.transaction(['videos']) .objectStore('videos') .get('lotr-1') .then(render) stack.empty? && !queue.empty? Source Code parse() refresh()

Call Stack Web APIs Callback Queue Event Loop Fetch IndexedDB Timer db.transaction(['videos']) .objectStore('videos') .get('lotr-1') .then(render) stack.empty? && !queue.empty? Source Code parse() refresh() render()

Call Stack Web APIs Callback Queue Event Loop Fetch IndexedDB Timer stack.empty? && !queue.empty? Source Code parse() refresh() render()

Call Stack Web APIs Callback Queue Event Loop Fetch IndexedDB Timer stack.empty? && !queue.empty? Source Code parse() refresh() render()

Call Stack Web APIs Callback Queue Event Loop Fetch IndexedDB Timer stack.empty? && !queue.empty? Source Code parse() refresh() render()

Call Stack Web APIs Callback Queue Event Loop Fetch IndexedDB Timer stack.empty? && !queue.empty? Source Code refresh() render() parse()

Call Stack Web APIs Callback Queue Event Loop Fetch IndexedDB Timer stack.empty? && !queue.empty? Source Code render() parse() refresh()

Call Stack Web APIs Callback Queue Event Loop Fetch IndexedDB Timer stack.empty? && !queue.empty? Source Code parse() refresh()

Call Stack Web APIs Callback Queue Event Loop Fetch IndexedDB Timer stack.empty? && !queue.empty? Source Code refresh() parse()

Call Stack Web APIs Callback Queue Event Loop Fetch IndexedDB Timer stack.empty? && !queue.empty? Source Code refresh()

Call Stack Web APIs Callback Queue Event Loop Fetch IndexedDB Timer stack.empty? && !queue.empty? Source Code refresh()

Call Stack Web APIs Callback Queue Event Loop Fetch IndexedDB Timer stack.empty? && !queue.empty? Source Code

bit.ly/event-loop-help

Just use multiple processes! PM2, require('cluster')

Today, we’ll cover: 1. Declare concurrent dependencies with Async IIFEs 2. Manage concurrency with Functional Programming 3. Create your own threads with Web Workers

Async IIFEs 1. Declare concurrent dependencies with

No content

1. Read File 2. Parse ID3 Metadata 3. Calculate Duration 4. Import Album 5. Import Song — bit.ly/id3-parser

// Read the file let buffer = await read(file); // Parse out the ID3 metadata let meta = await parser(file); let songMeta = mapSongMeta(meta); let albumMeta = mapAlbumMeta(meta); // Compute the duration let duration = await getDuration(buffer); // Import the album let albumId = await importAlbum(albumMeta); // Import the song let songId = await importSong({ ...songMeta, albumId, file, duration, meta }); return songId; 1. Read File 2. Parse ID3 Metadata 3. Calculate Duration 4. Import Album 5. Import Song

let [ buffer, meta ] = await Promise.all([ // Read the file read(file), // Parse out the ID3 metadata parser(file) ]); let songMeta = mapSongMeta(meta); let albumMeta = mapAlbumMeta(meta); let [ duration, albumId ] = await Promise.all([ // Compute the duration getDuration(buffer), // Import the album importAlbum(albumMeta) ]);

Async IIFEs • Async Immediately Invoked Function Expression (IIFE) (async () => { /* do things */ })();

Async IIFEs • Async Immediately Invoked Function Expression (IIFE) let task = (async () => { let thing = await otherTask; let result = await doThings(thing); return result; })();

let readTask = read(file); // Parse out the ID3 metadata let metaTask = (async () => { let meta = await parser(file); let songMeta = mapSongMeta(meta); let albumMeta = mapAlbumMeta(meta); return { meta, songMeta, albumMeta }; })(); // Import the album let albumImportTask = (async () => { let { albumMeta } = await metaTask; let albumId = await importAlbum(albumMeta); return albumId;

let readTask = read(file); // Parse out the ID3 metadata let metaTask = (async () => { let meta = await parser(file); let songMeta = mapSongMeta(meta); let albumMeta = mapAlbumMeta(meta); return { meta, songMeta, albumMeta }; })(); // Import the album let albumImportTask = (async () => { let { albumMeta } = await metaTask; let albumId = await importAlbum(albumMeta); return albumId; })(); // Compute the duration let durationTask = (async () => { let buffer = await readTask; let duration = await getDuration(buffer); return duration; })(); // Import the song let songImportTask = (async () => { let albumId = await albumImportTask; let { meta, songMeta } = await metaTask; let duration = await durationTask; let songId = await importSong({ ...songMeta, albumId, file, duration, meta }); return songId; })(); let songId = await songImportTask; return songId; metaTask readTask durationTask albumImportTask songImportTask return songId

let readTask = read(file); // Parse out the ID3 metadata let metaTask = (async () => { let meta = await parser(file); let songMeta = mapSongMeta(meta); let albumMeta = mapAlbumMeta(meta); return { meta, songMeta, albumMeta }; })(); // Import the album let albumImportTask = (async () => { let { albumMeta } = await metaTask; let albumId = await importAlbum(albumMeta); return albumId; })(); // Compute the duration let durationTask = (async () => { let buffer = await readTask; let duration = await getDuration(buffer); return duration; })(); // Import the song let songImportTask = (async () => { let albumId = await albumImportTask; let { meta, songMeta } = await metaTask; let duration = await durationTask; let songId = await importSong({ ...songMeta, albumId, file, duration, meta }); return songId; })(); let songId = await songImportTask; return songId; metaTask readTask durationTask albumImportTask songImportTask return songId (file) =>

bit.ly/async-iifes

Functional Programming 2. Manage concurrency with

No content

Importing 01 Overture.mp3

Importing 02 The Grid.mp3

Importing 22 Finale.mp3

let semaphore = new Semaphore(4); await semaphore.acquire(); /* do things */ semaphore.release();

class Semaphore { constructor(max) { this.tasks = []; this.counter = max; this.dispatch = this.dispatch.bind(this); } dispatch() { if (this.counter > 0 && this.tasks.length > 0) { this.counter--; this.tasks.shift()(); } } release() { this.counter++; this.dispatch();

let semaphore = new Semaphore(4); await semaphore.acquire(); /* do things */ semaphore.release();

let semaphore = new Semaphore(4); await semaphore.acquire(); throw new Error('BOOM'); semaphore.release();

let Semaphore = (max) => { let tasks = []; let counter = max; let dispatch = () => { if (counter > 0 && tasks.length > 0) { counter--; tasks.shift()(); } }; let release = () => { counter++; dispatch(); }; let acquire = () =>

let semaphore = Semaphore(4); let result = await semaphore( async () => { console.log('Acquired!'); return await importMP3(file); } );

let importMP3 = async (data) => /* … */ let limitedImportMP3 = limit(2, importMP3);

let importMP3 = async (data) => /* … */ let limitedImportMP3 = limit(2, importMP3); limitedImportMP3(song1); // starts immediately limitedImportMP3(song2); // starts immediately limitedImportMP3(song3); // waits for song1 or song2 to finish

let importMP3 = async (data) => /* … */ let limitedImportMP3 = limit(2, importMP3); let limit = (max, fn) => { let semaphore = Semaphore(max); return (...args) => semaphore(() => fn(...args)); };

bit.ly/semaphorejs

Web Workers 3. Create your own threads with

Fetch setTimeout WebRTC IndexedDB Audio FileReader Bluetooth Crypto ServiceWorker WebSocket WebWorker

Audio IndexedDB setTimeout Fetch Thread Pool (x8) Main Thread fetch('videos.json') setTimeout(refresh, 5000) db.transaction(['videos']) .objectStore('videos') .get('lotr-1') ctx.decodeAudioData(buffer)

Audio IndexedDB setTimeout Fetch Thread Pool (x8) Main Thread importMP3(file) fetch('videos.json') setTimeout(refresh, 5000) db.transaction(['videos']) .objectStore('videos') .get('lotr-1') ctx.decodeAudioData(buffer) MySongImporter

let worker = new Worker('worker.js'); worker.postMessage({ all: ['the', 'data']}); worker.onmessage(({ data }) => { console.log(data); });

let importMP3 = Cluster('mp3-worker.js'); let song = await importMP3( songFile );

let maxWorkers = navigator.hardwareConcurrency || 4; let defaultHandler = async (worker, data) => { worker.postMessage(data); return await once('message'); }; let Cluster = ( path, handler = defaultHandler, max = maxWorkers ) => { let pool = []; let semaphore = Semaphore(max); let useWorker = async (fn) => {

import { done } from './rpc'; (async () => { while (true) { let { data } = await once(self, 'message'); let song = await importMP3(data); done(song); } })();

TL;DR: 1. JavaScript is highly concurrent 2. Thread-safety isn’t a thing 3. Functional programming keeps it elegant 4. Make your own async APIs with Web Workers

Always bet on JavaScript™

Let’s do something together. jonathanleemartin.com