Вэб хөгжүүлэлтийн ертөнцөд сүүлийн үед хамгийн их яригдаж байгаа сэдэв бол Micro Frontend. Гэхдээ энэ нь зүгээр нэг тренд биш, харин том төслүүдийг толгойны өвчин болгохгүйгээр авч явах шилдэг шийдэл юм.
Баахан код, нэг том асуудал
Бид анх сурч байхдаа бүх кодоо нэг дор бичдэг. Үүнийг Monolith гэдэг. Жижиг төсөл дээр бол асуудалгүй. Гэхдээ төсөл чинь томорч, 10-20 хөгжүүлэгч зэрэг ажиллаад эхлэхээр нэг хүн Footer засахад нөгөө хүний Header эвдрэх аюултай болдог. Яг энэ үед Micro Frontend аврагч болж гарч ирнэ.
Энэ хоёр архитектурын ялгааг энгийнээр тайлбарлавал:
| Шинж чанар | Monolith (Нэг цул) | Micro Frontend (Жижиг хэсгүүд) |
| Бүтэц | Нэг том аппликейшн | Олон жижиг апп-уудын нэгдэл |
| Технологи | Зөвхөн нэг (жишээ нь: React) | Холимог (React, Vue, Angular) |
| Багийн ажил | Багууд бие биенээсээ хамааралтай | Баг бүр өөрийн хэсгээ бие дааж хариуцна |
| Deploy | Бүгдийг зэрэг шинэчилнэ | Зөвхөн зассан хэсгээ шинэчилнэ |
Яагаад заавал үүнийг сурах ёстой гэж вэ?
- Ажлын зах зээл: Netflix, Spotify, IKEA зэрэг том газрууд бүгд энэ рүү шилжсэн. Тэгэхээр ирээдүйд “Junior”-оос “Senior” руу үсрэхэд чинь энэ мэдлэг хамгийн их хэрэг болно.
- Эрх чөлөө: Чи React дээр ажиллах дуртай байтал өөр нэг баг Vue дээр ажилламаар байж болно. Micro Frontend-д энэ бол асуудал биш.
- Scalability: Вэбсайт чинь хэчнээн томорсон ч код нь замбараагүй болохгүй.
Зөвлөгөө: Мэдээж жижигхэн “To-do list” вэб дээр Micro Frontend ашиглах нь бууны сумаар ялаа буудахтай адил. Гэхдээ том систем яаж ажилладгийг одооноос ойлгох нь чиний карьерын хамгийн том хөрөнгө оруулалт байх болно.
Module Federation (Webpack 5)
Энэ бол орчин үеийн Micro Frontend-ийн хамгийн эрэлттэй технологи. Өмнө нь бид өөр өөр апп-уудыг нэгтгэхийн тулд заавал npm install хийж, кодыг нь татаж авдаг байсан. Харин Module Federation гарч ирснээр кодыг заавал суулгахгүйгээр, ажиллаж байх явцад (runtime) өөр вэбсайтаас шууд дуудаж ашиглах боломжтой болсон.
- Яаж ажилладаг вэ? Нэг вэбсайт нь “Host” (эзэн), нөгөөх нь “Remote” (зочин) болно. Жишээ нь, чиний үндсэн вэбсайт (Host) өөр нэг сервер дээр байгаа “Төлбөрийн хэсэг”-ийг (Remote) яг л өөрийнхөө код шиг шууд ажиллуулна.
- Давуу тал: Кодны хэмжээ маш бага байна. Учир нь бүх кодыг нэг дор багцлах (bundle) шаардлагагүй.
- Хэзээ ашиглах вэ? Хэрвээ танай баг бүгд React (эсвэл бүгд Vue) ашиглаж байгаа, гэхдээ кодоо салгаж хөгжүүлмээр байгаа үед хамгийн тохиромжтой.
Single-SPA
Хэрвээ Webpack 5-ыг “холбогч” гэж үзвэл, Single-SPA-г “зохион байгуулагч” гэж хэлж болно. Энэ нь өөр өөр фреймворк дээр бичигдсэн апп-уудыг нэг хуудас дээр зэрэг ажиллуулах боломжийг олгодог Meta-framework юм.
- Яаж ажилладаг вэ? Энэ нь апп бүрийг “Lifecycle” (bootstrap, mount, unmount) ашиглан удирддаг. Жишээ нь: Хэрэглэгч
/adminруу орвол Angular-ыг ачаална, харин/profileруу орвол React-ыг ажиллуулна гэх мэт. - Давуу тал: Маш уян хатан. Хуучин (Legacy) кодоо шинэ технологи руу аажмаар шилжүүлэхэд хамгийн шилдэг нь. (Жишээ нь: Хуучин Angular апп-аа устгалгүйгээр, шинэ хэсгүүдээ React дээр нэмээд явах).
- Хэзээ ашиглах вэ? Маш том системтэй, олон өөр технологийн багтай (React, Vue, Angular холилдсон) компаниудад тохиромжтой.
Дүгнэж хэлэхэд, Micro Frontend бол зөвхөн том багуудад зориулсан тренд биш, харин орчин үеийн вэб хөгжүүлэгчийн зайлшгүй мэдэх ёстой архитектурын сэтгэлгээ юм. Оюутан байхдаа Module Federation-ий хурд, эсвэл Single-SPA-ийн уян хатан байдлыг ойлгож авснаар зөвхөн код бичдэг “кодер” биш, системийн том дүр зургийг харж чаддаг “архитектор” болох эхлэлээ тавина. Юу ч хамаагүй нэг тогоонд хийдэг нүсэр (Monolith) бүтцээс татгалзаж, аппликейшнээ Лего тоглоом шиг жижиг, бие даасан хэсгүүдэд хувааж сурах нь чиний карьерыг дараагийн түвшинд гаргах хамгийн хүчирхэг зэвсэг болох болно.
