Dev to webs {Coding…}

เรียนรู้การพัฒนาซอฟเวอร์ เพื่อความรู้ที่ยั่งยืน

บทที่ 42: การพัฒนาแอปพลิเคชัน Vue.js ในลักษณะของ Micro-Frontend

1. Micro-Frontend คืออะไร?

Micro-Frontend เป็นแนวคิดที่ใช้แนวทางของ Microservices ในการพัฒนา Frontend โดยแยกแอปพลิเคชันขนาดใหญ่ออกเป็นส่วนย่อยที่ทำงานได้อิสระ แต่ละส่วนสามารถพัฒนาและปรับใช้ได้โดยทีมที่แยกกัน โดยไม่ต้องพึ่งพาส่วนอื่น

ข้อดีของ Micro-Frontend:

  • ความยืดหยุ่น: แต่ละทีมสามารถเลือกเทคโนโลยีที่เหมาะสมกับส่วนของตัวเอง
  • พัฒนาได้เร็วขึ้น: แต่ละส่วนสามารถพัฒนาและปรับใช้ได้โดยไม่ต้องรอส่วนอื่น
  • บำรุงรักษาง่าย: การเปลี่ยนแปลงในส่วนหนึ่งไม่ส่งผลกระทบต่อส่วนอื่น

2. แนวทางการออกแบบ Micro-Frontend

2.1 การแยกส่วนด้วย Page-Level

การแยกแอปพลิเคชันตามหน้าหรือฟีเจอร์ เช่น หน้า Dashboard, หน้า Settings

2.2 การแยกส่วนด้วย Component-Level

การแยกเป็น Component ย่อย เช่น Header, Footer, หรือ Widget ต่าง ๆ

3. การรวม Micro-Frontend

3.1 การใช้ Webpack Module Federation

Webpack Module Federation ช่วยให้แต่ละส่วนของ Micro-Frontend สามารถแชร์โมดูลหรือ Component ระหว่างกันได้

การตั้งค่าใน webpack.config.js:

สำหรับ Remote Application:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const { ModuleFederationPlugin } = require('webpack').container;
 
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'remoteApp',
      filename: 'remoteEntry.js',
      exposes: {
        './Header': './src/components/Header.vue'
      },
      shared: ['vue']
    })
  ]
};

สำหรับ Host Application:

1
2
3
4
5
6
7
8
9
10
11
12
13
const { ModuleFederationPlugin } = require('webpack').container;
 
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'hostApp',
      remotes: {
        remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js'
      },
      shared: ['vue']
    })
  ]
};

การใช้งานใน Host Application:

1
import Header from 'remoteApp/Header';

3.2 การใช้ iframe สำหรับการรวม

iframe เป็นวิธีที่ง่ายที่สุดในการรวม Micro-Frontend แต่มีข้อจำกัดในด้านการสื่อสารระหว่างส่วนต่าง ๆ

ตัวอย่างการใช้งาน iframe:

1
<iframe src="http://dashboard.example.com" width="100%" height="600px"></iframe>

4. การสื่อสารระหว่าง Micro-Frontend

4.1 การใช้ Event Bus

Event Bus เป็นวิธีที่ใช้สำหรับส่งข้อมูลระหว่าง Micro-Frontend

ตัวอย่างการสร้าง Event Bus:

1
2
3
4
5
6
7
8
import { createApp } from 'vue';
import mitt from 'mitt';
 
const emitter = mitt();
 
const app = createApp(App);
app.provide('emitter', emitter);
app.mount('#app');

การใช้งาน Event Bus:

ใน Sender Component:

1
2
const emitter = inject('emitter');
emitter.emit('eventName', payload);

ใน Receiver Component:

1
2
3
4
const emitter = inject('emitter');
emitter.on('eventName', (payload) => {
  console.log(payload);
});

4.2 การใช้ Shared State

สามารถใช้ Shared State เช่น Vuex หรือ Pinia ระหว่าง Micro-Frontend โดยตั้งค่า Store ที่ใช้ร่วมกัน

5. การ Deploy Micro-Frontend

5.1 การ Deploy แยกส่วน

แต่ละ Micro-Frontend ควรมี Pipeline การ Deploy ของตัวเอง เช่น การใช้ CI/CD

5.2 การตั้งค่า Reverse Proxy

Reverse Proxy เช่น Nginx สามารถช่วยรวมส่วนต่าง ๆ เข้าด้วยกัน

ตัวอย่างการตั้งค่า Nginx:

1
2
3
4
5
6
7
8
9
server {
  location /dashboard {
    proxy_pass http://localhost:3001;
  }
 
  location /settings {
    proxy_pass http://localhost:3002;
  }
}

6. ข้อควรระวังในการใช้ Micro-Frontend

  1. Overhead สูง: การแยกเป็นหลายส่วนอาจเพิ่มความซับซ้อนในการจัดการโครงสร้าง
  2. Performance: การโหลดหลายส่วนพร้อมกันอาจเพิ่มเวลาโหลด
  3. Consistency: ควรกำหนดมาตรฐานร่วมกัน เช่น การใช้ Design System เดียวกัน

7. สรุป

ในบทนี้ คุณได้เรียนรู้เกี่ยวกับการพัฒนาแอปพลิเคชัน Vue.js ในลักษณะของ Micro-Frontend รวมถึงวิธีการออกแบบ การรวม และการสื่อสารระหว่างส่วนต่าง ๆ แนวทางนี้ช่วยให้แอปพลิเคชันขนาดใหญ่มีความยืดหยุ่นและสามารถพัฒนาได้รวดเร็ว

ในบทถัดไป เราจะพูดถึงการพัฒนาแอปพลิเคชัน Vue.js ในระดับองค์กรพร้อมการจัดการ DevOps!