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

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

Transcript

1. Abstract Thinking - 從 FP 看⾒見見程式之美
2. 為什什麼我會開始學 Funtional Programming？
3. 在這個時代 學習是沒有終點的
4. 既然學無⽌止境，
 那重點就在如何提升學習效率
5. Roadmap B M N Y Q R X A P
6. 跨領域 X A P
7. B M N Y Q R X A P
8. 連結 B M N Y Q R X A P
9. 重點不在於學會哪些技術， ⽽而在於建立這些技術之間連結的能⼒力力
10. Flow - Mihaly Csikszentmihalyi Boredom Anxiety Flow you should be here challenge skills high high low low
11. 只要在已知的知識邊界去開拓拓
12. 這套學習系統其實是不完整的
13. ⼀一個⾃自⼰己熟知的概念念或觀念念 出現在⼀一個完全不相關的領域 有沒有過這樣的經驗？
14. Node.js 與 麥當勞
16. Process
17. Thread
18. Order Queue
19. Prepare Queue
20. Single Thread
21. Timer Pending Callback Idle, Prepare Pull Check Close Callback Order Prepare
22. Multiple Thread
23. 缺少了了⼀一個維度 B M N Y Q R X A P
24. B M N Y Q R X A P 抽象化 Q Y Z M
25. 什什麼是抽象化？
26. 抽象化就是 把重複出現的模式或類似的事物 作出歸納的過程
27. ⼈人類語⾔言就是 社會對真實世界抽象化後的產物
28. 很多外國⼈人會覺得 華⼈人的數學普遍比較好
29. 我認為有⼀一部分的原因來來⾃自於 中⽂文對於數字的抽象做得很好
30. 1 2 3 4 5 6 7 8 9 10 ……….… 100 … 1000 … 10000 … 100000000 ⼀一 ⼆二 三 四 五 六 七 八 九 ⼗十 …百 …… 千 …….. 萬 ………… 億
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
32. 在數數上，英⽂文要比中⽂文多學 10 ~ 17 個單字
33. 或許⼤大家對英⽂文熟悉度比較⾼高， 所以較難感受出差異異
34. 我⾃自⼰己認識的語⾔言當中， 對數字抽象化最糟的語⾔言
35. 我⾃自⼰己認識的語⾔言當中， 對數字抽象化最糟的語⾔言 法語
37. un deux trois quatre cinq six sept huit neuf dix onze douze treize quatorze quinze seize 1 - 16 是獨立的單字
38. dix-sept 10 7
39. vingt et un 20 和 1
40. vingt-deux 20 2
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
42. soixante et onze 60 和 11
43. quatre-vingt-un 4 20 1
44. 通常學到這裡就會放棄了了
45. 有好的抽象化， 有不好的抽象化
46. 抽象化很難？
47. 抽象化 是⼈人類⼤大腦運作的⽅方式
48. 我們⼩小時候如何學顏⾊色的？
49. ⼩小時候爸爸或媽媽會跟你說 香蕉是黃⾊色的
50. 但事實上 你不知道什什麼是香蕉什什麼是黃⾊色 你可能會認為黃⾊色就是指香蕉
51. 但這都不重要，只要等到...
52. 下次你看到計程⾞車車時，媽媽會跟你說 計程⾞車車是黃⾊色的
54. 抽象化 是⼈人類與⽣生俱來來的能⼒力力
55. 我們要學的是 如何做好抽象化
56. 講了了這麼久的抽象化跟程式 有什什麼關係？！
57. 很多⼈人都學程式很多年年了了
58. 99% 的需求⼤大概都能完成
59. 剩下的 1% 可能靠 google 也能做出來來
60. 為什什麼我們還持續的在學程式？
61. 其實我們在學的是 如何封裝程式或者說如何做好抽象化
62. ⾝身為⼯工程師最痛苦的⼀一件事就是 接⼿手別⼈人的爛 code
63. 所謂的爛 code 就是 程式碼錯誤的封裝、不好的抽象
64. 我們可以列列出很多
 錯誤封裝的例例⼦子
65. 但從反⾯面的例例⼦子中學習 進步速度是很慢的
66. 有沒有⼀一個系統性的⽅方式 來來學習抽象化
67. Functional Programming λ
68. Why Functional Programming？
69. Why Functional Programming？ FP 來來⾃自數學
70. Why Functional Programming？ 數學是⼈人類抽象化最好的科學 FP 來來⾃自數學
71. 數學很難？
72. 我們要學的是數學的抽象化⽅方式
73. 1 + 1 = 2
74. 2 * 10 = 20
75. 2 * 10 = 20 2 + 2 + … + 2 = 20
76. 不會考你 23 * 567 是多少 也不會問你 庭院深深深幾許
77. 今天我們只講 FP 當中的兩兩個觀念念
78. 1. Function Composition 2. 怎麼到處都是 map?
79. Function Composition
80. 想像⼀一下，某⼀一天...
81. 你在新北郊區⼀一家廉價的旅館醒來來
82. 頭暈暈暈暈的 看著灰灰髒髒的天花板
83. 有幾隻⼤大蟑螂緩慢地爬過
84. 你突然想起... 今天下午三點在台北市有個約會
85. 只剩下半個⼩小時的時間
86. 你只依稀記得⾃自⼰己是⼀一位魔法師
87. 你掌握了了三個咒語，分別是...
88. 嘰嘰烏拉拉 波波⼒力力那 ⾙貝⾙貝魯魯多
89. 嘰嘰烏拉拉！！
91. 你想了了⼀一下， 騎⾺馬其實來來不及趕到臺北市了了
92. ⾙貝⾙貝魯魯多！！
93. 蹦！
94. ⾺馬消失在了了空氣之中...
95. 嘰嘰烏拉拉 波波⼒力力那 ⾙貝⾙貝魯魯多
96. 波波⼒力力那，⾙貝⾙貝魯魯多
98. 最終，你開著跑⾞車車去台北市赴約了了
99. 像魔法師⼀一樣解決問題
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']; } 計算使⽤用者輸入數字的總額
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); } 計算使⽤用者輸入數字的總額
102. 把咒語(Function)組合起來來
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); } 計算使⽤用者輸入數字的總額
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 組合起來來
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 組合起來來
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 組合起來來
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
108. 有沒有覺得⾃自⼰己像魔法師了了？
109. 讓我們抽象的來來看 Function Composition
110. f g
111. f g h
112. f g h = g 。 f
113. f g h = g 。 f X Y Z
114. 怎麼到處都有 map？
115. Haskell - Type signature
116. const add = (x: number) !=> (y: number): number !=> x + y TypeScript
117. Haskell add !:: Number !-> Number !-> Number add x y = x + y 回傳值 參參數
118. 那些年年我們⼀一直看到的 map
119. ⼤大家最常⾒見見的 Array map
120. R.map(String)([1, 2, 3]) !// ['1', '2', '3']
121. !// map !:: (a !-> b) !-> Array a !-> Array b R.map(String)([1, 2, 3]) !// ['1', '2', '3']
122. 有些⼈人看過的 Observable map
123. !// map !:: (a !-> b) !-> Observable a !-> Observable b map(String)(Observable.of(1)) !// Observable.of('1')
124. 其實還有很多的 map
125. data Maybe a = Nothing | Just a
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
127. map(String)([1]) !// ['1'] map(String)(Observable.of(1)) !// Observable.of('1') map(String)(Maybe.Just(1)); !// Just('1') Functor
128. 這些型別都具有 map
129. 他們是什什麼關係？
130. 他們都是 Functor
131. class Functor f where fmap !:: (a !-> b) !-> f a !-> f b Functor
132. fmap id = id fmap (f . g) = fmap f . fmap g fmap 須滿⾜足
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]
134. 抽象化來來看 fmap
135. fmap f fmap g M x M y M z
136. fmap f fmap g h = fmap g 。fmap f M x M y M z
137. 回想⼀一下 還有哪些型別也是 Functor
138. Promise.resolve(1) .then(String) !// Promise.resolve('1')
139. 還有嗎？
140. Function 其實也是 Functor
141. 那 Function 的 fmap 是什什麼？！
142. fmap f add1 add3
143. compose add2 add1 add3
144. Function 的 map 就是 compose
145. 當我們學會了了這些抽象化
146. 再回過頭去學各個程式語⾔言 會發現簡單很多
147. 比如說 Swift 跟 Scala
148. Swift Optional Scala Optional
149. 學習好的抽象化可以幫助 我們學習⼀一個完全不同領域的知識
150. Learn How To Learn
151. Think How To Think
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 • 抽象： 設計的藝術 • 封⾯面圖
153. Jerry Hong Tech Leader | Website: blog.jerry-hong.com Facebook: J.H.MingChen