Functional Thinking in ES6

Transcript

1. Func%onal Thinking in ES6 Daniel Brook-Roberge August 23, 2016 Engineering Mee3ng Mobify 1
2. Func%onal programming has an o1en-deserved reputa%on for being arcane and difficult Mobify 2
3. Func%onal programs tend towards high levels of abstrac%on, but... Mobify 3
4. Func%onal methods can clarify code that is otherwise non-func%onal. Mobify 4
5. We are using more libraries that are built using func3onal principles. Mobify 5
6. Principles of Func/onal Thinking Mobify 6
7. Use simple, flexible data structures Mobify 7
8. Transform, don't modify Mobify 8
9. Build big func,ons from li1le func,ons Mobify 9
10. Opera&ons on func&ons are as important as opera&ons on data Mobify 10
11. Func%onal Thinking in Scheme Mobify 11
12. (sum 1 2 3 4 5 6) -> 21 Mobify 12
13. (sum (if doFour 4 1) 2 3) -> 6 if doFour is false, -> 9 if doFour is true Mobify 13
14. ((if doProduct prod sum) 1 2 3 4) -> 10 if doProduct is false, -> 24 if doProduct is true Mobify 14
15. Func%on as Argument Scheme's symmetry makes it clear that the func3on in a call is as much of an input as any of the arguments. One might even say that the func1on is an argument to the "func1on call" opera1on, just as the func1on's arguments are. Mobify 15
16. Func%onal Javascript Mobify 16
17. ES6 Func)ons ES6 introduces terser nota0on for defining func0ons that I will use for clarity. Mobify 17
18. (a, b) => { console.log(a, b) } Mobify 18
19. or Mobify 19
20. (a, b) => (a - b) Mobify 20
21. Func%ons returning func%ons Mobify 21
22. (a) => (b) => (a + b) Mobify 22
23. Func%on Composi%on & Pipelines Mobify 23
24. Composi'on compose(f1, f2, f3)(x) === f1(f2(f3(x))) Mobify 24
25. Pipelines: Composi-on from the Inside Out If we look at composi0on in the opposite order, it becomes a pipeline. The innermost composed func0on is the first to receive the data, and it propagates from the inside to the outside. Two common pa*erns in Javascript act as pipelines: Array methods and Promise chains. Mobify 25
26. Promise Chains Promise.resolve(x) .then(f1) .then(f2) .then(f3) .then((y) => console.log(y)) prints the value of f3(f2(f1(x))) Mobify 26
27. Pipeline Refactoring Example Mobify 27
28. details.json { ... dependencies: [ {name: 'lodash', url: 'http://packages.com/lodash', version: '4.4', ...}, ... ] ... } Mobify 28
29. fs.readFileAsync('details.json', 'utf8') .then((contents) => { const details = JSON.parse(contents) const stableDepUrls = [] for (const dep of details.dependencies) { if (!dep.version.startsWith('0')) { dep.url = dep.url.replace('http:', 'https:') stableDepUrls.push(dep.url) } } const payload = JSON.stringify({urls: stableDepUrls}) fs.writeFileAsync('stable-urls.json', payload, 'utf8') .then(() => console.log('Done')) }) Mobify 29
30. fs.readFileAsync('details.json', 'utf8') .then(JSON.parse) .then((details) => { const stableDepUrls = [] for (const dep of details.dependencies) { if (!dep.version.startsWith('0')) { dep.url = dep.url.replace('http:', 'https:') stableDepUrls.push(dep.url) } } const payload = JSON.stringify({urls: stableDepUrls}) return fs.writeFileAsync('stable-urls.json', payload, 'utf8') }) .then(() => console.log('Done')) Mobify 30
31. fs.readFileAsync('details.json', 'utf8') .then(JSON.parse) .then((details) => { const stableDepUrls = [] for (const dep of details.dependencies) { if (!dep.version.startsWith('0')) { dep.url = dep.url.replace('http:', 'https:') stableDepUrls.push(dep.url) } } return stableDepUrls }) .then((urls)) => { const payload = JSON.stringify({urls}) return fs.writeFileAsync('stable-urls.json', payload, 'utf8') }) .then(() => console.log('Done')) Mobify 31
32. fs.readFileAsync('details.json', 'utf8') .then(JSON.parse) .then((details) => details.dependencies.filter( (dep) => dep.version.startsWith(0)) ) .then((stableDeps) => stableDeps.map( (dep) => dep.url.replace('http:', 'https:')) ) .then((urls)) => { const payload = JSON.stringify({urls}) return fs.writeFileAsync('stable-urls.json', payload, 'utf8') }) .then(() => console.log('Done')) Mobify 32
33. fs.readFileAsync('details.json', 'utf8') .then(JSON.parse) .then((details) => details.dependencies) .then((deps) => deps.filter((dep) => !dep.version.startsWith('0'))) .then((stableDeps) => _.pluck(deps, 'url')) .then((depUrls) => depUrls.map((url) => url.replace('http:', 'https:'))) .then((urls) => JSON.stringify({urls})) .then((json) => fs.writeFileAsync('stable-urls.json', json, 'utf8')) .then(() => console.log('Done')) Mobify 33
34. fs.readFileAsync('details.json', 'utf8') .then(JSON.parse) .then(extractDependencies) .then(removeMajorVersion0) .then(getUrls) .then(makeUrlsHttps) .then((urls) => JSON.stringify({urls})) .then(writeToFile('stable-urls.json')) .then(() => console.log('Done')) Mobify 34
35. const extractDependencies = (details) => details.dependencies const isNonzeroMajorVersion = (dep) => !dep.version.startsWith('0') const removeMajorVersion0 = (deps) => deps.filter(isNonzeroMajorVersion) const getUrls = (deps) => _.pluck(deps, urls) const makeUrlHttps = (url) => url.replace('http:', 'https:') const makeUrlsHttps = (urls) => url.map(makeUrlHttps) const writeToFile = (filename) => (contents) => fs.writeFileAsync(filename, contents, 'utf8') Mobify 35
36. const extractDependencies = R.prop('dependencies') const isNonzeroMajorVersion = R.not((dep) => dep.version.startsWith('0')) const removeMajorVersion0 = R.filter(isNonzeroMajorVersion) const getUrls = R.pluck(urls) const makeUrlHttps = R.replace('http:', 'https:') const makeUrlsHttps = R.map(makeUrlHttps) const writeToFile = R.curry(R.partialRight(fs.writeFileAsync, 'utf8')) Mobify 36
37. Summary • Func&onal methods can help write code in an otherwise impera&ve environment • Code where large func&ons are built out of smaller func&ons can be cleanly self-documen&ng • Pipelines and composi&on are a powerful technique for combining func&ons in a clear way. Mobify 37