Angular #1 - 為何選 Angular

現今三大主流 Angular, Vue, React 當中，為何選 Angular？

• 那還用說，當然就是因為它最潮(X)，主要有以下幾個原因(O):
  • 它遵循標準，比方說早期的 ES5，最新的 ES2015~ES2020，並以最新的方式實作之(e.g. Typescript 的強型別)
  • 它包含了標準的開發工具，但又有一定的自訂性
    • 標準的部份包含一致性的產生、建置、測試、部署，統一由其 Angular CLI 達成(其他的可能要東掛一點西裝一點)
    • 承上，雖然其 CLI 提供了一套標準，但每個環境都可以抽換，像是不同的建置方式(不一定用 webpack)，或是不同的 IDE(e.g. VSCode/Sublime)
  • 個人意見:
    • 它寫起來跟 Java 很像(class/annotation/DI)
    • 但同時你以前學過的 Effective Javascript 或其他相關的知識又不會被遺漏，這使得語法上學習曲線低了許多
    • 它的背後有龐大的社群，以及 Google 的撐腰
    • React 感覺東掛一點西掛一點...很煩，加上我不愛 FB
    • VueJS 是原 AngularJS 的人出來寫的 ... 那我寫 VueJS 做什麼？的確進入障礙會低一點，但它又是以掛 lib 的方式存在了

讓我們休息一會兒，聽個故事

• 時光倒流，回到了 2009
  • 當時百家齊鳴，而 AngularJS 從中脫穎而出
  • 隨著 HTML5 的釋出及 ES5 的標準化，網頁開發不再是舊時代的靜態頁面
• 到了 2014年，Angular 2 的消息釋出了
  • 為了避免混亂，2 以前的統一叫 AngularJS，2(含)以後的統一叫 Angular，它跟 AngularJS 完全不在一個水平上，是全新的概念
  • 2016年，Angular 正式上市，2018年 Angular 4 出了，今天 是2021年，已經出到 Angular 11，而且每半年一大更版

回到正題，Angular 一個完整的平台，不是單純的框架或 javascript 套件

• 它擁有自己的 CLI
  • 可以用來開發
  • 可以用來測試，不論是 Unit Test/E2E Test
  • 也可以拿來部署，而且最佳化
• 它可以離線操作
  • 當後端掛掉的時候
  • 當網路連線很不穩定或趨近於零的時候
• 它支援各種平台的開發
  • 桌面應用程式(搭配 Electron)
  • 手機應用程式(Ionic)
  • 網頁前端應用程式(多講的？)
• 豐富的 UI 套件
  • Clarity UI
  • Material UI
  • PrimeNG
  • ...(略)

開發 Angular 需要什麼？

• NodeJS
  • 本來是個透過 Chrome 的 V8 JavaScript engine，讓 JS 程式可以不用瀏覽器也能執行(e.g. Server)
  • 後來出現了 npm 管理使用到的套件
• Angular CLI
  • 快速建立專案基底(scaffolding)
  • 快速建立專案元件(components)
  • 建置的工具鏈
    • 負責依設定的目標標準(e.g. ES2015) 編譯 Typescript 成 javascript，達到跨瀏覽器的作用(Babel)
  • 本機開發測試用伺服器(如果沒有就虛掉了)
  • lint(統一格式規範)
  • 負責執行單元測試與整合測試

Angular 透過獨立編譯，使得程式不再相依於瀏覽器

• 編譯的時候做了什麼呢？
  • 解析了各種綁定(後面會再說明)
  • 註冊了各種事件
  • 渲染了各式各樣的 HTML
• 不論在哪個 Javascript 引執行 Angular 產出的 JS，都該正常運作，而正因為獨立編譯，使得以下的事情是可能的
  • 快速載入 - 手機的時代早已來臨，如果單靠手機上的瀏覽器作各種處理，肯定會很慢的，所以全部在 server rendering 這段就處理掉了
  • 效能 - Javascript 最讓人垢病的就是它很慢，單執行緒…但近幾年的瀏覽器出了一項技術叫 Web Workers，可以使得影音播放、使用者互動…等效能更加流暢
  • SEO - 雖然是個老名詞了，但誰不想出名呢？
  • 支援多平台後端整合，例如預設的 NodeJS 或是 Java, Go ...等

Component 架構

• 很多前端語言都是 Component based
  • 這樣的好處與是什麼？
    • 減少耦合與重複性
  • 它有什麼特性？
    • 封裝 -> 讓 Component 的邏輯放置在統一的地方
    • 隔離 -> 讓 Component 的內部實作不被其他元件看到
    • 重用性 -> 讓 Component 可以各種排列組合重複使用
    • 事件化 -> 讓 Component 在其生命週期釋出事件
    • 可自訂 -> 讓 Component 可以獨立被加上 style
    • 宣告式 -> 讓 Component 可以透過單純的標籤就直接使用
  • 以上特性需要 W3C 的哪些規範才能達成？
    • 自訂 Element(封裝/宣告式/重用性/事件化)
    • Shadow DOM(封裝/隔離/可自訂)
    • 模版(封裝/隔離)
    • Javascript Modules(封裝/隔離/重用性)

深入 W3C 規範

• 自訂 Element
  • HTML 是網頁用來呈現畫面所使用的一組有限的元素，e.g. input/div/span/form/canvas/media/...等
  • 而自訂 Elelement 指的是可以擴充 HTML 建立自己的元素，詳細規範請看連結
  • 以下舉一個簡單的自訂元素範例:

      <tabs>
          <tab title="About">
              <h1>This is the about tab</h1>
          </tab>
          <tab title="Profile">
              <h2>This is the profile tab</h2>
          </tab>
          <tab title="Contact Us">
          <form>
              <textarea name="message"></textarea>
              <input type="submit" value="Send">
          </tab>
      </tabs>

    • tabs 與 tab 元素看起來就跟一般的 HTML tag 沒兩樣
    • jQuery 必須操作一堆 DOM 才能達到同樣的效果
• Shadow DOM
  • 是隔離在一般的樣式設定之外的獨立區塊
  • 如果在 Shadow DOM 內／外各有一個 button，彼此的 CSS 是不會相互影響的
• Templates
  • 可以透過 <template> 建立一些可重覆使用的 HTML 片段
  • 詳細的 W3C 規範可以參考連結
  • 通常會搭配 Shadow DOM，將內容動態注入到 shadow root
• Javascript modules
  • 以往只要在 page load 沒有載入所有資源的話，可能就要透過 XHR 的方式動態載入，但一直都沒有一個統一的標準
  • 自從 Javascript 提出 Module 與 Module Loaders 的概念後，就可以在程式的各個生命週期載入檔案或資源，再也不限定在 page load 或是 XHR 事後補上。
  • 如果熟悉後端語言如 Java/Python/Go ... 就會對這種模組化的東西很有概念才是
  • 在 Javascript 中，只要有用到 export 的檔案，就是在建立模組。而使用這些模組的方式就是透過 import，以下為例:

      import { Component } from '@angular/core'
      import { AccountService } from '../services/account.service'

    • 可以從既有的 module 作 import
    • 或是從自行定義的 module import
    • 以前要透過 global 變數做的事情，在這只要 export/import 就可以達到了，再也不用擔心 global 變數被汙染的事
    • 整個 Angular 就是圍繞在建立 module 上

現代 javascript 語法

• Classes

  • 沒錯，就是類別，寫過 OOP 的後端語言的一定很熟悉
  • 它骨子裡還是走 prototype 繼承，但現在可以直接用 class 這個 keyword了

• Decorators

  • 沒錯，跟在 Java 看到的 Annotation 作用很像
  • 它主要是在針對類別提供額外的 Metadata

• Modules

  • 再次提到透過 export 就可以建立 Module

• Template Literals

  • 不解釋

• 以下舉一個範例，說明上述提到的四大項

    import { Component } from '@angular/core'
  
    @Component ({
        selector: 'my-component',
        template:`
          <div>
            <h4>{{title}}</h4>
          </div>
        `
    })
    export class MyComponent {
        constructor() {
          this.title = 'My Component'
        }
    }

  • constructor() - 建構子，當一個新的物件實例被建立時會被執行的
  • export 使得 MyComponent 成為一個 module
  • import，引用了 Component 這個 @angular/core 提供的 Module
  • @Component, 提供 Metadata，以此例:
    • selector 就是在 HTML 中如何使用這個 component
    • template 就是渲染 selector 時會長出的 HTML
    • 其他以後都會再提到

Observables

• 或許有人聽過，或許沒人聽過，但是個出現挺久的東西
  • 它可以處理非同步的活動，除了 RxJS 之外還有 RxJava,...等
  • Reactive programming(Spring WebFlux 有用到)
  • 它的作用有點像 Promise 但 Promise 只處理一次的事件，而 Observable 可以不斷的像事件監聽一樣非同步處理
  • 以下舉一個範例:

      this.http.get('/api/user').subscribe(user= > {
        // Do something with the record
      },
      (error) => {
        // Handle the error
      });

  • Observables 就像 Java Lambda 一樣可以結合，轉換…等等，詳細的可以參考 RxJS in Action 這本書的內容

Typescript and Angular

• Typescript 是 javascript 的超集合
  • 意思就是說 Typescript 在 javascript 之上
  • 再白話一點就是說 Typescript 可以轉換成任何版本的 javascript
  • 它具有強型別的特性，所以可以透過編譯時期就察覺一些型態上的繆誤，不會等 Runtime 才拋錯
• 為何要學 Typescript？
  • 強型別，清清楚
  • VSCode 可以搭配即時列出語法錯誤
  • 很多很酷的功能都只有 Typescript 有提供，e.g. 編譯、即時發現 undefined 的危機 ...等

以上就是本篇對 Angular 一個草草的介紹，相信大家已經迫不及待想寫了，那就繼續往下看吧！