Introduction

Mosaic คือ storefront ที่ประกอบขึ้นจาก micro-frontend ที่ deploy แยกกันอิสระ โดยมี React shell คอย compose catalog แบบ React, cart แบบ Svelte และ content app แบบ Astro — แต่ละตัวมี “ทีม” คนละทีมเป็นเจ้าของ อยู่บน framework คนละตัว และส่งงานแยกกันเอง — เย็บรวมเป็น app เดียวที่รันอยู่ด้วย Module Federation 2.0, เชื่อมเข้าด้วยกันด้วย Web Components และแต่ละ slice มี backend แบบ Hono บาง ๆ ของตัวเองหนุนอยู่

Introduction นี้ปูฉากให้คุณก่อนจะเขียนโค้ดสักบรรทัด:

• Overview — Mosaic คืออะไร, รายการ feature ทั้งหมด และแผนที่ว่าแต่ละ module ดัดแปลงมาจากคอร์ส Learn Hub ตัวไหน
• Architecture — shell, remote ต่าง ๆ, Web-Component boundary และทำไม micro-frontend ถึงถูกจัดโครงสร้างแบบนี้
• Prerequisites — เครื่องมือที่ต้องติดตั้งก่อนเริ่ม Module 1
• Roadmap — Mosaic อยู่ตรงไหนในซีรีส์ Real-World Projects

พอพร้อมแล้ว เริ่มที่ Overview → ได้เลย