Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Abstract Thinking - 從 Functional Programming 看見...

Jerry Hong
August 28, 2019

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

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

Jerry Hong

August 28, 2019
Tweet

More Decks by Jerry Hong

Other Decks in Programming

Transcript

  1. 1 2 3 4 5 6 7 8 9 10

    ……….… 100 … 1000 … 10000 … 100000000 ⼀一 ⼆二 三 四 五 六 七 八 九 ⼗十 …百 …… 千 …….. 萬 ………… 億
  2. 1 2 3 4 5 6 7 8 9 10

    11 !!<-> 20 …… 100 ……… 1000 …… 1000000 … 1000000000 one !!<-> ten eleven !!<-> twenty … hundred … thousand … million ……. billion
  3. un deux trois quatre cinq six sept huit neuf dix

    onze douze treize quatorze quinze seize 1 - 16 是獨立的單字
  4. 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
  5. 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']; } 計算使⽤用者輸入數字的總額
  6. 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); } 計算使⽤用者輸入數字的總額
  7. 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); } 計算使⽤用者輸入數字的總額
  8. 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 組合起來來
  9. 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 組合起來來
  10. 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 組合起來來
  11. 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
  12. f g

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

    Array b R.map(String)([1, 2, 3]) !// ['1', '2', '3']
  14. !// map !:: (a !-> b) !-> Observable a !->

    Observable b map(String)(Observable.of(1)) !// Observable.of('1')
  15. 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
  16. fmap id = id fmap (f . g) = fmap

    f . fmap g fmap 須滿⾜足
  17. 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]
  18. 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 • 抽象: 設計的藝術 • 封⾯面圖