ชื่อว่าหลายๆคนคงเคยได้ยินกับคำว่า Micro services แล้วความหมายของมันละคืออะไร ก่อนจะไปทำความรู้จักกับ Micro Frontends เรามาทำความรู้จักคล้าวๆเกียวกับตัวของ Micro services กันก่อนดีกว่า ในการพัฒนาโปรแกรมเราจะได้ยินคำว่า Micro services บ่อยมากๆเลย โดยตัวของ Micro services มีลักษณะการพัฒนา Application หรือเว็บไซต์ เป็น services ย่อยๆ โดยส่วนใหญ่แล้วจะนิยมติดต่อกับผ่าน API เท่านี้ทุกคนก็คงเข้าใจกันแล้วเราไปทำความรู้จักกับ Micro Frontends กัน
ปัญหาที่ dev Font-end พบเจอบ่อย
ในการพัฒนา application ตัวนึงแน่นอนว่า นักพัฒนาก็จะหาตัวของ framework ต่างๆมาครอบเพื่อที่จะให้การทำงานรวมกันมันทำงานได้ แต่ปัญหาจะเกิดขึ้นหากเรา ต้องการทำงานมากว่า 1 เครื่องมือละจะทำไง ? หรือต้องการที่จะเปลี่ยนรูปแบบการเขียนโค้ด หรือ framework ตัวใหม่มาใช้งาน ปํญหาก็อาจจะเกิดขึ้นได้แบบ 100% และเวลาแก้ก็แก้กันแบบปวดหัวกันเลยทีเดียว นักพัฒนาก็เลยไปใช้ในส่วนของตัว Micro services เพราะไม่เกิดปัญหาแบบนี้เพราะไรละถึงไม่เกิด ?
Micro Frontends คืออะไร ?
ถ้าให้เขียนแล้วอ่านแบบเข้าใจง่ายๆเลยก็คือ Micro Frontends มีรูปแบบการแยกส่วนประกอบต่างๆ ออกมาเป็น Component หากว่า Monolithic แบบเดิมเวลาที่จะพัฒนาเว็บไซต์ขึ้นมา 1 เว็บ จะสักเกตุได้ว่าทุกอย่างจะอยู่รวมกันไม่ว่าจะเป็น Fontend, Backend, Database จะอยู่รวมกันหมดเลย และต่อมาก็มีการแบ่งการทำงานเป็น Font-end, Back-end อย่างชัดเจนแล้ว ก็หาตัว API มาใช้เป็นตัวเชื่อมต่อระหว่าง Fontend และ Backend
ในส่วนของตัว Micro Frontends มีรูปแบบการทำงานจะไม่ใช่แค่ Fontend, Backend อีกต่อไปแต่จะเป็นในด้านของมุมมองการทำงานซะมากกว่า โดยจะทำการแบ่งทีมต่างๆได้ดังนี้
- Team Inspire
คือทีมที่ช่วยลูกค้าในการค้าหาสินค้าได้ยังไงบางนั้นเอง - Team Search
คือทีมที่ทำยังไงให้เกิดการค้นหา Product ได้อย่างถูกต้องรวดเร็วและแม่นยำ - Team Product
ทีมนี้จะทำหน้าที่ในการแสดงสินค้าต่างๆผ่านทาง Product ไม่ว่าจะเป็นราคารูปภาพ สี ต่างๆ - Team Checkout
ทีมนี้คือทีมที่จะสร้างประสมการณ์ที่ดีให้กับลูกค้าที่มาใช้บริการจาก Product ของเรา
จะเห็นได้ว่าไม่มีการแยกตำแหน่งแบบใครทำ Fontend, Backend แต่จะแบ่งตาม Feature/Customer Experience ที่ทำการมอง Product ของเราสรุปง่ายๆก็คือทีมไหนทำส่วนตรงไหนก็ทำตรงนั้นนั้นและเพื่อที่ลูกค้าที่ใช้บริการ Product ของเราจะได้รับประสบการณ์ที่ดีนั้นเอง
หลักการณ์และข้อปัฎิบัติในการทำงานของ Micro Frontends มีทั้งหมด 5 ตัวได้แก่
- Be Technology Agnostic
คือทีมแต่ละทีมที่พัฒนาทั้งหมดมีอิสระในการเลือกใช้งาน framework ต่างๆได้ด้วยตนเอง - Isolate Team Code
จะไม่แชร์โค้ดรวมกันในระหว่างทีม ตัวส่วนของหัวข้อนี้เค้าจะให้เราเน้นไปที่ความเป็นอิสระระหว่างทีมแต่ละทีมเพื่อที่จะเอามารวมกันให้ได้ง่ายมากขึ้น - Establish Team Prefixes
คือการตั้ง Prefixes ของทีมต่างๆที่ให้มีการแยกความรับผิดชอบงานต่างๆในทีมอย่างชัดเจน - Favor Native Browser Features over Custom APIs
การเรียกใช้งานในส่วนของ HTML Attriburtes ต่างๆที่เราใช้งานกันอยู่ทุกวันนี้แทนการใช้งานเครื่องมืออื่นๆหรือการสร้างระบบใหม่ขึ้นมา - Build a Resilient Site
คือการใช้งานเครื่องมือต่างๆควรมีวิธีในการจัดการกับเครื่องมือที่เรานำมาใช้งานด้วยในกรณีที่มัน Error เกิดปัญหา เพื่อจะให้มีวิธีในการรองรับการทำงาน
โดยในปัจุบัน Micro Frontends ได้มีการถูกนำมาใช้เนืองจากปัญหาของ Monolithic หรือการทำงานแบบ Microservices พบเจอปัญหาบ่อย Micro Frontends จะเป็นในเรื่องของมุมมองการใช้งานของลูกค้าเพื่อที่จะแบ่งหน้าที่และรับผิดชอบในงานที่แตกต่างกันออกไปนั้นเอง จะไม่เหมือนกับการแบ่งงานเป็น Fontend, Backend และมีการนำเทคนิค Web Components เข้ามาช่วยในการทำงาน หลายๆองกรศ์ก็จะใช้ Project Management ที่ต่างกัน หรือคืออะไร Knowledge Management
อ้างอิง
- micro-frontends, [ออนไลน์], เข้าถึงได้จาก https://github.com/neuland/micro-frontends/tree/dependabot/bundler/addressable-2.8.1
- ทำความรู้จักกับ Micro Frontend, [ออนไลน์], เข้าถึงได้จาก https://medium.com/devspree/%E0%B8%97%E0%B8%B3%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%88%E0%B8%B1%E0%B8%81%E0%B8%81%E0%B8%B1%E0%B8%9A-micro-frontend-ffe9887499fa
- Micro Frontends, [ออนไลน์], เข้าถึงได้จาก https://micro-frontends.org/
