M

MLOG

বাংলা

ওয়েবপ্যাক ৫-এ জাভাস্ক্রিপ্ট মডিউল ফেডারেশনের মাধ্যমে মাইক্রো-ফ্রন্টএন্ডের শক্তি আনলক করুন। স্কেলেবল, রক্ষণাবেক্ষণযোগ্য এবং স্বাধীন ওয়েব অ্যাপ্লিকেশন তৈরি করতে শিখুন।

ওয়েবপ্যাক ৫ সহ জাভাস্ক্রিপ্ট মডিউল ফেডারেশন: মাইক্রো-ফ্রন্টএন্ডের জন্য একটি বিশদ নির্দেশিকা

ওয়েব ডেভেলপমেন্টের চির-পরিবর্তনশীল জগতে, বড় এবং জটিল অ্যাপ্লিকেশন তৈরি করা একটি কঠিন কাজ হতে পারে। প্রচলিত মনোলিথিক আর্কিটেকচার প্রায়শই ডেভেলপমেন্টের সময় বৃদ্ধি, ডেপ্লয়মেন্টে বাধা এবং কোডের গুণমান বজায় রাখার ক্ষেত্রে চ্যালেঞ্জের কারণ হয়। মাইক্রো-ফ্রন্টএন্ডগুলি এই চ্যালেঞ্জগুলো মোকাবেলা করার জন্য একটি শক্তিশালী আর্কিটেকচারাল প্যাটার্ন হিসাবে আবির্ভূত হয়েছে, যা দলগুলোকে একটি বৃহত্তর ওয়েব অ্যাপ্লিকেশনের স্বাধীন অংশগুলি তৈরি এবং ডেপ্লয় করার সুযোগ দেয়। মাইক্রো-ফ্রন্টএন্ড বাস্তবায়নের জন্য সবচেয়ে সম্ভাবনাময় প্রযুক্তিগুলির মধ্যে একটি হলো জাভাস্ক্রিপ্ট মডিউল ফেডারেশন, যা ওয়েবপ্যাক ৫-এ প্রথম পরিচিত করানো হয়।

মাইক্রো-ফ্রন্টএন্ড কী?

মাইক্রো-ফ্রন্টএন্ড একটি আর্কিটেকচারাল স্টাইল যেখানে একটি ফ্রন্টএন্ড অ্যাপকে ছোট, স্বাধীন ইউনিটে বিভক্ত করা হয়, যা বিভিন্ন দল দ্বারা স্বায়ত্তশাসিতভাবে ডেভেলপ, টেস্ট এবং ডেপ্লয় করা যায়। প্রতিটি মাইক্রো-ফ্রন্টএন্ড একটি নির্দিষ্ট ব্যবসায়িক ডোমেন বা বৈশিষ্ট্যের জন্য দায়ী থাকে, এবং সেগুলোকে রানটাইমে একত্রিত করে সম্পূর্ণ ইউজার ইন্টারফেস গঠন করা হয়।

এটিকে একটি কোম্পানির মতো ভাবুন: একটি বিশাল ডেভেলপমেন্ট টিমের পরিবর্তে, আপনার একাধিক ছোট দল রয়েছে যারা নির্দিষ্ট ক্ষেত্রে মনোযোগ দিচ্ছে। প্রতিটি দল স্বাধীনভাবে কাজ করতে পারে, যা দ্রুত ডেভেলপমেন্ট সাইকেল এবং সহজ রক্ষণাবেক্ষণের সুযোগ করে দেয়। অ্যামাজনের মতো একটি বড় ই-কমার্স প্ল্যাটফর্মের কথা ভাবুন; বিভিন্ন দল প্রোডাক্ট ক্যাটালগ, শপিং কার্ট, চেকআউট প্রক্রিয়া এবং ব্যবহারকারীর অ্যাকাউন্ট ম্যানেজমেন্ট পরিচালনা করতে পারে। এই সবগুলোই স্বাধীন মাইক্রো-ফ্রন্টএন্ড হতে পারে।

মাইক্রো-ফ্রন্টএন্ডের সুবিধাসমূহ:

মাইক্রো-ফ্রন্টএন্ডের চ্যালেঞ্জসমূহ:

জাভাস্ক্রিপ্ট মডিউল ফেডারেশন কী?

জাভাস্ক্রিপ্ট মডিউল ফেডারেশন হলো ওয়েবপ্যাক ৫-এর একটি বৈশিষ্ট্য যা আপনাকে রানটাইমে আলাদাভাবে কম্পাইল করা জাভাস্ক্রিপ্ট অ্যাপ্লিকেশনগুলির মধ্যে কোড শেয়ার করতে দেয়। এটি আপনাকে আপনার অ্যাপ্লিকেশনের অংশগুলিকে "মডিউল" হিসাবে প্রকাশ করতে সক্ষম করে যা অন্য অ্যাপ্লিকেশনগুলি ব্যবহার করতে পারে, npm-এর মতো কোনো কেন্দ্রীয় রিপোজিটরিতে প্রকাশ করার প্রয়োজন ছাড়াই।

মডিউল ফেডারেশনকে অ্যাপ্লিকেশনগুলির একটি ফেডারেটেড ইকোসিস্টেম তৈরি করার একটি উপায় হিসাবে ভাবুন, যেখানে প্রতিটি অ্যাপ্লিকেশন তার নিজস্ব কার্যকারিতা অবদান রাখতে পারে এবং অন্যান্য অ্যাপ্লিকেশন থেকে কার্যকারিতা গ্রহণ করতে পারে। এটি বিল্ড-টাইম নির্ভরতার প্রয়োজনীয়তা দূর করে এবং সত্যিকারের স্বাধীন ডেপ্লয়মেন্টের সুযোগ দেয়।

উদাহরণস্বরূপ, একটি ডিজাইন সিস্টেম টিম UI কম্পোনেন্টগুলিকে মডিউল হিসাবে প্রকাশ করতে পারে, এবং বিভিন্ন অ্যাপ্লিকেশন টিম এই কম্পোনেন্টগুলিকে সরাসরি ডিজাইন সিস্টেম অ্যাপ্লিকেশন থেকে ব্যবহার করতে পারে, সেগুলিকে npm প্যাকেজ হিসাবে ইনস্টল করার প্রয়োজন ছাড়াই। যখন ডিজাইন সিস্টেম টিম কম্পোনেন্টগুলি আপডেট করে, তখন পরিবর্তনগুলি স্বয়ংক্রিয়ভাবে সমস্ত ব্যবহারকারী অ্যাপ্লিকেশনগুলিতে প্রতিফলিত হয়।

মডিউল ফেডারেশনের মূল ধারণা:

ওয়েবপ্যাক ৫ দিয়ে মডিউল ফেডারেশন সেট আপ করা: একটি ব্যবহারিক নির্দেশিকা

চলুন ওয়েবপ্যাক ৫ দিয়ে মডিউল ফেডারেশন সেট আপ করার একটি ব্যবহারিক উদাহরণ দেখি। আমরা দুটি সহজ অ্যাপ্লিকেশন তৈরি করব: একটি হোস্ট (Host) অ্যাপ্লিকেশন এবং একটি রিমোট (Remote) অ্যাপ্লিকেশন। রিমোট অ্যাপ্লিকেশন একটি কম্পোনেন্ট এক্সপোজ করবে এবং হোস্ট অ্যাপ্লিকেশন সেটি ব্যবহার করবে।

১. প্রজেক্ট সেটআপ

আপনার অ্যাপ্লিকেশনগুলির জন্য দুটি পৃথক ডিরেক্টরি তৈরি করুন: `host` এবং `remote`।

```bash mkdir host remote cd host npm init -y npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev npm install react react-dom cd ../remote npm init -y npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev npm install react react-dom ```

২. রিমোট অ্যাপ্লিকেশন কনফিগারেশন

`remote` ডিরেক্টরিতে, নিম্নলিখিত ফাইলগুলি তৈরি করুন:

src/index.js:

```javascript import React from 'react'; import ReactDOM from 'react-dom/client'; import RemoteComponent from './RemoteComponent'; const App = () => (

Remote Application

); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ```

src/RemoteComponent.jsx:

```javascript import React from 'react'; const RemoteComponent = () => (

This is a Remote Component!

Rendered from the Remote Application.

); export default RemoteComponent; ```

webpack.config.js:

```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); const path = require('path'); module.exports = { entry: './src/index', mode: 'development', devServer: { port: 3001, static: { directory: path.join(__dirname, 'dist'), }, }, output: { publicPath: 'auto', }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react', '@babel/preset-env'], }, }, }, ], }, plugins: [ new ModuleFederationPlugin({ name: 'remote', filename: 'remoteEntry.js', exposes: { './RemoteComponent': './src/RemoteComponent', }, shared: { react: { singleton: true, eager: true }, 'react-dom': { singleton: true, eager: true }, }, }), new HtmlWebpackPlugin({ template: './public/index.html', }), ], resolve: { extensions: ['.js', '.jsx'], }, }; ```

`public/index.html` ফাইলটি বেসিক HTML স্ট্রাকচার দিয়ে তৈরি করুন। এখানে `

` থাকাটা জরুরি।

৩. হোস্ট অ্যাপ্লিকেশন কনফিগারেশন

`host` ডিরেক্টরিতে, নিম্নলিখিত ফাইলগুলি তৈরি করুন:

  • `src/index.js`: অ্যাপ্লিকেশনের জন্য এন্ট্রি পয়েন্ট।
  • `webpack.config.js`: ওয়েবপ্যাক কনফিগারেশন ফাইল।

src/index.js:

```javascript import React, { Suspense } from 'react'; import ReactDOM from 'react-dom/client'; const RemoteComponent = React.lazy(() => import('remote/RemoteComponent')); const App = () => (

Host Application

Loading Remote Component...
}>
); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ```

webpack.config.js:

```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); const path = require('path'); module.exports = { entry: './src/index', mode: 'development', devServer: { port: 3000, static: { directory: path.join(__dirname, 'dist'), }, }, output: { publicPath: 'auto', }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react', '@babel/preset-env'], }, }, }, ], }, plugins: [ new ModuleFederationPlugin({ name: 'host', remotes: { remote: 'remote@http://localhost:3001/remoteEntry.js', }, shared: { react: { singleton: true, eager: true }, 'react-dom': { singleton: true, eager: true }, }, }), new HtmlWebpackPlugin({ template: './public/index.html', }), ], resolve: { extensions: ['.js', '.jsx'], }, }; ```

`public/index.html` ফাইলটি বেসিক HTML স্ট্রাকচার দিয়ে তৈরি করুন (রিমোট অ্যাপের মতো)। এখানে `

` থাকাটা জরুরি।

৪. Babel ইনস্টল করুন

`host` এবং `remote` উভয় ডিরেক্টরিতে Babel এর নির্ভরতা ইনস্টল করুন:

```bash npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader ```

৫. অ্যাপ্লিকেশনগুলি চালান

`host` এবং `remote` উভয় ডিরেক্টরিতে, `package.json` ফাইলে নিম্নলিখিত স্ক্রিপ্টটি যোগ করুন:

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

এবার, উভয় অ্যাপ্লিকেশন শুরু করুন:

```bash cd remote npm start cd ../host npm start ```

আপনার ব্রাউজার খুলুন এবং `http://localhost:3000` এ যান। আপনি হোস্ট অ্যাপ্লিকেশনটি দেখতে পাবেন যার ভিতরে রিমোট কম্পোনেন্টটি রেন্ডার করা হয়েছে।

মূল কনফিগারেশন অপশনগুলির ব্যাখ্যা:

উন্নত মডিউল ফেডারেশন কৌশল

মডিউল ফেডারেশন অনেক উন্নত বৈশিষ্ট্য সরবরাহ করে যা আপনাকে আরও পরিশীলিত মাইক্রো-ফ্রন্টএন্ড আর্কিটেকচার তৈরি করতে সাহায্য করতে পারে।

ডাইনামিক রিমোট

ওয়েবপ্যাক কনফিগারেশনে রিমোট অ্যাপ্লিকেশনগুলির URL হার্ডকোড করার পরিবর্তে, আপনি সেগুলি রানটাইমে ডাইনামিকভাবে লোড করতে পারেন। এটি আপনাকে হোস্ট অ্যাপ্লিকেশনটি পুনরায় বিল্ড না করেই রিমোট অ্যাপ্লিকেশনগুলির অবস্থান সহজেই আপডেট করতে দেয়।

উদাহরণস্বরূপ, আপনি রিমোট অ্যাপ্লিকেশনগুলির URL একটি কনফিগারেশন ফাইল বা ডাটাবেসে সংরক্ষণ করতে পারেন এবং জাভাস্ক্রিপ্ট ব্যবহার করে সেগুলি ডাইনামিকভাবে লোড করতে পারেন।

```javascript // In webpack.config.js remotes: { remote: `promise new Promise(resolve => { const urlParams = new URLSearchParams(window.location.search); const remoteUrl = urlParams.get('remote'); // Assume remoteUrl is something like 'http://localhost:3001/remoteEntry.js' const script = document.createElement('script'); script.src = remoteUrl; script.onload = () => { // the key of module federation is that the remote app is // available using the name in the remote resolve(window.remote); }; document.head.appendChild(script); })`, }, ```

এখন আপনি হোস্ট অ্যাপটি একটি কোয়েরি প্যারামিটার `?remote=http://localhost:3001/remoteEntry.js` দিয়ে লোড করতে পারেন।

ভার্সনযুক্ত শেয়ার্ড মডিউল

মডিউল ফেডারেশন শেয়ার্ড মডিউলগুলির ভার্সনিং এবং ডিডুপ্লিকেশন স্বয়ংক্রিয়ভাবে পরিচালনা করতে পারে যাতে প্রতিটি মডিউলের শুধুমাত্র একটি সামঞ্জস্যপূর্ণ সংস্করণ লোড হয়। এটি বিশেষত বড় এবং জটিল অ্যাপ্লিকেশনগুলির ক্ষেত্রে গুরুত্বপূর্ণ যেগুলির অনেক নির্ভরতা রয়েছে।

আপনি ওয়েবপ্যাক কনফিগারেশনে প্রতিটি শেয়ার্ড মডিউলের ভার্সন রেঞ্জ নির্দিষ্ট করতে পারেন।

```javascript // In webpack.config.js shared: { react: { singleton: true, eager: true, requiredVersion: '^18.0.0' }, 'react-dom': { singleton: true, eager: true, requiredVersion: '^18.0.0' }, }, ```

কাস্টম মডিউল লোডার

মডিউল ফেডারেশন আপনাকে কাস্টম মডিউল লোডার সংজ্ঞায়িত করতে দেয় যা বিভিন্ন উৎস থেকে বা বিভিন্ন ফরম্যাটে মডিউল লোড করতে ব্যবহার করা যেতে পারে। এটি একটি CDN বা একটি কাস্টম মডিউল রেজিস্ট্রি থেকে মডিউল লোড করার জন্য দরকারী হতে পারে।

মাইক্রো-ফ্রন্টএন্ডের মধ্যে স্টেট শেয়ারিং

মাইক্রো-ফ্রন্টএন্ড আর্কিটেকচারের একটি চ্যালেঞ্জ হলো বিভিন্ন মাইক্রো-ফ্রন্টএন্ডের মধ্যে স্টেট শেয়ার করা। এই চ্যালেঞ্জ মোকাবেলা করার জন্য আপনি বেশ কয়েকটি পদ্ধতি গ্রহণ করতে পারেন:

মডিউল ফেডারেশন সহ মাইক্রো-ফ্রন্টএন্ড বাস্তবায়নের সেরা অনুশীলন

মডিউল ফেডারেশন সহ মাইক্রো-ফ্রন্টএন্ড বাস্তবায়ন করার সময় মনে রাখার জন্য এখানে কিছু সেরা অনুশীলন রয়েছে:

বাস্তব-বিশ্বে মডিউল ফেডারেশনের উদাহরণ

যদিও নির্দিষ্ট কেস স্টাডিগুলি প্রায়শই গোপনীয় হয়, এখানে কিছু সাধারণ পরিস্থিতি রয়েছে যেখানে মডিউল ফেডারেশন অবিশ্বাস্যভাবে কার্যকর হতে পারে:

উপসংহার

ওয়েবপ্যাক ৫-এ জাভাস্ক্রিপ্ট মডিউল ফেডারেশন মাইক্রো-ফ্রন্টএন্ড আর্কিটেকচার তৈরির একটি শক্তিশালী এবং নমনীয় উপায় সরবরাহ করে। এটি আপনাকে রানটাইমে আলাদাভাবে কম্পাইল করা জাভাস্ক্রিপ্ট অ্যাপ্লিকেশনগুলির মধ্যে কোড শেয়ার করতে দেয়, যা স্বাধীন ডেপ্লয়মেন্ট, প্রযুক্তিগত বৈচিত্র্য এবং উন্নত দলীয় স্বায়ত্তশাসন সক্ষম করে। এই নির্দেশিকায় বর্ণিত সেরা অনুশীলনগুলি অনুসরণ করে, আপনি স্কেলেবল, রক্ষণাবেক্ষণযোগ্য এবং উদ্ভাবনী ওয়েব অ্যাপ্লিকেশন তৈরি করতে মডিউল ফেডারেশনের সুবিধা নিতে পারেন।

ফ্রন্টএন্ড ডেভেলপমেন্টের ভবিষ্যৎ নিঃসন্দেহে মডুলার এবং ডিস্ট্রিবিউটেড আর্কিটেকচারের দিকে ঝুঁকছে। মডিউল ফেডারেশন এই আধুনিক সিস্টেমগুলি তৈরির জন্য একটি গুরুত্বপূর্ণ সরঞ্জাম সরবরাহ করে, যা দলগুলিকে আরও বেশি গতি, নমনীয়তা এবং স্থিতিস্থাপকতার সাথে জটিল অ্যাপ্লিকেশন তৈরি করতে সক্ষম করে। প্রযুক্তিটি পরিপক্ক হওয়ার সাথে সাথে আমরা আরও উদ্ভাবনী ব্যবহারের ক্ষেত্র এবং সেরা অনুশীলনগুলির উত্থান দেখতে পাব বলে আশা করতে পারি।