Introduction
ทำไมต้อง Mosaic, คอร์สนี้ถูกจัดโครงสร้างอย่างไร และคุณจะได้สร้างอะไรเมื่อจบคอร์ส Open →
Mosaic
สร้าง Mosaic — storefront ที่ทำจาก micro-frontend ที่ deploy แยกกันอิสระ React shell จะ compose remote ของ React, Svelte และ Astro เข้าด้วยกันตอน runtime ด้วย Module Federation 2.0, Web Components เชื่อม framework ต่าง ๆ เข้าหากัน และแต่ละ slice เป็นเจ้าของ UI กับ backend แบบ Hono บาง ๆ ของตัวเอง
สิ่งที่คุณจะสร้าง
หัวข้อที่มีชื่อว่า “สิ่งที่คุณจะสร้าง”Setup & Tooling
pnpm monorepo, Vite, layout ของ shell + remote, Module Federation และ Hono BFF stack Open →
The Shell (Host)
สร้าง React host: layout, top-nav, โครง routing และ Module Federation host config Open →
Module Federation Core
Expose และ consume remote ตอน runtime ด้วย remoteEntry และ shared singleton Open →
Catalog Remote (React)
ส่ง federated remote ตัวแรก — catalog แบบ React ที่มี Hono BFF บาง ๆ ของตัวเอง Open →
Web Components Interop
ห่อ remote ให้เป็น custom element เพื่อให้ framework ไหนก็ mount ได้ Open →
Cart Remote (Svelte)
สร้าง cart + BFF ด้วย Svelte แล้ว mount เข้า React shell ผ่าน web component Open →
Content Remote (Astro)
ผนวก Astro app แบบ SSR/static เข้ากับการ compose — และจุดที่ federate ไม่ได้ Open →
Cross-MFE Communication
ต่อสาย event bus แบบ decoupled ให้ remote คุยกันได้โดยไม่ต้อง import กันและกัน Open →
Shared Auth & State
แชร์ session เดียวข้ามทุก micro-frontend โดยไม่ผูกกันแน่นเกินไป Open →
Shared Design System
สร้าง token และ web-component primitive ที่ React, Svelte และ Astro ใช้ร่วมกันได้ทั้งหมด Open →
Routing Across MFEs
ให้ shell เป็นเจ้าของ route ระดับบน และ remote เป็นเจ้าของ sub-route ของตัวเอง พร้อม deep-linking Open →
Resilience & Performance
จัดการเคส remote โหลดล้มเหลว, lazy-load, dedupe shared dependency และ isolate error Open →
Independent Deployment
Deploy แต่ละ slice (UI + BFF) แยกกัน — ส่งงานของทีมเดียวได้โดยไม่ต้อง redeploy ตัวอื่น Open →
Wrap-up
ทบทวนสิ่งที่คุณสร้าง, trade-off ต่าง ๆ และจะพา Mosaic ไปต่อทางไหนได้บ้าง Open →