前端爆肝之旅+React上山前的小專案心得分享
5 likes2,260 views
文档讨论了前端开发的演变，从传统的 HTML/CSS 和 jQuery 到现代的 JavaScript 框架（如 React）。包含了开发工具、框架与程序设计方法的详细阐述，介绍了 functional programming 和 JavaScript 的 ES6 特性。最后提到作者的项目经验和未来学习计划，包括 Redux 和单元测试。
前端爆肝之旅+React上山前的小專案心得分享
- 1. 前端爆肝之旅 + React 上山前的小專案心得分享 鍾曜年 Jay Chung github.com/xJkit
- 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. 自介 鍾曜年 成大不成材研究生 (不玩底層的 EE) “傳統”前端工程師( 曾以為 HTML, CSS/SASS, jQuery 可以打天下) 畢業時期漸漸接觸後端 (node.js, express.js, mongoDB, AWS EC2)
- 5. 傳統的前端工程師 HTML/CSS jQuery 80% 20% 以為靠 CSS + jQuery 可打遍天下 (咦？居然還不用懂 JavaScript…)
- 6. Modern 的前端工程師 JavaScript HTML/ CSS 80% 20% 大量的 JS 框架... 多虧了 node.js
- 7. 不是 CSS 變少， 是JS 變多了。 而且是爆炸性成長
- 8. 感謝 node.js 讓 JavaScript 變成 Full Stack language
- 12. Modern 的前端工程師 client side rendering 只有第一頁是 後端 render 的結果 Single Page Application
- 13. 與 React 的第一次
- 14. 與 React 的第一次...慘敗收場 WTF is npm?
- 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. 崩 潰
- 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. Webpack
- 21. Webpack 打包完成
- 22. 就這樣？ Yes.
- 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...
- 27. 有了 Babel 就趕快體驗用 ES6 來開發網頁吧
- 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. JavaScript ES6 (ES2015, ECMAScript) ● Variable Scope a. var → let, const b. functional scope → functional & block-level scope ● Template String (Interpolation)
- 30. JavaScript ES6 (ES2015, ECMAScript) ● Arrow Function ○ 皆為 Anonymous function ○ Shorter Syntax ○ “this” 綁定的改變 （ES5: Global → ES6:定義時所在物件）
- 31. JavaScript ES6 (ES2015, ECMAScript) ● Default parameters ● Rest parameters, Spread parameters (...) ● Destructuring ( let {a, b} = myObject ) ● Class
- 33. callback 痛點：pyramid of doom
- 34. JavaScript Promise 把 callback 平面化
- 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...
- 37. Functional Programming 1. Easy to test. 2. Easy to read & reason about 3. Avoid confusion, errors in code
- 38. 大專案常遇到： Spaghetti Code Have to run code “Imperatively…?”
- 39. What is FP?
- 40. 1. Do everything with functions
- 41. Non-functional way v.s Functional way
- 42. 必須搞清楚資料的流動會經過哪些函數 1. 而不是不同的物件 (not properties, methods, this...) 2. 而不是 Imperative way 像是菜單一條一條列出來並且該做 些什麼
- 43. 2. Use Pure Functions
- 44. Use Pure Functions 1. Avoid Side Effects a. 不要把 console.log() 加到函數裡面 2. Iuput ---> () ---> Output 3. 僅在乎 I/O, 不做多餘的事
- 45. 3. Do Not Iterate
- 46. Do Not Iterate 1. 別用 for-loop, while-loop 2. 改用 map, reduce, filter
- 49. 5. Persistent Data Structure
- 50. Persistent Data Structure 解決痛點： 無腦式的 Immutable 單純靠 Copy & Paste 會變慢 + 記憶體耗盡
- 51. Persistent Data Structure: Link List 更換資料結構
- 52. Persistent Data Structure: Tree 更換資料結構
- 53. Functional Programming Language Haskell /Elm ClojureScript Scala Lisp Om
- 54. Functional Programming Libraries for JavaScript Mori Immutable.js underscore.js lodash Ramda
- 55. 來聽美女大師講解 Functional Programming Anjana Vakil: Learning Functional Programming with JavaScript - JSUnconf 2016 非常淺顯易懂！
- 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. 小專案+踩雷心路路程 React Weather App React Router Example React YouTubeDataAPI Search App React Video Search and Playlist https://github.com/xJkit
- 58. Video Search and Playlist “MOCK” 影片搜尋 播放清單 中文歌 英文歌 韓文歌 搜尋 搜尋首頁
- 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. 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. Decomposition 將所有物件 Component 化 影片搜尋 播放清單 中文男歌手 中文女歌手 英文歌 韓文歌 搜尋 搜尋首頁 Main Logo PlayList PlayListLink SearchBar Display
- 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 ＋新增
- 64. Debug Tool Chrome DevTools debugger; webpack sourcemap Tamper data Postman
- 66. 如果你能過忍受... 投入這麼多時間竟然只在前置作業，而且 還沒碰到 React 的一根汗毛 ...還無法阻擋你學習 React 的決心的話
- 67. 恭喜你拿到 React 的門票
- 68. React 學習資源 ReactJS 台灣討論區 React Officials
- 69. Thanks for your listening! git@github.com/xJkit
- 70. Future work Unit Test framework (Mocha, Chai, Karma,...) 每寫完一個 Component 就要寫測試 保持良好習慣 Redux 好用的 React Component 狀態管理器
- 71. 下一站 React 深造之路： Redux 學習 Redux 大概是 React 重學所花的時間... 但是不學好 Redux 是不能成就大事的！