JavaScript Module Federation: Mikro-Frontend Arxitekturasi Bo'yicha To'liq Qo'llanma

Veb-dasturlashning doimiy rivojlanib borayotgan landshaftida katta va murakkab ilovalarni yaratish tezda qiyin vazifaga aylanishi mumkin. An'anaviy monolit arxitekturalar ko'pincha bir-biriga bog'liq bo'lgan kod bazalariga olib keladi, bu esa masshtablanuvchanlik, qo'llab-quvvatlanuvchanlik va mustaqil joylashtirishlarga to'sqinlik qiladi. Mikro-frontendlar ilovani kichikroq, mustaqil ravishda joylashtiriladigan birliklarga ajratib, jozibador alternativani taklif etadi. Turli xil mikro-frontend usullari orasida JavaScript Module Federation kuchli va nafis yechim sifatida ajralib turadi.

JavaScript Module Federation nima?

Webpack 5 tomonidan taqdim etilgan JavaScript Module Federation, JavaScript ilovalariga ish vaqtida kod va bog'liqliklarni dinamik ravishda almashish imkonini beradi. Qurilish vaqtidagi bog'liqliklarga tayanadigan an'anaviy kod almashish usullaridan farqli o'laroq, Module Federation ilovalarga boshqa ilovalardan kodni yuklash va ishga tushirish imkonini beradi, hatto ular turli texnologiyalar yoki bir xil kutubxonaning turli versiyalari bilan yaratilgan bo'lsa ham. Bu haqiqatan ham taqsimlangan va bir-biriga bog'liq bo'lmagan arxitekturani yaratadi.

Bir nechta jamoalar katta elektron tijorat veb-saytining turli bo'limlarida ishlayotgan vaziyatni tasavvur qiling. Bir jamoa mahsulotlar katalogi uchun, boshqasi xarid savatchasi uchun, uchinchisi esa foydalanuvchi autentifikatsiyasi uchun mas'ul bo'lishi mumkin. Module Federation yordamida har bir jamoa o'z mikro-frontendini boshqa jamoalar bilan ziddiyatlar yoki bog'liqliklar haqida qayg'urmasdan mustaqil ravishda ishlab chiqishi, qurishi va joylashtirishi mumkin. Asosiy ilova ("xost") keyin bu mikro-frontendlarni ("remotes") ish vaqtida dinamik ravishda yuklab, foydalanuvchi uchun uzluksiz tajriba yaratishi mumkin.

Module Federationning Asosiy Tushunchalari

• Xost (Host): Masofaviy modullarni iste'mol qiladigan va render qiladigan asosiy ilova.
• Masofaviy (Remote): Boshqa ilovalar tomonidan iste'mol qilinishi uchun modullarni taqdim etadigan mustaqil ilova.
• Umumiy Modullar (Shared Modules): Xost va masofaviy ilovalar o'rtasida bo'lishiladigan bog'liqliklar. Bu takrorlanishning oldini oladi va ilova bo'ylab versiyalarning bir xilligini ta'minlaydi.
• Module Federation Plagini: Module Federation funksionalligini yoqadigan Webpack plagini.

Module Federationning Afzalliklari

1. Mustaqil Joylashtirishlar

Har bir mikro-frontend ilovaning boshqa qismlariga ta'sir qilmasdan mustaqil ravishda joylashtirilishi mumkin. Bu tezroq reliz sikllarini, kamaytirilgan xavfni va orttirilgan chaqqonlikni ta'minlaydi. Berlindagi jamoa mahsulotlar katalogiga yangilanishlarni joylashtirishi mumkin, Tokiodagi xarid savatchasi jamoasi esa o'z xususiyatlari ustida mustaqil ishlashda davom etadi. Bu global taqsimlangan jamoalar uchun muhim afzallikdir.

2. Masshtablanuvchanlikning Oshishi

Ilovani har bir mikro-frontendni alohida serverlarda joylashtirish orqali gorizontal ravishda masshtablash mumkin. Bu resurslardan yaxshiroq foydalanish va ishlash samaradorligini oshirish imkonini beradi. Masalan, ko'pincha ishlash samaradorligida to'siq bo'ladigan autentifikatsiya xizmati eng yuqori yuklamalarni boshqarish uchun mustaqil ravishda masshtablanishi mumkin.

3. Qo'llab-quvvatlanuvchanlikning Yaxshilanishi

Mikro-frontendlar monolit ilovalarga qaraganda kichikroq va boshqarish osonroq bo'lib, ularni qo'llab-quvvatlash va disk raskadrovka qilishni osonlashtiradi. Har bir jamoa o'z kod bazasiga egalik qiladi, bu ularga o'zlarining maxsus sohalariga e'tibor qaratish imkonini beradi. To'lov shlyuzlariga ixtisoslashgan global jamoani tasavvur qiling; ular boshqa jamoalarga ta'sir qilmasdan o'sha maxsus mikro-frontendni qo'llab-quvvatlashlari mumkin.

4. Texnologiyadan Mustaqillik

Mikro-frontendlar turli texnologiyalar yoki freymvorklar yordamida qurilishi mumkin, bu jamoalarga ish uchun eng yaxshi vositalarni tanlash imkonini beradi. Bir mikro-frontend React bilan, boshqasi esa Vue.js yordamida qurilishi mumkin. Bu moslashuvchanlik eski ilovalarni integratsiya qilishda yoki turli jamoalarning turli xil afzalliklari yoki tajribalari bo'lganda ayniqsa foydalidir.

5. Kodning Qayta Ishlatilishi

Umumiy modullar bir nechta mikro-frontendlar bo'ylab qayta ishlatilishi mumkin, bu kod takrorlanishini kamaytiradi va izchillikni yaxshilaydi. Bu umumiy komponentlar, yordamchi funksiyalar yoki dizayn tizimlari uchun ayniqsa foydalidir. Barcha mikro-frontendlarda yagona brend tajribasini ta'minlaydigan global izchil dizayn tizimini tasavvur qiling.

Module Federationni Amalga Oshirish: Amaliy Misol

Keling, Webpack 5 yordamida Module Federationni qanday amalga oshirishning soddalashtirilgan misolini ko'rib chiqaylik. Biz ikkita ilova yaratamiz: bir xost ilovasi va bir masofaviy ilova. Masofaviy ilova xost ilovasi iste'mol qiladigan oddiy komponentni taqdim etadi.

1-qadam: Xost Ilovasini Sozlash

Xost ilovasi uchun yangi katalog yarating va yangi npm loyihasini ishga tushiring:

            mkdir host-app
cd host-app
npm init -y
            

              
                Copy
              
            
          

Webpack va uning bog'liqliklarini o'rnating:

            npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
            

              
                Copy
              
            
          

Xost ilovasining ildizida quyidagi konfiguratsiyaga ega `webpack.config.js` faylini yarating:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
 mode: 'development',
 devtool: 'source-map',
 entry: './src/index.js',
 output: {
 path: path.resolve(__dirname, 'dist'),
 filename: 'bundle.js',
 publicPath: 'http://localhost:3000/', // Module Federation uchun muhim
 },
 devServer: {
 port: 3000,
 hot: true,
 historyApiFallback: true,
 },
 module: {
 rules: [
 {
 test: /\.js$/, // JSX ni o'z ichiga olish uchun regex yangilandi
 exclude: /node_modules/,
 use: {
 loader: 'babel-loader',
 options: {
 presets: ['@babel/preset-env', '@babel/preset-react'] // react preseti qo'shildi
 }
 }
 },
 {
 test: /\.css$/i,
 use: ["style-loader", "css-loader"],
 },
 ],
 },
 plugins: [
 new ModuleFederationPlugin({
 name: 'host',
 remotes: {
 remoteApp: 'remote@http://localhost:3001/remoteEntry.js', // Masofaviy kirishga ishora qilmoqda
 },
 shared: ['react', 'react-dom'], // reactni bo'lishish
 }),
 new HtmlWebpackPlugin({
 template: './public/index.html',
 }),
 ],
};

            

              
                Copy
              
            
          

Ushbu konfiguratsiya kirish nuqtasi, chiqish katalogi, ishlab chiqish serveri sozlamalari va Module Federation plaginini belgilaydi. `remotes` xususiyati masofaviy ilovaning `remoteEntry.js` faylining joylashuvini belgilaydi. `shared` xususiyati xost va masofaviy ilovalar o'rtasida bo'lishiladigan modullarni belgilaydi. Bu misolda biz 'react' va 'react-dom'ni bo'lishmoqdamiz.

`public` katalogida `index.html` faylini yarating:

            <!DOCTYPE html>
<html>
<head>
 <title>Xost Ilovasi</title>
</head>
<body>
 <div id="root"></div>
<script src="/bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

`src` katalogini va uning ichida `index.js` faylini yarating. Ushbu fayl masofaviy komponentni yuklaydi va uni xost ilovasida render qiladi:

            import React from 'react';
import ReactDOM from 'react-dom/client';

import RemoteComponent from 'remoteApp/RemoteComponent';

const App = () => (
 <div>
 <h1>Xost Ilovasi</h1>
 <p>Bu xost ilovasi masofaviy komponentni iste'mol qilmoqda.</p>
 <RemoteComponent />
 </div>
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);

            

              
                Copy
              
            
          

Babel-loader va uning presetlarini o'rnating

            npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react style-loader css-loader
            

              
                Copy
              
            
          

2-qadam: Masofaviy Ilovani Sozlash

Masofaviy ilova uchun yangi katalog yarating va yangi npm loyihasini ishga tushiring:

            mkdir remote-app
cd remote-app
npm init -y
            

              
                Copy
              
            
          

Webpack va uning bog'liqliklarini o'rnating:

            npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
            

              
                Copy
              
            
          

Masofaviy ilovaning ildizida quyidagi konfiguratsiyaga ega `webpack.config.js` faylini yarating:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
 mode: 'development',
 devtool: 'source-map',
 entry: './src/index.js',
 output: {
 path: path.resolve(__dirname, 'dist'),
 filename: 'bundle.js',
 publicPath: 'http://localhost:3001/', // Module Federation uchun muhim
 },
 devServer: {
 port: 3001,
 hot: true,
 historyApiFallback: true,
 },
 module: {
 rules: [
 {
 test: /\.js$/, // JSX ni o'z ichiga olish uchun regex yangilandi
 exclude: /node_modules/,
 use: {
 loader: 'babel-loader',
 options: {
 presets: ['@babel/preset-env', '@babel/preset-react']
 }
 }
 },
 {
 test: /\.css$/i,
 use: ["style-loader", "css-loader"],
 },
 ],
 },
 plugins: [
 new ModuleFederationPlugin({
 name: 'remote',
 filename: 'remoteEntry.js',
 exposes: {
 './RemoteComponent': './src/RemoteComponent.js', // Komponentni taqdim etish
 },
 shared: ['react', 'react-dom'], // reactni bo'lishish
 }),
 new HtmlWebpackPlugin({
 template: './public/index.html',
 }),
 ],
};

            

              
                Copy
              
            
          

Ushbu konfiguratsiya xost ilovasiga o'xshaydi, ammo bir nechta asosiy farqlarga ega. `name` xususiyati `remote` ga o'rnatilgan va `exposes` xususiyati boshqa ilovalarga taqdim etiladigan modullarni belgilaydi. Bu holda, biz `RemoteComponent`ni taqdim etmoqdamiz.

`public` katalogida `index.html` faylini yarating:

            <!DOCTYPE html>
<html>
<head>
 <title>Masofaviy Ilova</title>
</head>
<body>
 <div id="root"></div>
<script src="/bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

`src` katalogini va uning ichida `RemoteComponent.js` faylini yarating. Ushbu fayl xost ilovasiga taqdim etiladigan komponentni o'z ichiga oladi:

            import React from 'react';

const RemoteComponent = () => (
 <div style={{ border: '2px solid red', padding: '10px', margin: '10px' }}>
 <h2>Masofaviy Komponent</h2>
 <p>Bu komponent masofaviy ilovadan yuklangan.</p>
 </div>
);

export default RemoteComponent;

            

              
                Copy
              
            
          

`src` katalogini va uning ichida `index.js` faylini yarating. Ushbu fayl masofaviy ilova mustaqil ravishda ishga tushirilganda `RemoteComponent`ni render qiladi (ixtiyoriy):

            import React from 'react';
import ReactDOM from 'react-dom/client';
import RemoteComponent from './RemoteComponent';

const App = () => (
 <div>
 <h1>Masofaviy Ilova</h1>
 <RemoteComponent />
 </div>
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);

            

              
                Copy
              
            
          

3-qadam: Ilovalarni Ishga Tushirish

Ikkala `package.json` fayliga ham start skriptlarini qo'shing:

            "scripts": {
 "start": "webpack serve"
}
            

              
                Copy
              
            
          

Ikkala ilovani ham `npm start` yordamida ishga tushiring. Brauzeringizni oching va `http://localhost:3000` ga o'ting. Siz masofaviy komponentni render qilayotgan xost ilovasini ko'rishingiz kerak. Masofaviy komponentning atrofida qizil chegara bo'ladi, bu uning masofaviy ilovadan yuklanganligini bildiradi.

Ilg'or Tushunchalar va Mulohazalar

1. Versiyalash va Moslik

Mikro-frontendlar o'rtasida bog'liqliklarni bo'lishishda versiyalash va moslikni hisobga olish muhimdir. Module Federation versiya diapazonlarini belgilash va ziddiyatlarni hal qilish uchun mexanizmlarni taqdim etadi. Semantik versiyalash (semver) kabi vositalar bog'liqliklarni boshqarishda va turli mikro-frontendlar o'rtasida moslikni ta'minlashda hal qiluvchi ahamiyatga ega bo'ladi. Versiyalashni to'g'ri boshqarmaslik, ayniqsa ko'plab mikro-frontendlarga ega murakkab tizimlarda ish vaqtida xatoliklarga yoki kutilmagan xatti-harakatlarga olib kelishi mumkin.

2. Autentifikatsiya va Avtorizatsiya

Mikro-frontend arxitekturasida autentifikatsiya va avtorizatsiyani amalga oshirish ehtiyotkorlik bilan rejalashtirishni talab qiladi. Umumiy yondashuvlar orasida umumiy autentifikatsiya xizmatidan foydalanish yoki tokenga asoslangan autentifikatsiyani amalga oshirish mavjud. Xavfsizlik eng muhim masala bo'lib, maxfiy ma'lumotlarni himoya qilish uchun eng yaxshi amaliyotlarga rioya qilish juda muhimdir. Masalan, elektron tijorat platformasi boshqa mikro-frontendlarga kirish huquqini berishdan oldin foydalanuvchi ma'lumotlarini tekshirish uchun mas'ul bo'lgan maxsus autentifikatsiya mikro-frontendiga ega bo'lishi mumkin.

3. Mikro-frontendlar O'rtasidagi Aloqa

Mikro-frontendlar ko'pincha ma'lumot almashish yoki harakatlarni ishga tushirish uchun bir-biri bilan aloqa qilishlari kerak. Voqealar, umumiy holatni boshqarish yoki to'g'ridan-to'g'ri API chaqiruvlari kabi turli xil aloqa naqshlaridan foydalanish mumkin. To'g'ri aloqa naqshini tanlash ilovaning o'ziga xos talablariga bog'liq. Redux yoki Vuex kabi vositalardan umumiy holatni boshqarish uchun foydalanish mumkin. Maxsus voqealar bo'sh bog'lanish va asinxron aloqa uchun ishlatilishi mumkin. API chaqiruvlari esa murakkabroq o'zaro ta'sirlar uchun ishlatilishi mumkin.

4. Ishlash Samaradorligini Optimallashtirish

Masofaviy modullarni yuklash ishlash samaradorligiga ta'sir qilishi mumkin, ayniqsa modullar katta bo'lsa yoki tarmoq ulanishi sekin bo'lsa. Modullarning hajmini optimallashtirish, kodni bo'lishdan foydalanish va masofaviy modullarni keshlash ishlash samaradorligini oshirishi mumkin. Dangasa yuklash (lazy loading) modullarni faqat kerak bo'lganda yuklash yana bir muhim optimallashtirish usulidir. Shuningdek, Kontent Yetkazib Berish Tarmog'idan (CDN) foydalanib, masofaviy modullarni oxirgi foydalanuvchilarga geografik jihatdan yaqinroq joylardan yetkazib berishni ko'rib chiqing, bu esa kechikishni kamaytiradi.

5. Mikro-frontendlarni Sinovdan O'tkazish

Mikro-frontendlarni sinovdan o'tkazish monolit ilovalarni sinovdan o'tkazishdan farqli yondashuvni talab qiladi. Har bir mikro-frontend mustaqil ravishda, shuningdek, boshqa mikro-frontendlar bilan integratsiyada sinovdan o'tkazilishi kerak. Kontrakt sinovidan foydalanish mikro-frontendlarning bir-biriga mos kelishini ta'minlash uchun ishlatilishi mumkin. Birlik testlari, integratsiya testlari va uchdan-uchgacha testlar mikro-frontend arxitekturasining sifatini ta'minlash uchun muhimdir.

6. Xatoliklarni Boshqarish va Monitoring

Mikro-frontend arxitekturasida muammolarni aniqlash va hal qilish uchun mustahkam xatoliklarni boshqarish va monitoringni amalga oshirish juda muhimdir. Markazlashtirilgan jurnal yuritish va monitoring tizimlari ilovaning sog'lig'i va ishlash samaradorligi haqida tushuncha berishi mumkin. Sentry yoki New Relic kabi vositalardan turli mikro-frontendlardagi xatolar va ishlash ko'rsatkichlarini kuzatish uchun foydalanish mumkin. Yaxshi ishlab chiqilgan xatoliklarni boshqarish strategiyasi kaskadli nosozliklarning oldini oladi va foydalanuvchiga barqaror tajriba taqdim etadi.

Module Federation uchun Foydalanish Holatlari

Module Federation turli xil foydalanish holatlari uchun juda mos keladi, jumladan:

• Katta Elektron Tijorat Platformalari: Veb-saytni mahsulotlar katalogi, xarid savatchasi, foydalanuvchi autentifikatsiyasi va to'lov uchun kichikroq, mustaqil joylashtiriladigan birliklarga ajratish.
• Korporativ Ilovalar: Turli bo'limlar uchun mas'ul bo'lgan turli jamoalar bilan murakkab boshqaruv panellari va portallarni qurish.
• Kontent Boshqarish Tizimlari (CMS): Dasturchilarga maxsus modullar yoki plaginlarni mustaqil ravishda yaratish va joylashtirish imkonini berish.
• Mikroservislar Arxitekturalari: Front-end ilovalarini mikroservislar backend'lari bilan integratsiya qilish.
• Progressiv Veb Ilovalar (PWA): PWA-da xususiyatlarni dinamik ravishda yuklash va yangilash.

Misol uchun, ko'p millatli bank ilovasini ko'rib chiqaylik. Module federation yordamida asosiy bank xususiyatlari, investitsiya platformasi va mijozlarni qo'llab-quvvatlash portali mustaqil ravishda ishlab chiqilishi va joylashtirilishi mumkin. Bu ixtisoslashgan jamoalarga barcha xizmatlar bo'ylab yagona va izchil foydalanuvchi tajribasini ta'minlagan holda muayyan sohalarga e'tibor qaratish imkonini beradi.

Module Federationga Alternativalar

Module Federation mikro-frontend arxitekturalari uchun jozibador yechim taklif qilsa-da, bu yagona variant emas. Boshqa mashhur usullarga quyidagilar kiradi:

• iFrames: Bir ilovani boshqasining ichiga joylashtiradigan oddiy, lekin ko'pincha kamroq moslashuvchan yondashuv.
• Veb Komponentlar: Turli ilovalar bo'ylab ishlatilishi mumkin bo'lgan qayta ishlatiladigan maxsus HTML elementlari.
• Single-SPA: Bir nechta freymvorklar bilan bir sahifali ilovalarni yaratish uchun freymvork.
• Qurilish vaqtidagi integratsiya: Qurilish jarayonida barcha mikro-frontendlarni bitta ilovaga birlashtirish.

Har bir texnikaning o'z afzalliklari va kamchiliklari bor va eng yaxshi tanlov ilovaning o'ziga xos talablariga bog'liq. Module Federation o'zining ish vaqtidagi moslashuvchanligi va barcha ilovalarni to'liq qayta qurish va qayta joylashtirishni talab qilmasdan kodni dinamik ravishda bo'lishish qobiliyati bilan ajralib turadi.

Xulosa

JavaScript Module Federation masshtablanuvchan, qo'llab-quvvatlanadigan va mustaqil mikro-frontend arxitekturalarini yaratish uchun kuchli texnikadir. U mustaqil joylashtirishlar, oshirilgan masshtablanuvchanlik, yaxshilangan qo'llab-quvvatlanuvchanlik, texnologiyadan mustaqillik va kodni qayta ishlatish kabi ko'plab afzalliklarni taklif etadi. Asosiy tushunchalarni tushunib, amaliy misollarni amalga oshirib va ilg'or tushunchalarni hisobga olgan holda, dasturchilar mustahkam va moslashuvchan veb-ilovalarni yaratish uchun Module Federationdan foydalanishlari mumkin. Veb-ilovalarning murakkabligi o'sishda davom etar ekan, Module Federation bu murakkablikni boshqarish va jamoalarga yanada samaraliroq ishlash imkonini beruvchi qimmatli vositani taqdim etadi.

JavaScript Module Federation bilan markazlashtirilmagan veb-dasturlash kuchini qabul qiling va haqiqatan ham modulli va masshtablanuvchan ilovalarni yaratish imkoniyatini oching. Elektron tijorat platformasi, korporativ ilova yoki CMS yaratayotgan bo'lsangiz ham, Module Federation ilovani kichikroq, boshqariladigan birliklarga ajratishga va foydalanuvchiga yaxshiroq tajriba taqdim etishga yordam beradi.