Asynchronous Event Handling in Javascript and React

I'll take you through the history of asynchronous programming in Javascript and show you how generator functions and especially redux-sagas make asynchronous event handling very pleasant for the developer. I showcase this with an example app which deals with bluetooth signals.

Transcript

1. @andrekovac Async event handling in Javascript and React
2. @andrekovac André Kovac Performances Workshops Freelance Software Engineer Data Scientist Science Communication Hackathons
3. @andrekovac What?" • Road of asynchronous javascript • Redux-sagas • Generators • Use case: Async bluetooth signals
4. @andrekovac makeFalafel(money, homeIngredients, eatFalafel);
5. @andrekovac Falafel Example const homeIngredients = { garlic: 2, // clove onion: 1, // the thing coriander: 1, // teaspoon cumin: 1, // teaspoon salt: 1, // teaspoon pepper: 1 // "to taste" }; const money = 10; // should be enough for chickpeas const eatFalafel = allFalafel => { allFalafel.forEach(falafel => { console.log(`Yummy falafel with id ${falafel.id}`); }); };
6. @andrekovac const homeIngredients = { garlic: 2, // clove onion: 1, // the thing coriander: 1, // teaspoon cumin: 1, // teaspoon salt: 1, // teaspoon pepper: 1 // "to taste" }; const money = 10; // should be enough for chickpeas const eatFalafel = allFalafel => { allFalafel.forEach(falafel => { console.log(`Yummy falafel with id ${falafel.id}`); }); }; Falafel Example
7. @andrekovac const homeIngredients = { garlic: 2, // clove onion: 1, // the thing coriander: 1, // teaspoon cumin: 1, // teaspoon salt: 1, // teaspoon pepper: 1 // "to taste" }; const money = 10; // should be enough for chickpeas const eatFalafel = allFalafel => { allFalafel.forEach(falafel => { console.log(`Yummy falafel with id ${falafel.id}`); }); }; Falafel Example
8. @andrekovac const falafel = makeFalafel(money, homeIngredients); eatFalafel(falafel); 1. Make Ideal world
9. @andrekovac const falafel = makeFalafel(money, homeIngredients); eatFalafel(falafel); 2. Eat 1. Make Ideal world
10. @andrekovac const makeFalafel = (money, ingredients) => { const chickpeas = getChickpeas(money); const mixture = getMixture({ ...chickpeas, ...ingredients }); const falafel = deepFry(mixture); return falafel; }; const falafel = makeFalafel(money, homeIngredients); eatFalafel(falafel); Make first Eat later Synchronous world
11. @andrekovac const makeFalafel = (money, ingredients) => { const chickpeas = getChickpeas(money); const mixture = getMixture({ ...chickpeas, ...ingredients }); const falafel = deepFry(mixture); return falafel; }; 
 const falafel = makeFalafel(money, homeIngredients); eatFalafel(falafel); Synchronous blocking code
12. @andrekovac const makeFalafel = (money, ingredients) => { const chickpeas = getChickpeas(money); const mixture = getMixture({ ...chickpeas, ...ingredients }); const falafel = deepFry(mixture); return falafel; }; const falafel = makeFalafel(money, homeIngredients); eatFalafel(falafel); Synchronous blocking code
13. @andrekovac const makeFalafel = (money, ingredients) => { const chickpeas = getChickpeas(money); const mixture = getMixture({ ...chickpeas, ...ingredients }); const falafel = deepFry(mixture); return falafel; }; const falafel = makeFalafel(money, homeIngredients); eatFalafel(falafel); Synchronous blocking code
14. @andrekovac const makeFalafel = (money, ingredients) => { const chickpeas = getChickpeas(money); const mixture = getMixture({ ...chickpeas, ...ingredients }); const falafel = deepFry(mixture); return falafel; }; const falafel = makeFalafel(money, homeIngredients); eatFalafel(falafel); Synchronous blocking code
15. @andrekovac const makeFalafel = (money, ingredients) => { const chickpeas = getChickpeas(money); const mixture = getMixture({ ...chickpeas, ...ingredients }); const falafel = deepFry(mixture); return falafel; }; const falafel = makeFalafel(money, homeIngredients); eatFalafel(falafel); Synchronous blocking code
16. @andrekovac const makeFalafel = (money, ingredients) => { const chickpeas = getChickpeas(money); const mixture = getMixture({ ...chickpeas, ...ingredients }); const falafel = deepFry(mixture); return falafel; }; const falafel = makeFalafel(money, homeIngredients); eatFalafel(falafel); Synchronous blocking code Every developer loves it!
17. @andrekovac const makeFalafel = (money, ingredients) => { const chickpeas = getChickpeas(money); const mixture = getMixture({ ...chickpeas, ...ingredients }); const falafel = deepFry(mixture); return falafel; }; const falafel = makeFalafel(money, homeIngredients); eatFalafel(falafel); Blocking is easy but doesn’t work in a world with users…
18. @andrekovac const makeFalafel = ( money, ingredients, eatFalafelCallback ) => { getChickpeasCallbackFunction(money, (error, chickpeas) => { if (error) { eatFalafelCallback(error); } if (chickpeas) { getMixtureCallbackFunction( { ...chickpeas, ...ingredients }, (error, mixture) => { if (error) { eatFalafelCallback(error); } if (mixture) { deepFryCallbackFunction(mixture, (error, falafel) => { if (error) { eatFalafelCallback(error); } if (falafel) { eatFalafelCallback(falafel); } }); } } ); } }); }; makeFalafel(money, homeIngredients, eatFalafel); 1. Make world of callbacks
19. @andrekovac const makeFalafel = ( money, ingredients, eatFalafelCallback ) => { getChickpeasCallbackFunction(money, (error, chickpeas) => { if (error) { eatFalafelCallback(error); } if (chickpeas) { getMixtureCallbackFunction( { ...chickpeas, ...ingredients }, (error, mixture) => { if (error) { eatFalafelCallback(error); } if (mixture) { deepFryCallbackFunction(mixture, (error, falafel) => { if (error) { eatFalafelCallback(error); } if (falafel) { eatFalafelCallback(falafel); } }); } } ); } }); }; makeFalafel(money, homeIngredients, eatFalafel); 1. Make 2. Pass the desire to eat world of callbacks
20. @andrekovac const makeFalafel = ( money, ingredients, eatFalafelCallback ) => { getChickpeasCallbackFunction(money, (error, chickpeas) => { if (error) { eatFalafelCallback(error); } if (chickpeas) { getMixtureCallbackFunction( { ...chickpeas, ...ingredients }, (error, mixture) => { if (error) { eatFalafelCallback(error); } if (mixture) { deepFryCallbackFunction(mixture, (error, falafel) => { if (error) { eatFalafelCallback(error); } if (falafel) { eatFalafelCallback(falafel); } }); } } ); } }); }; makeFalafel(money, homeIngredients, eatFalafel); 1. Make 2. Pass the desire to eat 3. Finally eat world of callbacks
21. @andrekovac Pyramid of falafel doom const makeFalafel = ( money, ingredients, eatFalafelCallback ) => { getChickpeasCallbackFunction(money, (error, chickpeas) => { if (error) { eatFalafelCallback(error); } if (chickpeas) { getMixtureCallbackFunction( { ...chickpeas, ...ingredients }, (error, mixture) => { if (error) { eatFalafelCallback(error); } if (mixture) { deepFryCallbackFunction(mixture, (error, falafel) => { if (error) { eatFalafelCallback(error); } if (falafel) { eatFalafelCallback(falafel, "callback"); } }); } } ); } }); }; makeFalafel(money, homeIngredients, eatFalafel);
22. @andrekovac ECMAScript Committee “How can we make async programming easier?” Jafar Husain in his Talk “The Evolution of JavaScript”
23. @andrekovac Promise const getChickpeas = money => new Promise((resolve, reject) => setTimeout(() => { if (!money) reject('No cash!'); resolve(buyChickpeas(money)); }, 1000) ); const getMixture = ingredients => new Promise((resolve, reject) => setTimeout(() => { if (!ingredients) reject('No stuff!'); resolve(mix(ingredients)); }, 1000) ); const deepFry = mixture => new Promise((resolve, reject) => setTimeout(() => { if (!mixture) reject('Nothing mixed!'); resolve(throwIntoPan(mixture)); }, 1000) ); Pending ⏱ Fulfilled ✅ Rejected ❌
24. @andrekovac const makeFalafel = (money, ingredients) => { return getChickpeas(money) .then(chickpeas => getMixture({ ...chickpeas, ...ingredients })) .then(mixture => deepFry(mixture)) .catch(error => console.error("Falafel error", error)); }; makeFalafel(money, homeIngredients).then(falafel => eatFalafel(falafel) ); Promise
25. @andrekovac const makeFalafel = (money, ingredients) => { return getChickpeas(money) .then(chickpeas => getMixture({ ...chickpeas, ...ingredients })) .then(mixture => deepFry(mixture)) .catch(error => console.error("Falafel error", error)); }; makeFalafel(money, homeIngredients).then(falafel => eatFalafel(falafel) ); Promise
26. @andrekovac const makeFalafel = (money, ingredients) => { return getChickpeas(money) .then(chickpeas => getMixture({ ...chickpeas, ...ingredients })) .then(mixture => deepFry(mixture)) .catch(error => console.error("Falafel error", error)); }; makeFalafel(money, homeIngredients).then(falafel => eatFalafel(falafel) ); Promise
27. @andrekovac const makeFalafel = (money, ingredients) => { return getChickpeas(money) .then(chickpeas => getMixture({ ...chickpeas, ...ingredients })) .then(mixture => deepFry(mixture)) .catch(error => console.error("Falafel error", error)); }; makeFalafel(money, homeIngredients).then(falafel => eatFalafel(falafel) ); Promise
28. @andrekovac const makeFalafel = (money, ingredients) => { return getChickpeas(money) .then(chickpeas => getMixture({ ...chickpeas, ...ingredients })) .then(mixture => deepFry(mixture)) .catch(error => console.error("Falafel error", error)); }; makeFalafel(money, homeIngredients).then(falafel => eatFalafel(falafel) ); Promise
29. @andrekovac const makeFalafel = (money, ingredients) => { return getChickpeas(money) .then(chickpeas => getMixture({ ...chickpeas, ...ingredients })) .then(mixture => deepFry(mixture)) .catch(error => console.error("Falafel error", error)); }; makeFalafel(money, homeIngredients).then(falafel => eatFalafel(falafel) ); Promise
30. @andrekovac const makeFalafel = (money, ingredients) => { return getChickpeas(money) .then(chickpeas => getMixture({ ...chickpeas, ...ingredients })) .then(mixture => deepFry(mixture)) .catch(error => console.error("Falafel error", error)); }; makeFalafel(money, homeIngredients).then(falafel => eatFalafel(falafel) ); const makeFalafel = (money, ingredients) => { const chickpeas = getChickpeas(money); const mixture = getMixture({ ...chickpeas, ...ingredients }); const falafel = deepFry(mixture); return falafel; }; const falafel = makeFalafel(money, homeIngredients); eatFalafel(falafel); Better, but not too similar yet! Promise chain Synchronous code
31. @andrekovac Async-await const makeFalafelAsync = async (money, ingredients) => { const chickpeas = await getChickpeas(money); const mixture = await getMixture({ ...chickpeas, ...ingredients }); const falafel = await deepFry(mixture); return falafel; }; const makeFalafel = (money, ingredients) => { const chickpeas = getChickpeas(money); const mixture = getMixture({ ...chickpeas, ...ingredients }); const falafel = deepFry(mixture); return falafel; };
32. @andrekovac Async-await const makeFalafelAsync = async (money, ingredients) => { const chickpeas = await getChickpeas(money); const mixture = await getMixture({ ...chickpeas, ...ingredients }); const falafel = await deepFry(mixture); return falafel; }; const makeFalafel = (money, ingredients) => { const chickpeas = getChickpeas(money); const mixture = getMixture({ ...chickpeas, ...ingredients }); const falafel = deepFry(mixture); return falafel; };
33. @andrekovac Async-await const makeFalafelAsync = async (money, ingredients) => { const chickpeas = await getChickpeas(money); const mixture = await getMixture({ ...chickpeas, ...ingredients }); const falafel = await deepFry(mixture); return falafel; }; const makeFalafel = (money, ingredients) => { const chickpeas = getChickpeas(money); const mixture = getMixture({ ...chickpeas, ...ingredients }); const falafel = deepFry(mixture); return falafel; };
34. @andrekovac Async-await const makeFalafelAsync = async (money, ingredients) => { const chickpeas = await getChickpeas(money); const mixture = await getMixture({ ...chickpeas, ...ingredients }); const falafel = await deepFry(mixture); return falafel; }; makeFalafelAsync(money, homeIngredients).then(falafel => eatFalafel(falafel) );
35. @andrekovac Async-await const makeFalafelAsync = async (money, ingredients) => { const chickpeas = await getChickpeas(money); const mixture = await getMixture({ ...chickpeas, ...ingredients }); const falafel = await deepFry(mixture); return falafel; }; makeFalafelAsync(money, homeIngredients).then(falafel => eatFalafel(falafel) );
36. @andrekovac Async-await const makeFalafelAsync = async (money, ingredients) => { const chickpeas = await getChickpeas(money); const mixture = await getMixture({ ...chickpeas, ...ingredients }); const falafel = await deepFry(mixture); return falafel; }; makeFalafelAsync(money, homeIngredients).then(falafel => eatFalafel(falafel) );
37. @andrekovac Async-await const makeFalafelAsync = async (money, ingredients) => { const chickpeas = await getChickpeas(money); const mixture = await getMixture({ ...chickpeas, ...ingredients }); const falafel = await deepFry(mixture); return falafel; }; makeFalafelAsync(money, homeIngredients).then(falafel => eatFalafel(falafel) );
38. @andrekovac Async-await const makeFalafelAsync = async (money, ingredients) => { const chickpeas = await getChickpeas(money); const mixture = await getMixture({ ...chickpeas, ...ingredients }); const falafel = await deepFry(mixture); return falafel; }; makeFalafelAsync(money, homeIngredients).then(falafel => eatFalafel(falafel) );
39. @andrekovac Async-await const makeFalafelAsync = async (money, ingredients) => { const chickpeas = await getChickpeas(money); const mixture = await getMixture({ ...chickpeas, ...ingredients }); const falafel = await deepFry(mixture); return falafel; }; makeFalafelAsync(money, homeIngredients).then(falafel => eatFalafel(falafel) );
40. @andrekovac Async-await const makeFalafelAsync = async (money, ingredients) => { const chickpeas = await getChickpeas(money); const mixture = await getMixture({ ...chickpeas, ...ingredients }); const falafel = await deepFry(mixture); return falafel; }; makeFalafelAsync(money, homeIngredients).then(falafel => eatFalafel(falafel) );
41. @andrekovac Async-await const makeFalafelAsync = async (money, ingredients) => { const chickpeas = await getChickpeas(money); const mixture = await getMixture({ ...chickpeas, ...ingredients }); const falafel = await deepFry(mixture); return falafel; }; Nice, but how do I use it together with React? * +
42. @andrekovac * +
43. @andrekovac
44. @andrekovac React + Redux 1. Single source of truth 2. State is read-only (no setters) 3. Changes are made with pure functions “Can you help me with my asynchronous events?”
45. @andrekovac Redux-thunk const makeFalafel = (money, ingredients) => { return async dispatch => { try { const chickpeas = await getChickpeas(money); const mixture = await getMixture({ chickpeas, ...ingredients }); const falafel = await deepFry(mixture); dispatch({ type: CREATE_FALAFELS_SUCCESS, falafel }); return falafel; } catch (error) { dispatch({ type: CREATE_FALAFELS_ERROR, error }); return error; } }; };
46. @andrekovac Redux-thunk const makeFalafel = (money, ingredients) => { return async dispatch => { try { const chickpeas = await getChickpeas(money); const mixture = await getMixture({ chickpeas, ...ingredients }); const falafel = await deepFry(mixture); dispatch({ type: CREATE_FALAFELS_SUCCESS, falafel }); return falafel; } catch (error) { dispatch({ type: CREATE_FALAFELS_ERROR, error }); return error; } }; };
47. @andrekovac Redux-thunk const makeFalafel = (money, ingredients) => { return async dispatch => { try { const chickpeas = await getChickpeas(money); const mixture = await getMixture({ chickpeas, ...ingredients }); const falafel = await deepFry(mixture); dispatch({ type: CREATE_FALAFELS_SUCCESS, falafel }); return falafel; } catch (error) { dispatch({ type: CREATE_FALAFELS_ERROR, error }); return error; } }; };
48. @andrekovac Redux-thunk const makeFalafel = (money, ingredients) => { return async dispatch => { try { const chickpeas = await getChickpeas(money); const mixture = await getMixture({ chickpeas, ...ingredients }); const falafel = await deepFry(mixture); dispatch({ type: CREATE_FALAFELS_SUCCESS, falafel }); return falafel; } catch (error) { dispatch({ type: CREATE_FALAFELS_ERROR, error }); return error; } }; };
49. @andrekovac Redux-thunk const makeFalafel = (money, ingredients) => { return async dispatch => { try { const chickpeas = await getChickpeas(money); const mixture = await getMixture({ chickpeas, ...ingredients }); const falafel = await deepFry(mixture); dispatch({ type: CREATE_FALAFELS_SUCCESS, falafel }); return falafel; } catch (error) { dispatch({ type: CREATE_FALAFELS_ERROR, error }); return error; } }; };
50. @andrekovac Bluetooth Low Energy Beacons
51. @andrekovac Bluetooth Low Energy Beacons
52. @andrekovac Bluetooth Low Energy Beacons
53. @andrekovac Orchestrating complex/asynchronous operations
54. @andrekovac Orchestrating complex/asynchronous operations How to think of it: Saga Saga Saga Start Pause Cancel
55. @andrekovac Saga yield take(CREATE_FALAFELS_INIT); Listens for action(s) yield take(CREATE_FALAFELS_INIT); yield takeEvery(CREATE_FALAFELS_INIT); yield takeLatest(CREATE_FALAFELS_INIT);
56. @andrekovac Saga yield put(createFalafelsSuccess()); dispatches an action Listens for action(s) yield take(CREATE_FALAFELS_INIT); yield takeEvery(CREATE_FALAFELS_INIT); yield takeLatest(CREATE_FALAFELS_INIT);
57. @andrekovac Saga yield put(createFalafelsSuccess()); Output Input yield take(CREATE_FALAFELS_INIT);
58. @andrekovac Saga yield call(fetchWeatherApi); Call APIs / other functions/sagas
59. @andrekovac Saga yield call(fetchWeatherApi); Call APIs / other functions/sagas yield select(falafelSelector); Retrieve a slice of the redux store
60. @andrekovac Saga yield call(fetchWeatherApi); yield take(CREATE_FALAFELS_INIT); Call APIs / other functions/sagas Start other saga in parallel yield fork(chickpeaCleaningSaga); yield select(falafelSelector); Retrieve a slice of the redux store
61. @andrekovac
62. @andrekovac Generator functions yield put(createFalafelsSuccess()); Introduced in 6th Edition of JavaScript, i.e. ECMAScript 2015 powered by..
63. @andrekovac Generator functions
64. @andrekovac Generator functions as iterators function* helloWorld() { yield 'hello'; yield 'world'; return '!'; } Generator *
65. @andrekovac Generator functions as iterators function* helloWorld() { yield 'hello'; yield 'world'; return '!'; } Generator *
66. @andrekovac Generator functions as iterators function* helloWorld() { yield 'hello'; yield 'world'; return '!'; } Generator *
67. @andrekovac Generator functions as iterators function* helloWorld() { yield 'hello'; yield 'world'; return '!'; } Generator *
68. @andrekovac Generator functions as iterators function* helloWorld() { yield 'hello'; yield 'world'; return '!'; } Generator *
69. @andrekovac Generator functions as iterators function* helloWorld() { yield 'hello'; yield 'world'; return '!'; } Generator *
70. @andrekovac Generator functions as iterators function* helloWorld() { yield 'hello'; yield 'world'; return '!'; } Generator *
71. @andrekovac Generator functions as iterators function* helloWorld() { yield 'hello'; yield 'world'; return '!'; } Generator * Caller/ Runner const generator = helloWorld(); console.log(generator.next()); console.log(generator.next()); console.log(generator.next());
72. @andrekovac Generator functions as iterators function* helloWorld() { yield 'hello'; yield 'world'; return '!'; } Caller/ Runner const generator = helloWorld(); console.log(generator.next()); console.log(generator.next()); console.log(generator.next()); Generator *
73. @andrekovac Generator functions as iterators Caller/ Runner const generator = helloWorld(); console.log(generator.next()); console.log(generator.next()); console.log(generator.next()); Generator * function* helloWorld() { yield 'hello'; yield 'world'; return '!'; }
74. @andrekovac Generator functions as iterators Caller/ Runner const generator = helloWorld(); console.log(generator.next()); console.log(generator.next()); console.log(generator.next()); Generator * function* helloWorld() { yield 'hello'; yield 'world'; return '!'; }
75. @andrekovac Generator functions as iterators Caller/ Runner const generator = helloWorld(); console.log(generator.next()); console.log(generator.next()); console.log(generator.next()); Generator * function* helloWorld() { yield 'hello'; yield 'world'; return '!'; } Demo
76. @andrekovac Generator functions as iterators function* generatorFunction(i) { let output = 0; while (true) { output += 10; yield i + output; } }
77. @andrekovac Generator functions as iterators function* generatorFunction(i) { let output = 0; while (true) { output += 10; yield i + output; } } Demo
78. @andrekovac Generator function …and observers at the same time const buyChickpeas = money => ({ chickpeas: 100 }); function* supermarket() { const chickpeas = yield buyChickpeas(); return chickpeas; } Generator *
79. @andrekovac Generator function …and observers at the same time const buyChickpeas = money => ({ chickpeas: 100 }); function* supermarket() { const chickpeas = yield buyChickpeas(); return chickpeas; } Generator * Caller/ Runner const generator = supermarket(); const cp = generator.next().value; generator.next(cp);
80. @andrekovac Generator function …and observers at the same time const buyChickpeas = money => ({ chickpeas: 100 }); function* supermarket() { const chickpeas = yield buyChickpeas(); return chickpeas; } Generator * Caller/ Runner const generator = supermarket(); const cp = generator.next().value; generator.next(cp);
81. @andrekovac Generator function …and observers at the same time const buyChickpeas = money => ({ chickpeas: 100 }); function* supermarket() { const chickpeas = yield buyChickpeas(); return chickpeas; } Generator * Caller/ Runner const generator = supermarket(); const cp = generator.next().value; generator.next(cp);
82. @andrekovac Generator function …and observers at the same time const buyChickpeas = money => ({ chickpeas: 100 }); function* supermarket() { const chickpeas = yield buyChickpeas(); return chickpeas; } Generator * Caller/ Runner const generator = supermarket(); const cp = generator.next().value; generator.next(cp);
83. @andrekovac Generator function …and observers at the same time const buyChickpeas = money => ({ chickpeas: 100 }); function* supermarket() { const chickpeas = yield buyChickpeas(); return chickpeas; } Generator * Caller/ Runner const generator = supermarket(); const cp = generator.next().value; generator.next(cp);
84. @andrekovac Generator function …and observers at the same time Generator * Caller/ Runner const generator = supermarket(); const cp = generator.next().value; generator.next(cp); const buyChickpeas = money => ({ chickpeas: 100 }); function* supermarket() { const chickpeas = yield buyChickpeas(); return chickpeas; } done: true
85. @andrekovac Async falafel revisited const makeFalafel = async (money, ingredients) => { const chickpeas = await getChickpeas(money); const mixture = await getMixture({ ...chickpeas, ...ingredients }); const falafel = await deepFry(mixture); return falafel; };
86. @andrekovac const makeFalafel = async (money, ingredients) => { const chickpeas = await getChickpeas(money); const mixture = await getMixture({ ...chickpeas, ...ingredients }); const falafel = await deepFry(mixture); return falafel; }; const makeFalafel = function* makeFalafel(money, ingredients) { const chickpeas = yield getChickpeas(money); const mixture = yield getMixture({ ...chickpeas, ...ingredients }); const falafel = yield deepFry(mixture); return falafel; }; Async/await VS Generator functions
87. @andrekovac const makeFalafel = function* makeFalafel(money, ingredients) { const chickpeas = yield getChickpeas(money); const mixture = yield getMixture({ ...chickpeas, ...ingredients }); const falafel = yield deepFry(mixture); return falafel; }; const makeFalafel = async (money, ingredients) => { const chickpeas = await getChickpeas(money); const mixture = await getMixture({ ...chickpeas, ...ingredients }); const falafel = await deepFry(mixture); return falafel; }; Demo Async/await VS Generator functions
88. @andrekovac async/await + generator functions
89. @andrekovac Async/await V8 engine implementation of async/await is done with generators https://chromium.googlesource.com/v8/v8.git/+/d08c0304c5779223d6c468373af4815ec3ccdb84/src/js/harmony-async-await.js#34
90. @andrekovac Bluetooth Low Energy Beacons
91. @andrekovac Bluetooth Low Energy Beacons Applications
 
 Retail Museums Cars Games https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.mac5.ca%2Fwp-content%2Fuploads%2F2017%2F12%2Fbeacon-girl.jpg&f=1
92. @andrekovac iBeacon { name: string uniqueId: string firmwareVersion: string batteryLevel: number batteryPowered: boolean transmissionPower: number hasConfigurationProfile: boolean shuffled: boolean locked: boolean model: string peripheral: string rssi: number updatedAt: number } { uuid: string major: number minor: number }
93. @andrekovac Eddystone Beacon { namespace: string instanceId: string url: string eid: string encryptedTelemetry: string, telemetry: { batteryVoltage: number temperature: number, pduCount: number timeSincePowerUp: number, version: number, } } { uuid: string major: number minor: number }
94. @andrekovac + react-native-kontaktio =
95. @andrekovac + = https://github.com/Andruschenko/redux-saga-event-channel-ibeacon-example Check out the code on GitHub
96. @andrekovac https://github.com/Andruschenko/redux-saga-event-channel-ibeacon-example Phone Beacon Distance Demo
97. @andrekovac Beacon watcher const discoverBeaconsWatcher = function* discoverBeaconsWatcher(): Saga<void> { yield takeLatest(BEACON_DISCOVERY_INIT, beaconDiscoverySaga); };
98. @andrekovac const discoverBeaconsWatcher = function* discoverBeaconsWatcher(): Saga<void> { yield takeLatest(BEACON_DISCOVERY_INIT, beaconDiscoverySaga); }; Beacon watcher
99. @andrekovac takeLatest const discoverBeaconsWatcherTakeLatest = () => fork(function*() { let lastTask; while (true) { yield take(BEACON_DISCOVERY_INIT); if (lastTask) { yield cancel(lastTask); } lastTask = yield fork(beaconDiscoverySaga); } }); under the hood
100. @andrekovac takeLatest const discoverBeaconsWatcherTakeLatest = () => fork(function*() { let lastTask; while (true) { yield take(BEACON_DISCOVERY_INIT); if (lastTask) { yield cancel(lastTask); } lastTask = yield fork(beaconDiscoverySaga); } }); under the hood
101. @andrekovac takeLatest const discoverBeaconsWatcherTakeLatest = () => fork(function*() { let lastTask; while (true) { yield take(BEACON_DISCOVERY_INIT); if (lastTask) { yield cancel(lastTask); } lastTask = yield fork(beaconDiscoverySaga); } }); under the hood
102. @andrekovac takeLatest const discoverBeaconsWatcherTakeLatest = () => fork(function*() { let lastTask; while (true) { yield take(BEACON_DISCOVERY_INIT); if (lastTask) { yield cancel(lastTask); } lastTask = yield fork(beaconDiscoverySaga); } }); under the hood
103. @andrekovac takeLatest const discoverBeaconsWatcherTakeLatest = () => fork(function*() { let lastTask; while (true) { yield take(BEACON_DISCOVERY_INIT); if (lastTask) { yield cancel(lastTask); } lastTask = yield fork(beaconDiscoverySaga); } }); under the hood
104. @andrekovac Returned values and uncaught errors propagate upward Cancellation propagates downward. cancel const discoverBeaconsWatcherTakeLatest = () => fork(function*() { let lastTask; while (true) { yield take(BEACON_DISCOVERY_INIT); if (lastTask) { yield cancel(lastTask); } lastTask = yield fork(beaconDiscoverySaga); } }); ⬇ ⬆
105. @andrekovac
106. @andrekovac Bluetooth
107. @andrekovac export const setupBeaconDiscoveryChannel = () => eventChannel<Array<Beacon>>(emitter => { let listener; // Add beacon listener listener = kontaktEmitter && kontaktEmitter.addListener("didDiscoverDevices", ({ beacons }) => { emitter(beacons); }); // Unsubscribe function return () => { if (listener) listener.remove(); }; }); Redux-saga event channels
108. @andrekovac export const setupBeaconDiscoveryChannel = () => eventChannel<Array<Beacon>>(emitter => { let listener; // Add beacon listener listener = kontaktEmitter && kontaktEmitter.addListener("didDiscoverDevices", ({ beacons }) => { emitter(beacons); }); // Unsubscribe function return () => { if (listener) listener.remove(); }; }); Redux-saga event channels
109. @andrekovac export const setupBeaconDiscoveryChannel = () => eventChannel<Array<Beacon>>(emitter => { let listener; // Add beacon listener listener = kontaktEmitter && kontaktEmitter.addListener("didDiscoverDevices", ({ beacons }) => { emitter(beacons); }); // Unsubscribe function return () => { if (listener) listener.remove(); }; }); Redux-saga event channels
110. @andrekovac export const setupBeaconDiscoveryChannel = () => eventChannel<Array<Beacon>>(emitter => { let listener; // Add beacon listener listener = kontaktEmitter && kontaktEmitter.addListener("didDiscoverDevices", ({ beacons }) => { emitter(beacons); }); // Unsubscribe function return () => { if (listener) listener.remove(); }; }); Redux-saga event channels
111. @andrekovac export const setupBeaconDiscoveryChannel = () => eventChannel<Array<Beacon>>(emitter => { let listener; // Add beacon listener listener = kontaktEmitter && kontaktEmitter.addListener("didDiscoverDevices", ({ beacons }) => { emitter(beacons); }); // Unsubscribe function return () => { if (listener) listener.remove(); }; }); Redux-saga event channels
112. @andrekovac export const beaconDiscoverySaga = function* beaconDiscoverySaga(): Saga<void> { yield call(Kontakt.init); yield call(Kontakt.configure, { invalidationAge: 2000 }); yield call(Kontakt.startDiscovery); yield put(beaconDiscoveryStart()); const beaconChannel = yield call(setupBeaconDiscoveryChannel); try { while (true) { const discoveredBeacons = yield take(beaconChannel); if (discoveredBeacons) { yield put(beaconDiscoverySuccess(discoveredBeacons)); } } } catch (error) { yield put(beaconDiscoveryError(error)); } finally { if (yield cancelled()) { yield call(beaconChannel.close); yield put(beaconDiscoveryStop()); } } }; Start beacon discovery
113. @andrekovac export const beaconDiscoverySaga = function* beaconDiscoverySaga(): Saga<void> { yield call(Kontakt.init); yield call(Kontakt.configure, { invalidationAge: 2000 }); yield call(Kontakt.startDiscovery); yield put(beaconDiscoveryStart()); const beaconChannel = yield call(setupBeaconDiscoveryChannel); try { while (true) { const discoveredBeacons = yield take(beaconChannel); if (discoveredBeacons) { yield put(beaconDiscoverySuccess(discoveredBeacons)); } } } catch (error) { yield put(beaconDiscoveryError(error)); } finally { if (yield cancelled()) { yield call(beaconChannel.close); yield put(beaconDiscoveryStop()); } } }; Start beacon discovery
114. @andrekovac export const beaconDiscoverySaga = function* beaconDiscoverySaga(): Saga<void> { yield call(Kontakt.init); yield call(Kontakt.configure, { invalidationAge: 2000 }); yield call(Kontakt.startDiscovery); yield put(beaconDiscoveryStart()); const beaconChannel = yield call(setupBeaconDiscoveryChannel); try { while (true) { const discoveredBeacons = yield take(beaconChannel); if (discoveredBeacons) { yield put(beaconDiscoverySuccess(discoveredBeacons)); } } } catch (error) { yield put(beaconDiscoveryError(error)); } finally { if (yield cancelled()) { yield call(beaconChannel.close); yield put(beaconDiscoveryStop()); } } }; Notify redux store
115. @andrekovac export const beaconDiscoverySaga = function* beaconDiscoverySaga(): Saga<void> { yield call(Kontakt.init); yield call(Kontakt.configure, { invalidationAge: 2000 }); yield call(Kontakt.startDiscovery); yield put(beaconDiscoveryStart()); const beaconChannel = yield call(setupBeaconDiscoveryChannel); try { while (true) { const discoveredBeacons = yield take(beaconChannel); if (discoveredBeacons) { yield put(beaconDiscoverySuccess(discoveredBeacons)); } } } catch (error) { yield put(beaconDiscoveryError(error)); } finally { if (yield cancelled()) { yield call(beaconChannel.close); yield put(beaconDiscoveryStop()); } } }; Setup beacon channel
116. @andrekovac export const beaconDiscoverySaga = function* beaconDiscoverySaga(): Saga<void> { yield call(Kontakt.init); yield call(Kontakt.configure, { invalidationAge: 2000 }); yield call(Kontakt.startDiscovery); yield put(beaconDiscoveryStart()); const beaconChannel = yield call(setupBeaconDiscoveryChannel); try { while (true) { const discoveredBeacons = yield take(beaconChannel); if (discoveredBeacons) { yield put(beaconDiscoverySuccess(discoveredBeacons)); } } } catch (error) { yield put(beaconDiscoveryError(error)); } finally { if (yield cancelled()) { yield call(beaconChannel.close); yield put(beaconDiscoveryStop()); } } }; Infinite loop
117. @andrekovac export const beaconDiscoverySaga = function* beaconDiscoverySaga(): Saga<void> { yield call(Kontakt.init); yield call(Kontakt.configure, { invalidationAge: 2000 }); yield call(Kontakt.startDiscovery); yield put(beaconDiscoveryStart()); const beaconChannel = yield call(setupBeaconDiscoveryChannel); try { while (true) { const discoveredBeacons = yield take(beaconChannel); if (discoveredBeacons) { yield put(beaconDiscoverySuccess(discoveredBeacons)); } } } catch (error) { yield put(beaconDiscoveryError(error)); } finally { if (yield cancelled()) { yield call(beaconChannel.close); yield put(beaconDiscoveryStop()); } } }; Listen for beacon signals
118. @andrekovac export const beaconDiscoverySaga = function* beaconDiscoverySaga(): Saga<void> { yield call(Kontakt.init); yield call(Kontakt.configure, { invalidationAge: 2000 }); yield call(Kontakt.startDiscovery); yield put(beaconDiscoveryStart()); const beaconChannel = yield call(setupBeaconDiscoveryChannel); try { while (true) { const discoveredBeacons = yield take(beaconChannel); if (discoveredBeacons) { yield put(beaconDiscoverySuccess(discoveredBeacons)); } } } catch (error) { yield put(beaconDiscoveryError(error)); } finally { if (yield cancelled()) { yield call(beaconChannel.close); yield put(beaconDiscoveryStop()); } } }; Send discovered beacons to reducer
119. @andrekovac export const beaconDiscoverySaga = function* beaconDiscoverySaga(): Saga<void> { yield call(Kontakt.init); yield call(Kontakt.configure, { invalidationAge: 2000 }); yield call(Kontakt.startDiscovery); yield put(beaconDiscoveryStart()); const beaconChannel = yield call(setupBeaconDiscoveryChannel); try { while (true) { const discoveredBeacons = yield take(beaconChannel); if (discoveredBeacons) { yield put(beaconDiscoverySuccess(discoveredBeacons)); } } } catch (error) { yield put(beaconDiscoveryError(error)); } finally { if (yield cancelled()) { yield call(beaconChannel.close); yield put(beaconDiscoveryStop()); } } }; Notify store in case of error
120. @andrekovac export const beaconDiscoverySaga = function* beaconDiscoverySaga(): Saga<void> { yield call(Kontakt.init); yield call(Kontakt.configure, { invalidationAge: 2000 }); yield call(Kontakt.startDiscovery); yield put(beaconDiscoveryStart()); const beaconChannel = yield call(setupBeaconDiscoveryChannel); try { while (true) { const discoveredBeacons = yield take(beaconChannel); if (discoveredBeacons) { yield put(beaconDiscoverySuccess(discoveredBeacons)); } } } catch (error) { yield put(beaconDiscoveryError(error)); } finally { if (yield cancelled()) { yield call(beaconChannel.close); yield put(beaconDiscoveryStop()); } } }; React if cancelled
121. @andrekovac export const beaconDiscoverySaga = function* beaconDiscoverySaga(): Saga<void> { yield call(Kontakt.init); yield call(Kontakt.configure, { invalidationAge: 2000 }); yield call(Kontakt.startDiscovery); yield put(beaconDiscoveryStart()); const beaconChannel = yield call(setupBeaconDiscoveryChannel); try { while (true) { const discoveredBeacons = yield take(beaconChannel); if (discoveredBeacons) { yield put(beaconDiscoverySuccess(discoveredBeacons)); } } } catch (error) { yield put(beaconDiscoveryError(error)); } finally { if (yield cancelled()) { yield call(beaconChannel.close); yield put(beaconDiscoveryStop()); } } }; Close beacon channel -> Will trigger unsubscribe function.
122. @andrekovac export const beaconDiscoverySaga = function* beaconDiscoverySaga(): Saga<void> { yield call(Kontakt.init); yield call(Kontakt.configure, { invalidationAge: 2000 }); yield call(Kontakt.startDiscovery); yield put(beaconDiscoveryStart()); const beaconChannel = yield call(setupBeaconDiscoveryChannel); try { while (true) { const discoveredBeacons = yield take(beaconChannel); if (discoveredBeacons) { yield put(beaconDiscoverySuccess(discoveredBeacons)); } } } catch (error) { yield put(beaconDiscoveryError(error)); } finally { if (yield cancelled()) { yield call(beaconChannel.close); yield put(beaconDiscoveryStop()); } } }; Notify store
123. @andrekovac redux-saga unit tests A great way to learn about generators!
124. @andrekovac it("initializes Kontaktio", () => { const expectedYield = call(Kontakt.init); expect(generator.next().value).toEqual(expectedYield); }); it("configures beacon library", () => { const expectedYield = call(Kontakt.configure, { invalidationAge: 2000 }); expect(generator.next().value).toEqual(expectedYield); }); it("start beacon discovery", () => { const expectedYield = call(Kontakt.startDiscovery); expect(generator.next().value).toEqual(expectedYield); }); it("notifies the store that beacon discovery has begun", () => { const expectedYield = put(beaconDiscoveryStart()); expect(generator.next().value).toEqual(expectedYield); }); Unit Tests
125. @andrekovac it("initializes Kontaktio", () => { const expectedYield = call(Kontakt.init); expect(generator.next().value).toEqual(expectedYield); }); Unit Tests export const beaconDiscoverySaga = function* beaconDiscoverySaga(): Saga<void> { yield call(Kontakt.init); yield call(Kontakt.configure, { invalidationAge: 2000 }); yield call(Kontakt.startDiscovery); yield put(beaconDiscoveryStart()); ... sagas.js sagas.test.js
126. @andrekovac Unit Tests export const beaconDiscoverySaga = function* beaconDiscoverySaga(): Saga<void> { yield call(Kontakt.init); yield call(Kontakt.configure, { invalidationAge: 2000 }); yield call(Kontakt.startDiscovery); yield put(beaconDiscoveryStart()); ... sagas.js sagas.test.js it("initializes Kontaktio", () => { const expectedYield = call(Kontakt.init); expect(generator.next().value).toEqual(expectedYield); });
127. @andrekovac Unit Tests export const beaconDiscoverySaga = function* beaconDiscoverySaga(): Saga<void> { yield call(Kontakt.init); yield call(Kontakt.configure, { invalidationAge: 2000 }); yield call(Kontakt.startDiscovery); yield put(beaconDiscoveryStart()); ... sagas.js sagas.test.js it("initializes Kontaktio", () => { const expectedYield = call(Kontakt.init); expect(generator.next().value).toEqual(expectedYield); });
128. @andrekovac Unit Tests export const beaconDiscoverySaga = function* beaconDiscoverySaga(): Saga<void> { yield call(Kontakt.init); yield call(Kontakt.configure, { invalidationAge: 2000 }); yield call(Kontakt.startDiscovery); yield put(beaconDiscoveryStart()); ... sagas.js sagas.test.js it("initializes Kontaktio", () => { const expectedYield = call(Kontakt.init); expect(generator.next().value).toEqual(expectedYield); });
129. @andrekovac Unit Tests export const beaconDiscoverySaga = function* beaconDiscoverySaga(): Saga<void> { yield call(Kontakt.init); yield call(Kontakt.configure, { invalidationAge: 2000 }); yield call(Kontakt.startDiscovery); yield put(beaconDiscoveryStart()); ... sagas.js sagas.test.js it("initializes Kontaktio", () => { const expectedYield = call(Kontakt.init); expect(generator.next().value).toEqual(expectedYield); }); { value: , done: boolean }
130. @andrekovac Unit Tests export const beaconDiscoverySaga = function* beaconDiscoverySaga(): Saga<void> { yield call(Kontakt.init); yield call(Kontakt.configure, { invalidationAge: 2000 }); yield call(Kontakt.startDiscovery); yield put(beaconDiscoveryStart()); ... sagas.js sagas.test.js it("initializes Kontaktio", () => { const expectedYield = call(Kontakt.init); expect(generator.next().value).toEqual(expectedYield); }); it("configures beacon library", () => { const expectedYield = call(Kontakt.configure, { invalidationAge: 2000 }); expect(generator.next().value).toEqual(expectedYield); });
131. @andrekovac Unit Tests export const beaconDiscoverySaga = function* beaconDiscoverySaga(): Saga<void> { yield call(Kontakt.init); yield call(Kontakt.configure, { invalidationAge: 2000 }); yield call(Kontakt.startDiscovery); yield put(beaconDiscoveryStart()); ... sagas.js sagas.test.js it("initializes Kontaktio", () => { const expectedYield = call(Kontakt.init); expect(generator.next().value).toEqual(expectedYield); }); it("configures beacon library", () => { const expectedYield = call(Kontakt.configure, { invalidationAge: 2000 }); expect(generator.next().value).toEqual(expectedYield); });
132. @andrekovac Unit Tests export const beaconDiscoverySaga = function* beaconDiscoverySaga(): Saga<void> { yield call(Kontakt.init); yield call(Kontakt.configure, { invalidationAge: 2000 }); yield call(Kontakt.startDiscovery); yield put(beaconDiscoveryStart()); ... sagas.js sagas.test.js it("initializes Kontaktio", () => { const expectedYield = call(Kontakt.init); expect(generator.next().value).toEqual(expectedYield); }); it("configures beacon library", () => { const expectedYield = call(Kontakt.configure, { invalidationAge: 2000 }); expect(generator.next().value).toEqual(expectedYield); });
133. @andrekovac Unit Tests export const beaconDiscoverySaga = function* beaconDiscoverySaga(): Saga<void> { yield call(Kontakt.init); yield call(Kontakt.configure, { invalidationAge: 2000 }); yield call(Kontakt.startDiscovery); yield put(beaconDiscoveryStart()); ... sagas.js sagas.test.js it("initializes Kontaktio", () => { const expectedYield = call(Kontakt.init); expect(generator.next().value).toEqual(expectedYield); }); it("configures beacon library", () => { const expectedYield = call(Kontakt.configure, { invalidationAge: 2000 }); expect(generator.next().value).toEqual(expectedYield); });
134. @andrekovac it("initializes Kontaktio", () => { const expectedYield = call(Kontakt.init); expect(generator.next().value).toEqual(expectedYield); }); it("configures beacon library", () => { const expectedYield = call(Kontakt.configure, { invalidationAge: 2000 }); expect(generator.next().value).toEqual(expectedYield); }); it("start beacon discovery", () => { const expectedYield = call(Kontakt.startDiscovery); expect(generator.next().value).toEqual(expectedYield); }); it("notifies the store that beacon discovery has begun", () => { const expectedYield = put(beaconDiscoveryStart()); expect(generator.next().value).toEqual(expectedYield); }); Unit Tests
135. @andrekovac it("initializes Kontaktio", () => { const expectedYield = call(Kontakt.init); expect(generator.next().value).toEqual(expectedYield); }); it("configures beacon library", () => { const expectedYield = call(Kontakt.configure, { invalidationAge: 2000 }); expect(generator.next().value).toEqual(expectedYield); }); it("start beacon discovery", () => { const expectedYield = call(Kontakt.startDiscovery); expect(generator.next().value).toEqual(expectedYield); }); it("notifies the store that beacon discovery has begun", () => { const expectedYield = put(beaconDiscoveryStart()); expect(generator.next().value).toEqual(expectedYield); }); Unit Tests
136. @andrekovac it("initializes Kontaktio", () => { const expectedYield = call(Kontakt.init); expect(generator.next().value).toEqual(expectedYield); }); it("configures beacon library", () => { const expectedYield = call(Kontakt.configure, { invalidationAge: 2000 }); expect(generator.next().value).toEqual(expectedYield); }); it("start beacon discovery", () => { const expectedYield = call(Kontakt.startDiscovery); expect(generator.next().value).toEqual(expectedYield); }); it("notifies the store that beacon discovery has begun", () => { const expectedYield = put(beaconDiscoveryStart()); expect(generator.next().value).toEqual(expectedYield); }); Unit Tests
137. @andrekovac it("initializes Kontaktio", () => { const expectedYield = call(Kontakt.init); expect(generator.next().value).toEqual(expectedYield); }); it("configures beacon library", () => { const expectedYield = call(Kontakt.configure, { invalidationAge: 2000 }); expect(generator.next().value).toEqual(expectedYield); }); it("start beacon discovery", () => { const expectedYield = call(Kontakt.startDiscovery); expect(generator.next().value).toEqual(expectedYield); }); it("notifies the store that beacon discovery has begun", () => { const expectedYield = put(beaconDiscoveryStart()); expect(generator.next().value).toEqual(expectedYield); }); Unit Tests
138. @andrekovac it("initializes Kontaktio", () => { const expectedYield = call(Kontakt.init); expect(generator.next().value).toEqual(expectedYield); }); it("configures beacon library", () => { const expectedYield = call(Kontakt.configure, { invalidationAge: 2000 }); expect(generator.next().value).toEqual(expectedYield); }); it("start beacon discovery", () => { const expectedYield = call(Kontakt.startDiscovery); expect(generator.next().value).toEqual(expectedYield); }); it("notifies the store that beacon discovery has begun", () => { const expectedYield = put(beaconDiscoveryStart()); expect(generator.next().value).toEqual(expectedYield); }); Unit Tests
139. @andrekovac it("initializes Kontaktio", () => { const expectedYield = call(Kontakt.init); expect(generator.next().value).toEqual(expectedYield); }); it("configures beacon library", () => { const expectedYield = call(Kontakt.configure, { invalidationAge: 2000 }); expect(generator.next().value).toEqual(expectedYield); }); it("start beacon discovery", () => { const expectedYield = call(Kontakt.startDiscovery); expect(generator.next().value).toEqual(expectedYield); }); it("notifies the store that beacon discovery has begun", () => { const expectedYield = put(beaconDiscoveryStart()); expect(generator.next().value).toEqual(expectedYield); }); Unit Tests
140. @andrekovac it("initializes Kontaktio", () => { const expectedYield = call(Kontakt.init); expect(generator.next().value).toEqual(expectedYield); }); it("configures beacon library", () => { const expectedYield = call(Kontakt.configure, { invalidationAge: 2000 }); expect(generator.next().value).toEqual(expectedYield); }); it("start beacon discovery", () => { const expectedYield = call(Kontakt.startDiscovery); expect(generator.next().value).toEqual(expectedYield); }); it("notifies the store that beacon discovery has begun", () => { const expectedYield = put(beaconDiscoveryStart()); expect(generator.next().value).toEqual(expectedYield); }); Unit Tests
141. @andrekovac event channel +
142. @andrekovac Try it yourself! Let your computer be a bluetooth beacon MactAsBeacon https://github.com/ timd/MactsAsBeacon
143. @andrekovac @andrekovac @Andruschenko Find me and my projects