Abstract Thinking - 從 Functional Programming 看見程式之美

9b753d898d93aae8bd163db5c420a1ae?s=47 Jerry Hong
August 28, 2019

Abstract Thinking - 從 Functional Programming 看見程式之美

你是否認為所有人都應該要學程式呢?你是否曾遇過在某個完全陌生的領域遇到似曾相識的概念?你知道寫程式跟UI 設計有什麼關聯嗎?你認為抽象是好的還是壞的?為什麼我們需要抽象化思維呢?在這個演講當中,我會透過 Functional Programming 來講解什麼是好的抽象化,並且通過幾個簡單的練習幫助我們寫出更美的程式碼。

9b753d898d93aae8bd163db5c420a1ae?s=128

Jerry Hong

August 28, 2019
Tweet

Transcript

  1. 10.
  2. 15.
  3. 16.
  4. 17.
  5. 30.

    1 2 3 4 5 6 7 8 9 10

    ……….… 100 … 1000 … 10000 … 100000000 ⼀一 ⼆二 三 四 五 六 七 八 九 ⼗十 …百 …… 千 …….. 萬 ………… 億
  6. 31.

    1 2 3 4 5 6 7 8 9 10

    11 !!<-> 20 …… 100 ……… 1000 …… 1000000 … 1000000000 one !!<-> ten eleven !!<-> twenty … hundred … thousand … million ……. billion
  7. 36.
  8. 37.

    un deux trois quatre cinq six sept huit neuf dix

    onze douze treize quatorze quinze seize 1 - 16 是獨立的單字
  9. 41.

    vingt et un trente et un quarante et un cinquante

    et un soixante et un 20 和 1 30 和 1 40 和 1 50 和 1 60 和 1
  10. 53.
  11. 73.
  12. 90.
  13. 93.
  14. 97.
  15. 100.

    const sum = arr !=> arr.reduce((x, y) !=> x +

    y, 0); const map = fn !=> arr !=> arr.map(fn); function onClick (value) { console.log(value); !// ['290', '123', '234']; } 計算使⽤用者輸入數字的總額
  16. 101.

    const sum = arr !=> arr.reduce((x, y) !=> x +

    y, 0); const map = fn !=> arr !=> arr.map(fn); function onClick (value) { console.log(value); !// ['290', '123', '234']; const numArr = map(Number)(value); const result = sum(numArr); console.log(result); } 計算使⽤用者輸入數字的總額
  17. 103.

    const sum = arr !=> arr.reduce((x, y) !=> x +

    y, 0); const map = fn !=> arr !=> arr.map(fn); function onClick (value) { console.log(value); !// ['290', '123', '234']; const numArr = map(Number)(value); const result = sum(numArr); console.log(result); } 計算使⽤用者輸入數字的總額
  18. 104.

    const sum = arr !=> arr.reduce((x, y) !=> x +

    y, 0); const map = fn !=> arr !=> arr.map(fn); const compose = (!!...fns) !=> (args) !=> fns.reduceRight((args, f) !=> f.call(null, args), args) function onClick (value) { console.log(value); !// ['290', '123', '234']; const numArr = map(Number)(value); const result = sum(numArr); console.log(result); } 把 function 組合起來來
  19. 105.

    const sum = arr !=> arr.reduce((x, y) !=> x +

    y, 0); const map = fn !=> arr !=> arr.map(fn); const compose = (!!...fns) !=> (args) !=> fns.reduceRight((args, f) !=> f.call(null, args), args) function onClick (value) { console.log(value); !// ['290', '123', '234']; const result = compose(sum, map(Number))(value); console.log(result); } 把 function 組合起來來
  20. 106.

    const sum = arr !=> arr.reduce((x, y) !=> x +

    y, 0); const map = fn !=> arr !=> arr.map(fn) const compose = (!!...fns) !=> (args) !=> fns.reduceRight((args, f) !=> f.call(null, args), args) const sumArrayString = compose(sum, map(Number)); function onClick (value) { console.log(value) !// ['290', '123', '234']; const result = sumArrayString(value); console.log(result); } 把 function 組合起來來
  21. 107.

    import * as R from 'ramda'; const sumArrayString = R.compose(R.sum,

    R.map(Number)); function onClick (value) { console.log(value) !// ['290', '123', '234']; const result = sumArrayString(value); console.log(result); } 改⽤用 Ramda
  22. 110.

    f g

  23. 111.
  24. 117.
  25. 121.

    !// map !:: (a !-> b) !-> Array a !->

    Array b R.map(String)([1, 2, 3]) !// ['1', '2', '3']
  26. 123.

    !// map !:: (a !-> b) !-> Observable a !->

    Observable b map(String)(Observable.of(1)) !// Observable.of('1')
  27. 126.

    import * as R from "ramda"; import * as Maybe

    from 'folktale/maybe' R.map(String)(Maybe.Just(1)); !// Just('1') R.map(String)(Maybe.Nothing()); !// Nothing data Maybe a = Nothing | Just a map !:: (a !-> b) !-> Maybe a !-> Maybe b map _ Nothing = Nothing map f Just a = Just f a add x y = x + y add1 = add 1 map add1 (Just 1) !-- Just 2 map add1 (Nothing) !-- Nothing JavaScript Haskell
  28. 132.

    fmap id = id fmap (f . g) = fmap

    f . fmap g fmap 須滿⾜足
  29. 133.

    const id = x !=> x; const arr = [1,

    2, 3]; !// fmap id = id R.map(id)(arr) !// [1, 2, 3] id(arr) !// [1, 2, 3] !// fmap (f . g) = fmap f . fmap g R.map( R.compose( R.add(1), R.add(2) ) )(arr); !// [4, 5, 6] R.compose( R.map(R.add(1)), R.map(R.add(2)) )(arr); !// [4, 5, 6]
  30. 152.

    Reference • Learn How To Learn ❤ • 知識地圖 •

    教你成為 IT 界的德魯魯伊 • Developer Roadmap • Flow: The Psychology of Optimal Experience ❤ • The 3 Zone Everyone Should Know About • 法語吐槽影片 • Haskell Book • Mostly Adequate Guide • 中⽂文版 • Why Functional Programming Matter • 抽象: 設計的藝術 • 封⾯面圖