Vue 和 Angular 開發習慣

Transcript

1. HTML JS Vue 和 Angular 開發習慣 Poy Chang Developer / Blogger / Dad
2. Poy Chang 目前任職于全美 100 大私人企業，負責企業內部 IT 解決方案設計 與開發，專注於 Azure、.NET Core、Angular 等技術研究 ✓ Angular Taiwan 社群核心成員 ✓ Microsoft MVP Developer Technologies ✓ 2019 廣州 Global Azure Bootcamp 講師 ✓ 2018 臺北 Angular TW Conf 講師 ✓ 2018 臺北 Azure Tech Day Party 講師 ✓ 2018 台中 .NET Conf 講師 ✓ 2018 北京 Global Azure Bootcamp 講師
3. 先說說我自己… AngularJS Angular 2 Angular X Vue AngularJS Now JavaScript Ionic Bootstrap Gulp TypeScript SASS More TS JavaScript Webpack More Library TypeScript Webpack Bulam ?
4. 正規軍 游擊兵
10. .vue vue-loder vetur
11. https://forum.angular.tw/t/topic/771
12. Library & Framework Framework Library
13. 開發思維 - 自主性 Vue 從原本的偏向 Library 函式庫慢慢朝 Framework 框架走 Angular 一直以完整的 Framework 框架為目標 自由實踐 Freedom Practice 最佳實踐 Best Practice 完整的框架讓人容 易往這方向走
14. 開發思維 - 組件化 VAR 三大前端都有元件化 / 組件化的概念 Vue 常用的 .vue 檔將 HTML JS CSS 合併，認為組件化代表不能太大 (多程式碼) Angular 元件預設將 HTML JS CSS 分開，重點在關注點分離
15. 開發思維 - 架構 Vue 程式碼架構自由度很高，對於喜歡自由奔放的 JS 開發者很有吸引力 Angular 引導了程式碼架構，內建機制讓開發者自然朝物件導向的思維前進
16. Functional & Object-Oriented 如果物件導向是以物件為基本組成元素的程式設計觀念，函式導向程式 設計便是以函式為基本單元來組織程式。 函式導向的特性 • 避免改變狀態/資料，沒有任何副作用 ( Immutable ) • 純函式，傳入相同的參數會得到相同的結果 (Pure Function) • 延遲評估，參數傳入時才執行，不會預先載入 ( Lazy Evaluation )
17. 5 10 10
18. 5 10 10 (上底 + 下底) x 高 / 2
20. Demo (1) - OOP // Simple Functional with BMI from OOP // 避免改變狀態/資料，沒有任何副作用 ( Immutable ) // 純函式，傳入相同的參數會得到相同的結果 (Pure Function) // 延遲評估，參數傳入時才執行，不會預先載入 ( Lazy Evaluation ) class Person { height: number; weight: number; constructor(h: number, w: number) { this.height = h; this.weight = w; } getBMI() { return this.weight / ((this.height / 100) * (this.height / 100)); } } let john = new Person(180, 80); console.log(john.getBMI()); // 24.691...
21. Demo (2) – Extract to Function const bmi = (h: number, w: number) => w / ((h / 100) * (h / 100)); class Person { height: number; weight: number; constructor(h: number, w: number) { /* 略 */ } getBMI() { return bmi(this.height, this.weight); } } let john = new Person(180, 80); console.log(john.getBMI()); // 24.691...
22. Demo (3) – High Order Function const square = (num: number) => num * num; const divide = (a: number, b: number) => a / b; const bmi = (h: number, w: number) => divide(w, square(h / 100)); class Person { height: number; weight: number; constructor(h: number, w: number) { /* 略 */ } getBMI() { return bmi(this.height, this.weight); } } let john = new Person(180, 80); console.log(john.getBMI()); // 24.691...
23. Demo (4) – Reuse Function const square = (num: number) => num * num; const divide = (a: number, b: number) => a / b; const bmi = (h: number, w: number) => divide(w, square(h / 100)); const bmiPerson = (p: Person) => bmi(p.height, p.weight); class Person { height: number; weight: number; constructor(h: number, w: number) { /* 略 */ } getBMI() { return bmiPerson(this); } } let john = new Person(180, 80); console.log(john.getBMI()); // 24.691...
24. Demo (5) – Handle Bunch Data with Function let john = new Person(180, 80); let kevin = new Person(180, 90); let will = new Person(170, 60); let personList = [john, kevin, will]; let bmiList = personList.map(bmiPerson); console.log(bmiList); // [24.691, 27.777, 20.761]
25. 若一開始不知如何畫分物件職責 可先以函式為單元進行設計 再將相同職責的函式重構出物件 https://www.ithome.com.tw/node/78331
26. Function-based (Vue 3) Vue 的核心團隊想將 Vue 的開發習慣 導向以函式為基礎的開發方式 為此把原本的 data 和 methods() 改成 用 step() 來替代 兼容版本：支援 3.0 和所有 2.x API 標準版本：只支援 3.0 和部分 2.x API
27. Function-based (Vue 3)
28. Functional in Angular? 函式導向是一種開發典範，Angular 現行架構完全適用，不需大興土木 如果你在使用 RxJS，你已經在玩函式導向開發 除了透過 RxJS / Ramda / Lodash 等 FP 函式庫來玩函式導向開發，使用 純 JavaScript 也可以透過函式導向的開發思維來解決的問題 https://github.com/stoeffel/awesome-fp-js
29. 狀態管理 Vue 通常起手式就搭配 Vuex 來做狀態管理 Angular 可以透過 Service 做到簡易狀態管理，當然也可以導入 NGRX 來做到 Redux 風格的狀態管理 Service 這玩意在 Angular 中真的是妙用無窮，除了將共用的邏輯抽出 來重用，拿來做狀態管理也是輕鬆寫意
30. 呼叫 API Vue 的開發環境下，習慣使用 axios / superagent / request 或原生的 fetch 來呼叫 API Angular 內建 HttpClient，大多數開發者都選擇使用內建的 API 功能
31. 模組化 Module Vue 本身沒有提供模組化 Module 的概念，都是用元件 / 組件的方式做 疊加，若要建立模組的層級，要靠各位開發者自行實作 Angular 的模組化不僅用在功能 / 特性的隔離，也可用來做延遲載入 Module 的主要貢獻不是在於他怎麼被使用，而是藉由抽象化的概念， 讓架構看得更清楚
32. 或許我們都專注在把專案完成，而忘記自己 的習慣可能造成的影響，如果大家的習慣都 差不多，問題可以少很多 一致的寫法 / 架構 / 工具，能幫助開發過程 中的問題，不會越滾越大
33. 或許我們都專注在把專案完成，而忘記自己 的習慣可能造成的影響，如果大家的習慣都 差不多，問題可以少很多 一致的寫法 / 架構 / 工具，能幫助開發過程 中的問題，不會越滾越大
34. 聽你說 實務上每個開發團隊的習慣都不一 樣，與我們分享您在開發過程中， 遇到的好習慣 / 壞習慣
35. Thanks! HTML JS 謝謝各位聆聽 Poy Chang 的技術交流中心