Small presentation for Charleston.js on the Async algebraic data type in JavaScript (demo omitted) as an alternative way to work with asynchronous control structures than Promises & async/await.

1. Asynctweeter :: @RobertWPearce
github :: rpearce
email :: me@robertwpearce.com
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 1

2. about me
Hi, I'm Robert
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 2

3. about me
Hi, I'm Robert
• My kiwi wife & I have just moved back from New Zealand
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 2

4. about me
Hi, I'm Robert
• My kiwi wife & I have just moved back from New Zealand
• Started out at Jack Russell Software w/ Tom Wilson in 2011
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 2

5. about me
Hi, I'm Robert
• My kiwi wife & I have just moved back from New Zealand
• Started out at Jack Russell Software w/ Tom Wilson in 2011
• Currently with Articulate, the e-learning software company
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 2

6. about me
Hi, I'm Robert
• My kiwi wife & I have just moved back from New Zealand
• Started out at Jack Russell Software w/ Tom Wilson in 2011
• Currently with Articulate, the e-learning software company
• Work with FP in JS all day
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 2

7. about me
Hi, I'm Robert
• My kiwi wife & I have just moved back from New Zealand
• Started out at Jack Russell Software w/ Tom Wilson in 2011
• Currently with Articulate, the e-learning software company
• Work with FP in JS all day
• Learn Haskell (λ) in my free time
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 2

8. about me
Hi, I'm Robert
• My kiwi wife & I have just moved back from New Zealand
• Started out at Jack Russell Software w/ Tom Wilson in 2011
• Currently with Articulate, the e-learning software company
• Work with FP in JS all day
• Learn Haskell (λ) in my free time
• Pretend to know what I'm doing
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 2

9. Question:
what are we going to do?
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 3

10. Answer:
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 4

11. Answer:
• read & transform files with Promises
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 4

12. Answer:
• read & transform files with Promises
•
!
but with Asyncs
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 4

13. Answer:
• read & transform files with Promises
•
!
but with Asyncs
• ...this is our Friday night
✨
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 4

14. Use case?
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 5

15. Use case?
• reactjs component library monorepo
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 5

16. Use case?
• reactjs component library monorepo
• make it easy to bootstrap a new package
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 5

17. Use case?
• reactjs component library monorepo
• make it easy to bootstrap a new package
• solution:
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 5

18. Use case?
• reactjs component library monorepo
• make it easy to bootstrap a new package
• solution:
1. make templates
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 5

19. Use case?
• reactjs component library monorepo
• make it easy to bootstrap a new package
• solution:
1. make templates
2. make CLI app to collect options
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 5

20. Use case?
• reactjs component library monorepo
• make it easy to bootstrap a new package
• solution:
1. make templates
2. make CLI app to collect options
3. replace dummy template bits with options
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 5

21. refresher: fs.readFile
import fs from 'fs'
fs.readFile('/path/to/file', 'utf8', (err, contents) => {
if (err) {
throw err
}
console.log(contents)
})
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 6

22. refresher: fs.readFile
import fs from 'fs'
fs.readFile('/path/to/file', 'utf8', (err, contents) => {
if (err) {
throw err
}
console.log(contents)
})
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 6

23. refresher: fs.readFile
import fs from 'fs'
fs.readFile('/path/to/file', 'utf8', (err, contents) => {
if (err) {
throw err
}
console.log(contents)
})
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 6

24. refresher: fs.readFile
import fs from 'fs'
fs.readFile('/path/to/file', 'utf8', (err, contents) => {
if (err) {
throw err
}
console.log(contents)
})
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 6

25. refresher: fs.readFile
import fs from 'fs'
fs.readFile('/path/to/file', 'utf8', (err, contents) => {
if (err) {
throw err
}
console.log(contents)
})
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 6

26. refresher: fs.readFile
import fs from 'fs'
fs.readFile('/path/to/file', 'utf8', (err, contents) => {
if (err) {
throw err
}
console.log(contents)
})
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 6

27. refresher: fs.promises.readFile
import fs, { promises as fsp } from 'fs'
fsp
.readFile('/path/to/file', 'utf8')
.then(console.log)
.catch(console.error)
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 7

28. refresher: fs.promises.readFile
import fs, { promises as fsp } from 'fs'
fsp
.readFile('/path/to/file', 'utf8')
.then(console.log)
.catch(console.error)
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 7

29. refresher: fs.promises.readFile
import fs, { promises as fsp } from 'fs'
fsp
.readFile('/path/to/file', 'utf8')
.then(console.log)
.catch(console.error)
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 7

30. refresher: fs.promises.readFile
import fs, { promises as fsp } from 'fs'
fsp
.readFile('/path/to/file', 'utf8')
.then(console.log)
.catch(console.error)
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 7

31. refresher: fs.promises.readFile
import fs, { promises as fsp } from 'fs'
fsp
.readFile('/path/to/file', 'utf8')
.then(console.log)
.catch(console.error)
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 7

32. refresher: fs.promises.readFile
import fs, { promises as fsp } from 'fs'
fsp
.readFile('/path/to/file', 'utf8')
.then(console.log)
.catch(console.error)
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 7

33. refresher: async/await
import fs, { promises as fsp } from 'fs'
const toUpper = x => x.toUpperCase()
const readFileAndTransform = async (fn, f) => {
const contents = await fsp.readFile(f, 'utf8')
return fn(contents)
}
readFileAndTransform(toUpper, '/path/to/file')
.then(console.log)
.catch(console.error)
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 8

34. refresher: async/await
import fs, { promises as fsp } from 'fs'
const toUpper = x => x.toUpperCase()
const readFileAndTransform = async (fn, f) => {
const contents = await fsp.readFile(f, 'utf8')
return fn(contents)
}
readFileAndTransform(toUpper, '/path/to/file')
.then(console.log)
.catch(console.error)
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 8

35. refresher: async/await
import fs, { promises as fsp } from 'fs'
const toUpper = x => x.toUpperCase()
const readFileAndTransform = async (fn, f) => {
const contents = await fsp.readFile(f, 'utf8')
return fn(contents)
}
readFileAndTransform(toUpper, '/path/to/file')
.then(console.log)
.catch(console.error)
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 8

36. refresher: async/await
import fs, { promises as fsp } from 'fs'
const toUpper = x => x.toUpperCase()
const readFileAndTransform = async (fn, f) => {
const contents = await fsp.readFile(f, 'utf8')
return fn(contents)
}
readFileAndTransform(toUpper, '/path/to/file')
.then(console.log)
.catch(console.error)
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 8

37. refresher: async/await
import fs, { promises as fsp } from 'fs'
const toUpper = x => x.toUpperCase()
const readFileAndTransform = async (fn, f) => {
const contents = await fsp.readFile(f, 'utf8')
return fn(contents)
}
readFileAndTransform(toUpper, '/path/to/file')
.then(console.log)
.catch(console.error)
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 8

38. refresher: async/await
import fs, { promises as fsp } from 'fs'
const toUpper = x => x.toUpperCase()
const readFileAndTransform = async (fn, f) => {
const contents = await fsp.readFile(f, 'utf8')
return fn(contents)
}
readFileAndTransform(toUpper, '/path/to/file')
.then(console.log)
.catch(console.error)
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 8

39. refresher: async/await
import fs, { promises as fsp } from 'fs'
const toUpper = x => x.toUpperCase()
const readFileAndTransform = async (fn, f) => {
const contents = await fsp.readFile(f, 'utf8')
return fn(contents)
}
readFileAndTransform(toUpper, '/path/to/file')
.then(console.log)
.catch(console.error)
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 8

40. refresher: async/await
import fs, { promises as fsp } from 'fs'
const toUpper = x => x.toUpperCase()
const readFileAndTransform = async (fn, f) => {
const contents = await fsp.readFile(f, 'utf8')
return fn(contents)
}
readFileAndTransform(toUpper, '/path/to/file')
.then(console.log)
.catch(console.error)
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 8

41. refresher: async/await
import fs, { promises as fsp } from 'fs'
const toUpper = x => x.toUpperCase()
const readFileAndTransform = async (fn, f) => {
const contents = await fsp.readFile(f, 'utf8')
return fn(contents)
}
readFileAndTransform(toUpper, '/path/to/file')
.then(console.log)
.catch(console.error)
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 8

42. drawbacks with callbacks
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 9

43. drawbacks with callbacks
• asynchronous callbacks (like in fs.readFile) don't return a
value to caller
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 9

44. drawbacks with callbacks
• asynchronous callbacks (like in fs.readFile) don't return a
value to caller
• (not composable...easily)
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 9

45. drawbacks with callbacks
• asynchronous callbacks (like in fs.readFile) don't return a
value to caller
• (not composable...easily)
• don't work well with control flow (if (fs.readFile(...)))
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 9

46. drawbacks with callbacks
• asynchronous callbacks (like in fs.readFile) don't return a
value to caller
• (not composable...easily)
• don't work well with control flow (if (fs.readFile(...)))
• inevitably nest ---->
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 9

47. @RobertWPearce | rwp.im | 2019-08-23 charleston.js 10

48. Callbacks are the narrowing spiral
staircase to hell. They are control
flow as designed by M.C. Escher.
— Dr. Boolean, Professor Frisby's Mostly Adequate Guide to
Functional Programming
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 11

49. Promises are awesome! But...
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 12

50. Promises are awesome! But...
• values; not computations (like a function or other structure)
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 12

51. Promises are awesome! But...
• values; not computations (like a function or other structure)
• don't support cancellation
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 12

52. Promises are awesome! But...
• values; not computations (like a function or other structure)
• don't support cancellation
• don't support nesting
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 12

53. Promises are awesome! But...
• values; not computations (like a function or other structure)
• don't support cancellation
• don't support nesting
• impure
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 12

54. !
might not phase you at all
i still ❤ callbacks & promises
but let's see a different tool!
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 13

55. break out neovim & friends
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 14

56. what exactly is an Async (aka Task)?
• "lazy Sum Type that implements an asynchronous control
structure"
• will not execute until needed
• keeps track of its internals (
!
for cleanup & cancellation)
Async e a = Rejected e | Resolved a
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 15

57. example in the wild wrapping the axios library
https://github.com/articulate/asyncios
// POST request
asyncios({
method: 'POST',
url: '/user?ID=12345',
data: { firstName: 'Fred', lastName: 'Flinstone' },
})
.fork(
error => console.log(error),
response => console.log(response)
)
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 16

58. what is crocks?
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 17

59. what is ramda?
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 18

60. @RobertWPearce | rwp.im | 2019-08-23 charleston.js 19

61. where can i learn more?
• https://crocks.dev/docs/crocks/Async.html
• https://gitter.im/crocksjs/crocks
• TheEvilSoft's youtube channel
• Professor Frisby's Mostly Adequate Guide to Functional Programming
• https://folktale.origamitower.com/api/v2.3.0/en/
folktale.concurrency.task.html
• Functional Programming in JavaScript with Ramda.js
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 20

62. Asynctweeter :: @RobertWPearce
github :: rpearce
email :: me@robertwpearce.com
@RobertWPearce | rwp.im | 2019-08-23 charleston.js 21