# 現代前端工程

> 框架之外的那些事：在 AI 加速開發的時代，重新探索 Web 的核心觀念、工程實踐與技術選擇。

- 課程頁面: https://progrmatic.com/courses/modern-frontend
- 價格: 免費
- 狀態: 即將推出，尚未開賣
- 語言: 繁體中文
- 提供者: Progrmatic

## 課程介紹

## 💡 AI 都能幫我們寫前端了，還需要學什麼？

隨著 AI Coding 工具越來越成熟，從頁面排版、互動元件到完整的 Web Application，我們已經能透過自然語言快速產生大量程式碼。

但**能夠生成一個看起來正常的網站，不代表真正理解它如何運作。**

當 AI 能協助我們完成越來越多實作工作，我們或許不再需要花費大量時間記憶每個框架的 API，卻仍然需要理解：前端如何與後端交換資料？狀態應該放在哪裡？資料如何保持同步？不同的渲染策略會帶來什麼影響？如何兼顧效能、安全性與使用者體驗？

而隨著現代 Web 開發逐漸整合更多伺服器端能力，前端與後端的協作也變得更加緊密。從資料載入、身分驗證到背景推播，許多看似簡單的功能，背後其實涉及瀏覽器、伺服器與 Web Platform 之間的協作。

不僅如此，**把功能開發出來，也不代表工程工作就此結束。**

從自動化測試、CI/CD、雲端部署，到正式上線後的使用者行為分析、錯誤追蹤與效能監測，我們還需要知道如何驗證、交付並持續改善一個真正運作中的 Web Application。

這門課將透過不同的實際案例，探索現代前端工程中值得理解的核心觀念與實踐方式。我們不侷限於特定框架，也不追求記住最多工具的操作方式，而是希望透過問題與實作，理解各種技術背後的原理、限制與設計取捨。

**AI 可以幫助我們更快完成實作，而我們要學習的，是如何理解問題、判斷方案，並確保最終成果真正符合需求。**

## 🎯 這門課你將學到什麼？

- **API 串接與即時通訊：** 從 HTTP 基礎、REST API 的設計慣例到 GraphQL 的查詢方式，理解不同 API 風格的特性與適用情境；並透過 WebSocket 與 Server-Sent Events（SSE）探索即時資料更新。
- **狀態管理與資料流：** 理解不同狀態的責任與生命週期，探索資料載入、快取、同步、非同步操作與錯誤處理背後的設計考量。
- **路由、渲染與前後端協作：** 從 URL State、CSR、SSR 到預渲染，理解不同渲染策略的適用情境，以及 Browser 與 Server 之間的執行邊界。
- **國際化與內容可發現性：** 探索多語系設計、SEO、Metadata、Structured Data 與 Sitemap，理解如何讓內容更容易被不同使用者及搜尋系統發現與理解。
- **瀏覽器 API 與 PWA 實戰：** 透過 Service Workers、Web Notifications、Push API、離線快取與 Web Components 等實例，探索瀏覽器提供的各種能力，以及如何將它們應用於實際的 Web 開發。
- **前端安全基礎：** 理解瀏覽器安全模型，以及 XSS、CSRF、CORS、CSP、Cookies 與敏感資訊管理等常見的安全議題。
- **測試與使用者體驗：** 結合元件測試、端對端測試（E2E Testing）、Accessibility、Core Web Vitals 與 Lighthouse，探索如何驗證應用行為、評估網站效能與使用體驗。
- **CI/CD 與雲端部署：** 透過 GitHub Actions 建立自動化驗證與部署流程，整合 Lighthouse CI 等品質檢查，並結合 Cloudflare 探索 DNS、CDN、環境設定、快取策略與網站安全等實務議題。
- **Analytics 與前端可觀測性：** 透過 Umami、Google Analytics 與 Sentry 等工具，探索網站分析、事件追蹤與錯誤監測，理解如何觀察正式環境中的應用行為與問題。

## 👥 適合對象

- **資訊相關科系學生：** 已具備基本 Web 開發能力，希望進一步理解框架之外的核心觀念，以及完整 Web Application 的工程實踐。
- **前端開發者：** 熟悉基本框架操作，希望拓展狀態管理、Web Platform、安全性、測試、部署與可觀測性等工程知識。
- **全端與軟體開發者：** 希望更深入理解瀏覽器與伺服器的協作方式，以及現代 Web Application 從開發到上線的完整流程。
- **AI 輔助開發使用者：** 已經開始利用 AI 產生網頁或應用，希望不只快速完成功能，也能理解、驗證與改善程式碼及系統的實際行為。

## 📌 開始之前

建議具備 HTML、CSS、JavaScript 的基礎能力，並至少使用過一種前端框架（例如 React、Vue 或 Svelte）開發簡單的應用。若熟悉 TypeScript、Git 與終端機操作，將更容易跟上實作內容。

課程中的實作範例將以 SvelteKit 為主要示範框架，但重點在於框架之外的觀念與實踐方式，你也可以使用自己熟悉的框架對照練習。

部分實作需要使用 GitHub、Cloudflare、Sentry 等第三方服務的帳號。課程將以各服務的免費方案為主，但方案內容與用量限制可能隨服務政策改變，仍需留意實際的使用情況。

部分瀏覽器 API 的支援程度，會因瀏覽器、作業系統與裝置而有所不同，課程中也會說明相關的相容性考量。

本課程不從零教授 HTML、CSS 或特定框架的基礎語法。

**框架與工具會持續演進，AI 也會越來越擅長生成程式碼。但理解 Web 的運作原理、掌握工程問題的本質，以及做出合理技術選擇的能力，仍然值得持續累積。**

## 課程大綱

### 1. AI 時代的現代前端工程 (即將推出)

### 2. 串接後端資料 — REST、GraphQL 與即時通訊 (即將推出)

### 3. 狀態管理與資料流 (即將推出)

### 4. 路由、渲染與前後端協作 (即將推出)

### 5. 多語系與內容可發現性 (即將推出)

### 6. 瀏覽器 API 與 PWA 實戰 (即將推出)

### 7. Web Security — 前端不可忽略的安全基礎 (即將推出)

### 8. 測試、效能與使用體驗 (即將推出)

### 9. 從開發到上線 — CI/CD 與部署實戰 (即將推出)

### 10. 上線之後 — Analytics 與可觀測性 (即將推出)