Micro frontend

What & Why

Micro Frontend คือการพัฒนา Frontend โดยการแบ่งย่อยส่วนต่างๆ ให้เล็กลงและแยกจากกัน โดยที่แต่ละส่วนจะเป็นอิสระต่อกันในการพัฒนา, แต่ละส่วนจะสามารถมีทีมของตัวเองรับผิดชอบกับความต้องการทางธุรกิจที่เฉพาะเจาะจงได้

หาก Application ในปัจจุบันมีโอกาสสูงที่อนาคตจะมีความซับซ้อนมากขึ้นจาก service ที่มี ทำให้ความต้องการ (requirement) ที่ซับซ้อนมากขึ้น การใช้ codebase Frontend ตัวเดียวรับรองทุก business logic อาจจะมีปัญหาตามมาเรื่องความซ้ำซ้อนและและแยกกันไม่ขาดได้ จาก Frontend เช่น

Map service: ที่ปัจจุบันยังใช้ third party แต่หากในอนาคตจำเป็นต้องพัฒนา service ของตัวเอง ตัว development cycle อาจจะไม่สามารถรวมกันกับ web architecture ปกติได้
หากว่าในอนาคต service มีมากขึ้น และแต่ละ service มี requirement ของตัวเอง การแบ่งทีมพัฒนาแต่ละส่วน แยก testing, deployment แต่ยังรวมกันเป็น 1 เว็บได้ ถือเป็นเรื่องสำคัญ

หน้าตาของ Micro frontend

Values & Enablers

การแยกส่วน frontend component เปรียบได้กับ domain ต่างๆ ซึ่งจะสร้างความคล่องแคล่วในการพัฒนาได้มากขึ้น
การพัฒนา testing, deployment จะแยกออกจากกัน ทำให้แต่ละทีมทำงานโดยไม่ต้อง depend กับใคร เช่น หาก team a จะใช้ frontend stack ต่างกับ team b ย่อมทำได้
การพัฒนา platform จะรองรับขนาดทีมที่ใหญ่ขึ้น feature ที่ซับซ้อนขึ้น และการทำงานที่แยกขาดจากกันมากขึ้น
หากภายใน project Micro Frontend จำเป็นต้อง update version ทั้งของ libary, framework หรือแม้กระทั่งปล่อย release ใหม่ แต่ละ project สามารถทำได้แยกจากกัน และไม่กระทบซึ่งกันและกัน

Guidelines

Spike เครื่องมือสำหรับทำ Micro Frontend เช่น Piral
เลือก service ที่มีความเป็น domain ชัดเจน
แยก Service นั้นออกมาทำ Micro Frontend ผ่านเครื่องมือ (แยก Repo)
ประมินผลลัพท์และหากเหมาะสม ค่อยเริ่มทะยอยทำ Micro Frontend ภายใน service ต่างๆ โดยดูจากความชัดเจนในตัว domain และผลกระทบต่อ platform

Cautions

ระวังเรื่องการแบ่ง Micro fronend หรือ component หากไม่ได้ออกแบบหรือวางแผนให้ดีก่อนเริ่มทำ อาจทำให้เกิดความซับซ้อนเพิ่มมากขึ้นในระบบ
ควรมี knowleage และ resource ที่พร้อมเพียงพอก่อนเริ่ม

Alternatives

อาจพิจารณาทำเป็น Monolith แต่ให้คำนึงถึงการออกแบบ component ออกมาให้ให้เป็นสัดส่วนที่ชัดเจน เพื่อที่จะสามารถนำไป reuse ได้ง่าย หรือการที่จะนำไปแบ่งเป็น Micro Frontend ในอนาคต