現代前端工程

💡 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 的運作原理、掌握工程問題的本質，以及做出合理技術選擇的能力，仍然值得持續累積。