Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
前端爆肝之旅
+
React 上山前的小專案心得分享
鍾曜年 Jay Chung
github.com/xJkit
切勿小看前端
別像當初的我...
相關技術研討
● 開發工具:
○ Webpack
○ Babel
○ Chrome DevTool, debugger, Tamper
Data, Postman
○
● 程式語言:
○ JavaScript
■ ES6
■ Promise
○...
自介
鍾曜年
成大不成材研究生 (不玩底層的 EE)
“傳統”前端工程師( 曾以為 HTML, CSS/SASS, jQuery 可以打天下)
畢業時期漸漸接觸後端 (node.js, express.js, mongoDB, AWS EC2)
傳統的前端工程師
HTML/CSS
jQuery
80%
20%
以為靠 CSS + jQuery 可打遍天下
(咦?居然還不用懂 JavaScript…)
Modern 的前端工程師
JavaScript
HTML/
CSS
80%
20%
大量的 JS 框架...
多虧了 node.js
不是 CSS 變少,
是JS 變多了。
而且是爆炸性成長
感謝 node.js 讓 JavaScript 變成 Full Stack language
傳統的前端工程師
index.html
Modern 的前端工程師
index.html
就這樣?
傳統的前端工程師
server side
rendering
每一頁都是
後端 render
好的 HTML
Modern 的前端工程師
client side
rendering
只有第一頁是
後端 render
的結果
Single
Page
Application
與 React 的第一次
與 React 的第一次...慘敗收場
WTF is npm?
原來只有 HTML/CSS 遠遠不夠
1. Webpack
2. Babel
3. JavaScript
a. Promise
b. ES6
4. Functional Programming
a. map, reduce, filter
b. pure functions, av...
崩
潰
1. Webpack
2. Babel
3. JavaScript
a. Promise
b. ES6
4. Functional Programming
a. map, reduce, filter
b. pure functions, av...
Webpack
Webpack webpack.config.js
app.js
app.scss
Webpack
打包完成
就這樣? Yes.
當然還需要其他的套件幫忙...thank you npm
package.json
1. Webpack
2. Babel
3. JavaScript
a. Promise
b. ES6
4. Functional Programming
a. map, reduce, filter
b. pure functions, av...
Babel (Transpiler)
Babel (Transpiler)
ES6
ES5
有了 Babel
就趕快體驗用 ES6 來開發網頁吧
1. Webpack
2. Babel
3. JavaScript
a. ES6
b. Promise
4. Functional Programming
a. map, reduce, filter
b. pure functions, av...
JavaScript ES6 (ES2015, ECMAScript)
● Variable Scope
a. var → let, const
b. functional scope → functional & block-level sc...
JavaScript ES6 (ES2015, ECMAScript)
● Arrow Function
○ 皆為 Anonymous function
○ Shorter Syntax
○ “this” 綁定的改變
(ES5: Global ...
JavaScript ES6 (ES2015, ECMAScript)
● Default parameters
● Rest parameters, Spread parameters (...)
● Destructuring ( let ...
JavaScript Promise
callback 痛點:pyramid of doom
JavaScript Promise
把 callback 平面化
1. Webpack
2. Babel
3. JavaScript
a. Promise
b. ES6
4. Functional Programming
a. map, reduce, filter
b. pure functions, av...
Functional Programming
Functional Programming
1. Easy to test.
2. Easy to read & reason about
3. Avoid confusion, errors in code
大專案常遇到: Spaghetti Code
Have to run code
“Imperatively…?”
What is FP?
1. Do everything with functions
Non-functional way v.s Functional way
必須搞清楚資料的流動會經過哪些函數
1. 而不是不同的物件
(not properties, methods, this...)
2. 而不是 Imperative way
像是菜單一條一條列出來並且該做
些什麼
2. Use Pure Functions
Use Pure Functions
1. Avoid Side Effects
a. 不要把 console.log() 加到函數裡面
2. Iuput ---> () ---> Output
3. 僅在乎 I/O, 不做多餘的事
3. Do Not Iterate
Do Not Iterate
1. 別用 for-loop, while-loop
2. 改用 map, reduce, filter
4. Avoid Mutability
A non-functional joke
5. Persistent Data Structure
Persistent Data Structure
解決痛點:
無腦式的 Immutable 單純靠 Copy & Paste 會變慢 + 記憶體耗盡
Persistent Data Structure: Link List
更換資料結構
Persistent Data Structure: Tree
更換資料結構
Functional Programming Language
Haskell /Elm
ClojureScript
Scala
Lisp
Om
Functional Programming Libraries for JavaScript
Mori
Immutable.js
underscore.js
lodash
Ramda
來聽美女大師講解 Functional Programming
Anjana Vakil: Learning Functional Programming with JavaScript - JSUnconf 2016
非常淺顯易懂!
1. Webpack
2. Babel
3. JavaScript
a. Promise
b. ES6
4. Functional Programming
a. map, reduce, filter
b. pure functions, av...
小專案+踩雷心路路程
React Weather App
React Router Example
React YouTubeDataAPI Search App
React Video Search and Playlist
https://...
Video Search and Playlist “MOCK”
影片搜尋
播放清單
中文歌
英文歌
韓文歌
搜尋
搜尋首頁
Video Search and Playlist (播放清單:搜尋結果)
周杰倫影片搜尋
播放清單
中文歌
英文歌
韓文歌
搜尋
周杰倫Jay Chou X aMEI【不該
Shouldn't Be】Official MV
周杰倫X aMEI...
Video Search and Playlist (播放清單:中文歌)
影片搜尋
播放清單
中文歌
英文歌
韓文歌
搜尋
周杰倫Jay Chou X aMEI【不該 Shouldn't Be】Official MV
周杰倫X aMEI 【不該...
Decomposition 將所有物件 Component 化
影片搜尋
播放清單
中文男歌手
中文女歌手
英文歌
韓文歌
搜尋
搜尋首頁
Main
Logo
PlayList
PlayListLink
SearchBar
Display
Decomposition:搜尋結果
dd
影片搜尋
播放清單
中文歌
英文歌
韓文歌
搜尋
Main
Logo
PlayList
PlayListLink
SearchBar
Display
周杰倫Jay Chou X aMEI【不該
Sho...
Component
組件架構
弄懂資料流向
Debug Tool
Chrome DevTools
debugger;
webpack sourcemap
Tamper data
Postman
Demo
git@github.com:xJkit/react-video-playlist-searcher.git
如果你能過忍受...
投入這麼多時間竟然只在前置作業,而且
還沒碰到 React 的一根汗毛
...還無法阻擋你學習 React 的決心的話
恭喜你拿到 React 的門票
React 學習資源
ReactJS 台灣討論區
React Officials
Thanks for your listening!
git@github.com/xJkit
Future work
Unit Test framework (Mocha, Chai, Karma,...)
每寫完一個 Component 就要寫測試
保持良好習慣
Redux 好用的 React Component 狀態管理器
下一站 React 深造之路: Redux
學習 Redux 大概是 React 重學所花的時間...
但是不學好 Redux 是不能成就大事的!
Upcoming SlideShare
Loading in …5
×

前端爆肝之旅+React上山前的小專案心得分享

1,601 views

Published on

在衝動想栽進 React 的當下,請先且慢!還有很多你必須先學的知識,否則會摔得。。。很重。共勉之,前端世界就是狂。

Published in: Engineering
  • Be the first to comment

前端爆肝之旅+React上山前的小專案心得分享

  1. 1. 前端爆肝之旅 + React 上山前的小專案心得分享 鍾曜年 Jay Chung github.com/xJkit
  2. 2. 切勿小看前端 別像當初的我...
  3. 3. 相關技術研討 ● 開發工具: ○ Webpack ○ Babel ○ Chrome DevTool, debugger, Tamper Data, Postman ○ ● 程式語言: ○ JavaScript ■ ES6 ■ Promise ○ Functional Programming ■ map, reduce, filter ■ pure functions, avoid side effects ■ immutability, persistent data structure ● React ■ react, react-dom ■ react-router ● Future Work ○ Unit Test (Karma) ○ Redux, ImmutableJS ○ User Authentication / Database
  4. 4. 自介 鍾曜年 成大不成材研究生 (不玩底層的 EE) “傳統”前端工程師( 曾以為 HTML, CSS/SASS, jQuery 可以打天下) 畢業時期漸漸接觸後端 (node.js, express.js, mongoDB, AWS EC2)
  5. 5. 傳統的前端工程師 HTML/CSS jQuery 80% 20% 以為靠 CSS + jQuery 可打遍天下 (咦?居然還不用懂 JavaScript…)
  6. 6. Modern 的前端工程師 JavaScript HTML/ CSS 80% 20% 大量的 JS 框架... 多虧了 node.js
  7. 7. 不是 CSS 變少, 是JS 變多了。 而且是爆炸性成長
  8. 8. 感謝 node.js 讓 JavaScript 變成 Full Stack language
  9. 9. 傳統的前端工程師 index.html
  10. 10. Modern 的前端工程師 index.html 就這樣?
  11. 11. 傳統的前端工程師 server side rendering 每一頁都是 後端 render 好的 HTML
  12. 12. Modern 的前端工程師 client side rendering 只有第一頁是 後端 render 的結果 Single Page Application
  13. 13. 與 React 的第一次
  14. 14. 與 React 的第一次...慘敗收場 WTF is npm?
  15. 15. 原來只有 HTML/CSS 遠遠不夠
  16. 16. 1. Webpack 2. Babel 3. JavaScript a. Promise b. ES6 4. Functional Programming a. map, reduce, filter b. pure functions, avoid side effects c. immutability, persistent data structure 5. React a. react, react-dom b. react-router 6. Redux 7. Unit Test Prerequisites...
  17. 17. 崩 潰
  18. 18. 1. Webpack 2. Babel 3. JavaScript a. Promise b. ES6 4. Functional Programming a. map, reduce, filter b. pure functions, avoid side effects c. immutability, persistent data structure 5. React a. react, react-dom b. react-router 6. Redux 7. Unit Test Prerequisites...
  19. 19. Webpack
  20. 20. Webpack webpack.config.js app.js app.scss
  21. 21. Webpack 打包完成
  22. 22. 就這樣? Yes.
  23. 23. 當然還需要其他的套件幫忙...thank you npm package.json
  24. 24. 1. Webpack 2. Babel 3. JavaScript a. Promise b. ES6 4. Functional Programming a. map, reduce, filter b. pure functions, avoid side effects c. immutability, persistent data structure 5. React a. react, react-dom b. react-router 6. Redux 7. Unit Test Prerequisites...
  25. 25. Babel (Transpiler)
  26. 26. Babel (Transpiler) ES6 ES5
  27. 27. 有了 Babel 就趕快體驗用 ES6 來開發網頁吧
  28. 28. 1. Webpack 2. Babel 3. JavaScript a. ES6 b. Promise 4. Functional Programming a. map, reduce, filter b. pure functions, avoid side effects c. immutability, persistent data structure 5. React a. react, react-dom b. react-router 6. Redux 7. Unit Test Prerequisites...
  29. 29. JavaScript ES6 (ES2015, ECMAScript) ● Variable Scope a. var → let, const b. functional scope → functional & block-level scope ● Template String (Interpolation)
  30. 30. JavaScript ES6 (ES2015, ECMAScript) ● Arrow Function ○ 皆為 Anonymous function ○ Shorter Syntax ○ “this” 綁定的改變 (ES5: Global → ES6:定義時所在物件)
  31. 31. JavaScript ES6 (ES2015, ECMAScript) ● Default parameters ● Rest parameters, Spread parameters (...) ● Destructuring ( let {a, b} = myObject ) ● Class
  32. 32. JavaScript Promise
  33. 33. callback 痛點:pyramid of doom
  34. 34. JavaScript Promise 把 callback 平面化
  35. 35. 1. Webpack 2. Babel 3. JavaScript a. Promise b. ES6 4. Functional Programming a. map, reduce, filter b. pure functions, avoid side effects c. immutability, persistent data structure 5. React a. react, react-dom b. react-router 6. Redux 7. Unit Test Prerequisites...
  36. 36. Functional Programming
  37. 37. Functional Programming 1. Easy to test. 2. Easy to read & reason about 3. Avoid confusion, errors in code
  38. 38. 大專案常遇到: Spaghetti Code Have to run code “Imperatively…?”
  39. 39. What is FP?
  40. 40. 1. Do everything with functions
  41. 41. Non-functional way v.s Functional way
  42. 42. 必須搞清楚資料的流動會經過哪些函數 1. 而不是不同的物件 (not properties, methods, this...) 2. 而不是 Imperative way 像是菜單一條一條列出來並且該做 些什麼
  43. 43. 2. Use Pure Functions
  44. 44. Use Pure Functions 1. Avoid Side Effects a. 不要把 console.log() 加到函數裡面 2. Iuput ---> () ---> Output 3. 僅在乎 I/O, 不做多餘的事
  45. 45. 3. Do Not Iterate
  46. 46. Do Not Iterate 1. 別用 for-loop, while-loop 2. 改用 map, reduce, filter
  47. 47. 4. Avoid Mutability
  48. 48. A non-functional joke
  49. 49. 5. Persistent Data Structure
  50. 50. Persistent Data Structure 解決痛點: 無腦式的 Immutable 單純靠 Copy & Paste 會變慢 + 記憶體耗盡
  51. 51. Persistent Data Structure: Link List 更換資料結構
  52. 52. Persistent Data Structure: Tree 更換資料結構
  53. 53. Functional Programming Language Haskell /Elm ClojureScript Scala Lisp Om
  54. 54. Functional Programming Libraries for JavaScript Mori Immutable.js underscore.js lodash Ramda
  55. 55. 來聽美女大師講解 Functional Programming Anjana Vakil: Learning Functional Programming with JavaScript - JSUnconf 2016 非常淺顯易懂!
  56. 56. 1. Webpack 2. Babel 3. JavaScript a. Promise b. ES6 4. Functional Programming a. map, reduce, filter b. pure functions, avoid side effects c. immutability, persistent data structure 5. React a. react, react-dom b. react-router 6. Redux 7. Unit Test Prerequisites...
  57. 57. 小專案+踩雷心路路程 React Weather App React Router Example React YouTubeDataAPI Search App React Video Search and Playlist https://github.com/xJkit
  58. 58. Video Search and Playlist “MOCK” 影片搜尋 播放清單 中文歌 英文歌 韓文歌 搜尋 搜尋首頁
  59. 59. Video Search and Playlist (播放清單:搜尋結果) 周杰倫影片搜尋 播放清單 中文歌 英文歌 韓文歌 搜尋 周杰倫Jay Chou X aMEI【不該 Shouldn't Be】Official MV 周杰倫X aMEI 【不該Shouldn't Be】 今年華語樂壇最震撼的對唱深情 詮釋雪地裡的愛情唯美而哀傷 .... 周杰倫Jay Chou X aMEI【不該 Shouldn't Be】Official MV 周杰倫X aMEI 【不該Shouldn't Be】 今年華語樂壇最震撼的對唱深情 詮釋雪地裡的愛情唯美而哀傷 ....
  60. 60. Video Search and Playlist (播放清單:中文歌) 影片搜尋 播放清單 中文歌 英文歌 韓文歌 搜尋 周杰倫Jay Chou X aMEI【不該 Shouldn't Be】Official MV 周杰倫X aMEI 【不該Shouldn't Be】 今年華語樂壇最 震撼的對唱深情詮釋雪地裡的愛情唯美而哀傷 .... 周杰倫Jay Chou X aMEI【不該 Shouldn't Be】Official MV 周杰倫X aMEI 【不該Shouldn't Be】 今年華語樂壇最 震撼的對唱深情詮釋雪地裡的愛情唯美而哀傷 .... 周杰倫Jay Chou X aMEI【不該 Shouldn't Be】Official MV 周杰倫X aMEI 【不該Shouldn't Be】 今年華語樂壇最 震撼的對唱深情詮釋雪地裡的愛情唯美而哀傷 ....
  61. 61. Decomposition 將所有物件 Component 化 影片搜尋 播放清單 中文男歌手 中文女歌手 英文歌 韓文歌 搜尋 搜尋首頁 Main Logo PlayList PlayListLink SearchBar Display
  62. 62. Decomposition:搜尋結果 dd 影片搜尋 播放清單 中文歌 英文歌 韓文歌 搜尋 Main Logo PlayList PlayListLink SearchBar Display 周杰倫Jay Chou X aMEI【不該 Shouldn't Be】Official MV 周杰倫X aMEI 【不該Shouldn't Be】 今年華語樂壇最震撼的對唱深情 詮釋雪地裡的愛情唯美而哀傷 .... 周杰倫Jay Chou X aMEI【不該 Shouldn't Be】Official MV 周杰倫X aMEI 【不該Shouldn't Be】 今年華語樂壇最震撼的對唱深情 詮釋雪地裡的愛情唯美而哀傷 .... DisplayList DisplayListDetail Nav +新增
  63. 63. Component 組件架構 弄懂資料流向
  64. 64. Debug Tool Chrome DevTools debugger; webpack sourcemap Tamper data Postman
  65. 65. Demo git@github.com:xJkit/react-video-playlist-searcher.git
  66. 66. 如果你能過忍受... 投入這麼多時間竟然只在前置作業,而且 還沒碰到 React 的一根汗毛 ...還無法阻擋你學習 React 的決心的話
  67. 67. 恭喜你拿到 React 的門票
  68. 68. React 學習資源 ReactJS 台灣討論區 React Officials
  69. 69. Thanks for your listening! git@github.com/xJkit
  70. 70. Future work Unit Test framework (Mocha, Chai, Karma,...) 每寫完一個 Component 就要寫測試 保持良好習慣 Redux 好用的 React Component 狀態管理器
  71. 71. 下一站 React 深造之路: Redux 學習 Redux 大概是 React 重學所花的時間... 但是不學好 Redux 是不能成就大事的!

×