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

Vue 和 Angular 開發習慣

Avatar for Poy Chang Poy Chang
November 02, 2019

Vue 和 Angular 開發習慣

Avatar for Poy Chang

Poy Chang

November 02, 2019
Tweet

More Decks by Poy Chang

Other Decks in Programming

Transcript

  1. 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 講師
  2. 先說說我自己… AngularJS Angular 2 Angular X Vue AngularJS Now JavaScript

    Ionic Bootstrap Gulp TypeScript SASS More TS JavaScript Webpack More Library TypeScript Webpack Bulam ?
  3. 開發思維 - 自主性 Vue 從原本的偏向 Library 函式庫慢慢朝 Framework 框架走 Angular

    一直以完整的 Framework 框架為目標 自由實踐 Freedom Practice 最佳實踐 Best Practice 完整的框架讓人容 易往這方向走
  4. 開發思維 - 組件化 VAR 三大前端都有元件化 / 組件化的概念 Vue 常用的 .vue

    檔將 HTML JS CSS 合併,認為組件化代表不能太大 (多程式碼) Angular 元件預設將 HTML JS CSS 分開,重點在關注點分離
  5. 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...
  6. 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...
  7. 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...
  8. 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...
  9. 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]
  10. Function-based (Vue 3) Vue 的核心團隊想將 Vue 的開發習慣 導向以函式為基礎的開發方式 為此把原本的 data

    和 methods() 改成 用 step() 來替代 兼容版本:支援 3.0 和所有 2.x API 標準版本:只支援 3.0 和部分 2.x API
  11. Functional in Angular? 函式導向是一種開發典範,Angular 現行架構完全適用,不需大興土木 如果你在使用 RxJS,你已經在玩函式導向開發 除了透過 RxJS /

    Ramda / Lodash 等 FP 函式庫來玩函式導向開發,使用 純 JavaScript 也可以透過函式導向的開發思維來解決的問題 https://github.com/stoeffel/awesome-fp-js
  12. 狀態管理 Vue 通常起手式就搭配 Vuex 來做狀態管理 Angular 可以透過 Service 做到簡易狀態管理,當然也可以導入 NGRX

    來做到 Redux 風格的狀態管理 Service 這玩意在 Angular 中真的是妙用無窮,除了將共用的邏輯抽出 來重用,拿來做狀態管理也是輕鬆寫意
  13. 呼叫 API Vue 的開發環境下,習慣使用 axios / superagent / request 或原生的

    fetch 來呼叫 API Angular 內建 HttpClient,大多數開發者都選擇使用內建的 API 功能
  14. 模組化 Module Vue 本身沒有提供模組化 Module 的概念,都是用元件 / 組件的方式做 疊加,若要建立模組的層級,要靠各位開發者自行實作 Angular

    的模組化不僅用在功能 / 特性的隔離,也可用來做延遲載入 Module 的主要貢獻不是在於他怎麼被使用,而是藉由抽象化的概念, 讓架構看得更清楚