Micro Frontends คือ อะไรแล้วน่าใช้มั้ย

warat wongmaneekit
Nov 3, 2018 · 2 min read

จริงๆจะเขียนอีกบล็อกนึงเกี่ยวกับ Micro Frontend แต่เดี๋ยวคนไม่เก็ท เลยสรุปคร่าวๆจากเว็บ https://micro-frontends.org/ มาให้ลองอ่านกันดูก่อน

Micro Frontends คือ ไอเดียที่บอกว่า เราไม่จำเป็นที่จะต้องใช้ frontend framework อะไรมาทำทั้ง Application เพียแต่ทำ Component แยกกันเอาไว้แล้วสร้างให้มันคุย กันได้ก็พอ ( ไอเดียนี้ถูกพุดถึงไว้ใน ThoughtWorks Technology Radar ด้วย) เพราะฉะนั้นไม่ว่าจะใช้ Framework หรือ Tools อะไร สร้าง Component ก็เอามาใช้ร่วมกันได้ อีกข้อนึงคือหลายๆครั้งเราไปเปลี่ยน Stack ใหญ่ของ Application ไม่ได้ การเปลี่ยนบางส่วนเป็น Components จะทำให้เราไม่วุ่นวายในการจัดการ Code ส่วนใหม่ๆที่เพิ่มขึ้นมา ไอเดีย Micro frontend นั้นเกิดจากมีคนไปเห็นว่าไอเดียของ Microservice บน Infra เนี่ยดีมากๆ และอยากที่จะเอามันมาใช้งานกับ Frontend บ้าง เลยทำให้มีการศึกษากันว่าถ้าต้องเอามาใช้บน Frontend จะต้องทำยังไง

เปลี่ยน วิธีการมอง “ของหนึ่งชิ้น”

ปกติแล้วเรามองงานหนึ่งชิ้นเราก็จะมีวิธีแตกต่างกันไป อาจจะมองว่าทั้ง product เป็นงานหนึ่ง้น หรือ มองว่า Backend, Frontend, เป็นงานหนึ่งชิ้น แต่มุมมองของ Microservice รวมไปถึง Micro frontend นั้นคือ เรามอง Feature เล็กๆหนึ่ง Feature เป็นงานหนึ่งชิ้น ทำงานแค่หนึ่งอย่างเท่านั้น ถ้ายังงงอยู่ลองดูรูปข้างล่างดูได้ครับ

อันนี้คือวิธีการมองงานหนึ่งชิ้น แบบต่างๆ
อันนี้คือการมองงานหนึ่งชิ้นของ micro frontend

ด้วยมุมมองแบบนี้แล้วมันเลยเป็นการขยายวิธีการคิดของ Microservice ยาวมาจนถึง Frontend ของแต่ละ Feature จริงๆ ในความเป็นจริงแล้วไอเดีย Micro Frontend อาจจะแยกง่ายๆด้วยการแบ่งเป็น Page หรือ แบ่งเป็น Component ใหญ่ๆก็เพียงพอแล้ว นั้นด้วยมุมมองนี้แล้วเวลาเราจะ Ship ของ เราอาจจะต้องมองไปถึง API ที่ Component นี้ต้องใช้ หรือ Database ที่ Components นี้ต้องใช้ด้วยเลย

แนวคิดพื้นฐาน

ผมอ้างอิงมาจาก https://micro-frontends.org/ เลยนะครับ

Be Technology Agnostic — แต่ละทีมควรมีอิสระในการเลือก framework ที่จะใช้ และสร้าง interface ที่ธรรมชาติที่สุดเพื่อให้คนอื่นมาเชื่อมต่อ อย่าง props หรือ event และต่างคนต่างเป็น dependencies กันน้อยที่สุด

Isolate Team Code — ไม่แชร์ code กัน code แต่ละทีมแยกกันอย่างชัดเจนแม้จะใช้ runtime เดียวกันก็ต้องแยก ออกจากกันให้ได้

Establish Team Prefixes — กำหนด prefix หรือ name space ต่างๆของแต่ละทีมเพื่อแยกออกไดัดเจนว่าส่วนไหนเป็นของใคร

Favor Native Browser Features over Custom APIs — พยายามใช้ html attribute และ native event เป็นหลัก แทนการสร้าง ระบบขึ้นมาใหม่ หรือ ใช้พวก tool อื่นๆที่จะกลายเป็น dependencies

Build a Resilient Site — ด้วยความที่ components จะถูกใช้หลายที่มากๆเพราะฉะนั้นแล้วถ้า components พังขึ้นมาเราควรเตรียม วิธีที่จะ handle เอาไว้ให้ดีเพื่อไม่ใช้เว็บทั้งเว็บพังในกรณีที่ component เกิดมีปัญหา

Web Components คือคำตอบ

การจะทำให้เกิด Micro frontend แบบนี้ได้ ในปัจจุบันมีไม่กี่วิธีเท่านั้น และที่วิธีที่เห็นชัดๆก็คือ Web Components เพราะเนื่องจาก ตัว Web Component เองเป็น native และใช้งานได้กับ browser ทุกตัว ( IE ก็มี Polyfill) มี tools สำหรับสร้างมากมายหรือเราจะสร้างเป็น native ก็ได้และปัจจุบันตัว framework อย่าง React , Vue, Angular ก็มีวิธี Compile Component เป็น Web Component แล้ว นั้นก็ไม่ต้องกังวลเรื่องการสร้าง Components จาก framework เลย เป็นเหตุผลที่ว่าถ้าเราต้องการจะ ship งานด้วย Micro frontend เราต้องปรับ Component ของเราทั้งหมดให้กลายเป็น Web component ก่อน

ถาพของ แนวคิด micro frontend จะเป็นประมาณนี้

สร้าง Component ยังไงได้บ้าง

เรามีตั้งแต่วิธี Native อย่างใช้ Feature CustomElement หรือ จะใช้ tools ที่สร้างออกมาเป็น Web Component เลยอย่าง Stencil.js, nutmeg,Lit-element หรือจะเอา vue.js,React, Angular มา Compile เป็น Web Component ก็แล้วแต่ถนัดเลย แต่อันนี้ต้องระวังไว้นิดนึงด้วยเพราะว่า การเอา Framework ใหญ่ๆมาสร้าง Component เราอาจจะต้องรอ Runtime ของแต่ละ Framework โหลดเสร็จก่อนมันถึงจะทำงานได้

อนาคตจะเป็นยังไง

ตอนนี้ยังตอบยากมากๆครับเรื่องอนาคตของ Micro frontend เพราะยังมีบางส่วนที่ implement ยากอยู่และ feature ของ Web Components เองยังไม่ควรเท่าไหร่ถ้าเทียบกับ Framework ต่างๆ และยังมีเรื่อง Routing ที่ยังไม่มี Routing ดีๆออกมา support การทำ Micro frontend ดีๆ ซึ่งเรายังอาจจะต้องพึ่งพา router ของ framework อื่นๆอยู่ แต่ด้วยทิศทางของ Web component ที่จะกลายเป็น Main stream มากขึ้น ก็อาจจะทำให้ในอนาคตเราเห็น Project ที่เป็น Micro frontend มากขึ้นไปด้วย รวมถึงแนวทางของ Micro frontend นั้นค่อนข้างเหมาะกับ Project ที่ยังใช้ Stack เก่าๆแต่ต้องการเปลี่ยนบางส่วนเป็น Web Component เพื่อง่ายต่อการ Maintain ในอนาคต มากๆ

บล็อกนี้เขียนเพื่อพาไปบล็อกต่อไป นั้นใครอยากอ่านเวอร์ชั่นละเอียด ไปอ่านได้ที่ https://micro-frontends.org ครับ

warat wongmaneekit

Written by

Co-Founder and Product Owner of ThothZocial, Google Developer Expert Web Technologies https://thangman22.com/