Open Source - U2445

微前端架構設計與技術應用

Micro Frontend Architecture Design and Technical Applications
  • 時數：7小時
  • 費用：NT$ 8,000
  • 點數：2.0

選擇查詢分區開課時間

地點 班號 日期 時間 預約
台北 2524455 班 2025/10/17 ~ 2025/10/17 每週五 09:00~17:00 預約
台北 2524456 班 2025/12/12 ~ 2025/12/12 每週五 09:00~17:00 預約
高雄 7252445 班 2025/09/26 ~ 2025/09/26 每週五 09:00~17:00 預約

目前查無開課時段

詳細開課時間請洽詢業務
新竹、台中、高雄如有上課需求，請參考台北開課日期，洽當地服務人員依需求加開遠距開課日期

聯絡恆逸

教材

恆逸專用教材

課程目標

微服務應該聽過，但是【微前端】有聽過嗎? 微前端(Micro Frontends)是一種架構模式，用意在將前端應用程式拆分成多個獨立可部署的單位，在大型企業中可能有好幾個不同單位的前端網頁，每個部分可以由不同的團隊獨立開發、測試和部署，最後將各自獨立的前端網頁統整在一個前端App，這個主應用負責管理及載入其他的前端網頁，這種架構稱為微前端。本課程目的是帶領學員瞭解微前端架構的核心理念與實作方式，涵蓋模組化設計、跨技術整合、獨立部署與應用通訊等關鍵議題。課程將說明目前流行的幾種微前端架構特色，並實作 Webpack Module Federation主流技術，協助學員掌握如何拆分大型前端應用並進行有效整合，提升團隊間的開發效率與系統維護彈性。學員將在課程中實作一個包含主應用與多個子應用的微前端範例，學以致用，建立導入與設計微前端的實戰能力。

適合對象

想瞭解微前端架構的開發人員

預備知識

建議已完成以下課程所具備技術能力：

U2755：HTML5網頁設計基礎及實戰應用

U2447：Angular Standalone模式深度探索Part 1

預備知識：需熟悉JavaScript、HTML、CSS，或是略通 Angular等前端技術

課程內容

  1. 認識微前端架構
  2. 微前端與傳統前端架構的關聯
  3. 幾項主流微前端架構的選擇 (Webpack Module Federation、Single-SPA …)
  4. 認識微前端架構Webpack Module Federation 核心概念
  5. 實作建立Host及Remote 應用
  6. 實作整合應用與部署

學會技能

• 明白微前端與傳統前端架構的差異與演進

• 理解微前端的核心理念，包括模組化、獨立性與整合機制

• 認識各種主流微前端架構及特色(Module Federation、Single-SPA …等)

• 熟悉Webpack Module Federation的設計概念與配置方式

• 實作包含主應用與多個remote應用的微前端架構

• 整合Angular與Vue應用於單一畫面中

• 處理remote 應用的掛載、模組共享

備註事項

  1. 上課使用Windows平台
  2. 本課程使用Visual Studio Code為開發工具

推薦課程