[從 0 開始的 Angular 生活]No.4 Angular 的優點與特色

發表於 | 更新於 | 分類於

前言

新一代的 Angular 可以為我們做哪些事情，又相較於 AngularJS 而言有哪些特色呢？

Angular 主要特色

  • 跨平台

  • 速度與效能

    • Code generation (AOT)
      • 將元件範本預先編譯成 JS 程式碼
    • Universal
      • 將開啟頁面的首頁預先產生完整的 HTML 與 CSS 原始碼，加快載入速度
      • 可支援 Node.js 、 .NET 、 PHP 等等任何其他伺服器端網頁架構
    • Code Splitting
      • 透過元件路由機制，讓使用者只載入需要的程式碼

  • 生產力提升

    • Templates
      • 使用簡易又強大的範本語法提高開發效率
    • Angular CLI
      • 透過命令列快速建立 Angular 專案、新增元件、執行測試與部屬
    • IDE
      • 可以在現有編輯器及開發工具中使用程式碼自動完成、即時錯誤提示、程式碼建議

  • 完整的開發體驗

    • Testing
      • 結合 Karma 執行單元測試，結合 Protractor 進行各種 E2E 測試情境
    • Animation
      • 透過 Angular API 完成複雜的頁面動畫處理
    • Accessibility
      • 透過 ARIA-enabled 元件、開發者指引與內建的 a11y 測試基礎架構，建構具有可行性的應用程式

與 AngularJS 相比

  • 效能改進 (Performance)

    • 偵測變更：比 AngularJS 快 10 倍
    • 更小的 Library Size 與 延遲載入
    • 範本編譯：支援 Template 預先編譯機制
    • 渲染速度：比 AngularJS 快 5 倍 (Render & Re-render)
    • 支援伺服器渲染機制 (PHP & ASP.NET)

  • 高生產力 (Productivity)

    • 開發應用程式能用更簡潔的語法讓團隊更加上手與維護
    • 更強大的開發工具 Augury
    • 移除超過 40+ 個 directives

  • 多平台 (Versatility)

    • 支援 Broeser 、 Node.js 、 NativeScript and more …

Angular 優勢

  • 熟悉的開發架構

    • 採用 TypeScript 開發語言，使用以類別為基礎的物件導向架構開發網頁應用程式，幫助 C# 、 Java 、 PHP 等開發人員快速上手。

  • 更低的學習門檻

    • 相較於 AngularJS 減少了許多抽象的架構與概念，對於剛入門的 Angular 開發者將更容易上手
      • 例如 AngularJS 的 directives 就有非常多抽象概念

  • 更好的執行效率與行動化體驗

    • 不同行動裝置之間的各種特性接考量在內，例如觸控、螢幕大小、硬體限制等
    • 內建伺服器渲染技術 (server rendering) 與 Web Worker 技術改善頁面載入效率
    • 不僅僅做到預先產生 HTML 畫面，更能透過 NativeScript 或 Ionic 建立起網站框架與 Mobile App 之間的橋樑，開發效率與速度更好的行動瀏覽體驗。

  • 更清晰的專案架構與可維護性

    • 使用 ES6 模組管理機制，搭配 Webpack 或 SystemJS 等工具即可上手
    • 元件模組化架構，幫助大家更快理解程式碼結構，降低維護成本
    • 好的模組化架構能降低開發難度，也更適合開發大型的網站應用
0%