แนวคิด Micro-Frontend และข้อแลกเปลี่ยน
ทำความเข้าใจเหตุผลที่ทีมเลือกใช้ micro-frontend รวมถึงแนวทางแยกการทำงานขณะรันกับขณะสร้าง
แนวคิด Micro-Frontend และข้อแลกเปลี่ยน เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน
ไมโครฟรอนต์เอนด์คืออะไร
ไมโครฟรอนต์เอนด์นำแนวคิดไมโครเซอร์วิสมาขยายสู่ชั้นส่วนติดต่อผู้ใช้ โดยแบ่งเว็บแอปพลิเคชันเดียวออกเป็นส่วนประกอบส่วนหน้าที่แต่ละทีมเป็นเจ้าของ พัฒนา และนำไปใช้งานได้อย่างอิสระ
กลยุทธ์การผสานระบบ
มีกลยุทธ์การผสานระบบหลักสามรูปแบบ ได้แก่ ระหว่างเวลาสร้าง (แพ็กเกจ npm) ฝั่งเซิร์ฟเวอร์ (การประกอบที่ขอบเครือข่าย) และระหว่างเวลาทำงาน (Module Federation, iframe และคอมโพเนนต์เว็บ)
การผสานระบบระหว่างเวลาสร้าง
เผยแพร่คอมโพเนนต์ที่ใช้ร่วมกันเป็นแพ็กเกจ npm วิธีนี้เรียบง่าย แต่การเปลี่ยนแปลงใด ๆ ต้องเผยแพร่รุ่นใหม่และนำไปใช้งานใหม่กับผู้ใช้ทั้งหมด — จึงยังไม่ใช่การนำไปใช้งานอย่างอิสระอย่างแท้จริง
// Team A publishes:
npm publish @company/design-system
// Team B installs:
npm install @company/design-system
import { Button } from '@company/design-system';
// Deployed together — not independentการผสานระบบระหว่างเวลาทำงานผ่าน Module Federation
Module Federation ของ Webpack 5 ทำให้แอปหนึ่ง (โฮสต์) โหลดคอมโพเนนต์จากอีกแอปหนึ่ง (รีโมต) ได้ระหว่างเวลาทำงาน — จึงนำไปใช้งานได้อย่างอิสระอย่างแท้จริง
การผสานระบบด้วย iframe
ฝังไมโครฟรอนต์เอนด์ไว้ใน iframe เพื่อแยกขอบเขตออกจากกันให้มากที่สุด ข้อดี: ไม่มีความขัดแย้งระหว่าง CSS/JS เลย ข้อเสีย: ประสบการณ์ผู้ใช้ไม่ดี (การเลื่อน การโฟกัส และการกำหนดขนาด) แชร์สถานะได้ยาก และไม่เป็นมิตรต่อ SEO
คอมโพเนนต์เว็บ
ห่อไมโครฟรอนต์เอนด์แต่ละรายการไว้ใน custom element วิธีนี้ทำงานร่วมกับเฟรมเวิร์กใดก็ได้และมีการแยกขอบเขตแบบเนทีฟ แต่ไม่มีความสามารถเฉพาะของ React เช่น การแชร์คอนเท็กซ์
// Remote team builds:
customElements.define('product-detail', ProductDetailElement);
// Host team embeds:
<product-detail product-id="123" />ข้อแลกเปลี่ยน: ประโยชน์
การนำไปใช้งานอย่างอิสระ (นำส่วนติดต่อผู้ใช้ของทีมหนึ่งไปใช้งานโดยไม่ต้องแก้ไขส่วนของทีมอื่น) ความเป็นอิสระของทีม (เลือกสแตกและสิ่งพึ่งพาของตนเอง) และความสามารถในการขยายระบบ (ทีมต่าง ๆ ทำงานแบบขนานกันได้โดยไม่เกิดความขัดแย้งของโค้ด)
ข้อแลกเปลี่ยน: ต้นทุน
ความซับซ้อนในการปฏิบัติงาน (ที่เก็บโค้ด กระบวนการ CI และการนำไปใช้งานมีจำนวนมากขึ้น) การทำซ้ำของบันเดิล (โหลด React หลายครั้งหากไม่ได้แชร์กัน) ภาระด้านประสิทธิภาพ และการแก้ไขข้อผิดพลาดข้ามขอบเขตที่ทำได้ยากขึ้น
ควรเลือกไมโครฟรอนต์เอนด์เมื่อใด
ไมโครฟรอนต์เอนด์มีประโยชน์สูงสุดเมื่อมีทีมขนาดใหญ่หลายทีมทำงานกับผลิตภัณฑ์เดียวกัน ใช้สแตกเทคโนโลยีที่แตกต่างกันในแต่ละส่วน หรือต้องการนำแต่ละส่วนไปใช้งานอย่างเป็นอิสระโดยสมบูรณ์
ไม่ควรเลือกไมโครฟรอนต์เอนด์เมื่อใด
หลีกเลี่ยงไมโครฟรอนต์เอนด์สำหรับทีมขนาดเล็ก (ภาระที่เพิ่มขึ้นมีมากกว่าประโยชน์) แอปที่เรียบง่าย หรือกรณีที่คุณควบคุมส่วนหน้าทั้งหมดได้เอง — monorepo ที่ใช้ Nx/Turborepo มักเพียงพอแล้ว
ระบบการออกแบบที่ใช้ร่วมกัน
ไม่ว่าจะใช้กลยุทธ์การผสานระบบแบบใด ระบบการออกแบบที่ใช้ร่วมกัน (เผยแพร่เป็นแพ็กเกจหรือเปิดเผยผ่าน Module Federation) จะช่วยให้ไมโครฟรอนต์เอนด์มีรูปแบบภาพที่สอดคล้องกัน
ตรวจสอบอย่างรวดเร็ว
แนวทางการผสานระบบใดที่ทำให้ไมโครฟรอนต์เอนด์สามารถนำไปใช้งานอย่างเป็นอิสระได้อย่างแท้จริงในระหว่างเวลาทำงาน
สรุปทบทวน
ไมโครฟรอนต์เอนด์แยกส่วนติดต่อผู้ใช้ออกเพื่อให้ทีมมีอิสระและนำแต่ละส่วนไปใช้งานได้อย่างอิสระ ตัวเลือกการผสานระบบมีตั้งแต่แพ็กเกจ npm (เรียบง่ายแต่ไม่เป็นอิสระ) ไปจนถึง Module Federation (ทำงานระหว่างเวลาทำงานและเป็นอิสระอย่างแท้จริง) ควรชั่งน้ำหนักต้นทุนด้านการปฏิบัติงาน — ไมโครฟรอนต์เอนด์เหมาะกับผลิตภัณฑ์ขนาดใหญ่ที่มีหลายทีม แต่จะเพิ่มความซับซ้อนให้โครงการขนาดเล็ก
คำถามที่พบบ่อย
บทเรียน “แนวคิด Micro-Frontend และข้อแลกเปลี่ยน” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “แนวคิด Micro-Frontend และข้อแลกเปลี่ยน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “แนวคิด Micro-Frontend และข้อแลกเปลี่ยน”
ทำความเข้าใจเหตุผลที่ทีมเลือกใช้ micro-frontend รวมถึงแนวทางแยกการทำงานขณะรันกับขณะสร้าง คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “แนวคิด Micro-Frontend และข้อแลกเปลี่ยน” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม
ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- แนวคิด Micro-Frontend และข้อแลกเปลี่ยน
- Module Federation ด้วย Webpack 5
- สถานะร่วมและการกำหนดเส้นทางระหว่าง MFE
- การปรับใช้แยกอิสระและ CI Pipelines สำหรับ MFE