M

MLOG

मराठी

वेबपॅक ५ मधील जावास्क्रिप्ट मॉड्यूल फेडरेशनसह मायक्रो-फ्रंटएंड्सची शक्ती अनलॉक करा. स्केलेबल, देखरेख करण्यायोग्य आणि स्वतंत्र वेब ॲप्लिकेशन्स कसे तयार करायचे ते शिका.

वेबपॅक ५ सह जावास्क्रिप्ट मॉड्यूल फेडरेशन: मायक्रो-फ्रंटएंडसाठी एक सर्वसमावेशक मार्गदर्शक

वेब डेव्हलपमेंटच्या सतत बदलत्या जगात, मोठे आणि गुंतागुंतीचे ॲप्लिकेशन्स तयार करणे हे एक आव्हानात्मक काम असू शकते. पारंपारिक मोनोलिथिक आर्किटेक्चर्समुळे अनेकदा डेव्हलपमेंटचा वेळ वाढतो, डिप्लॉयमेंटमध्ये अडथळे येतात आणि कोडची गुणवत्ता राखण्यात आव्हाने येतात. या आव्हानांना तोंड देण्यासाठी मायक्रो-फ्रंटएंड्स एक शक्तिशाली आर्किटेक्चरल पॅटर्न म्हणून उदयास आले आहेत, ज्यामुळे टीम्सना मोठ्या वेब ॲप्लिकेशनचे स्वतंत्र भाग तयार करून ते तैनात (deploy) करण्याची परवानगी मिळते. मायक्रो-फ्रंटएंड्स लागू करण्यासाठी सर्वात आश्वासक तंत्रज्ञानांपैकी एक म्हणजे जावास्क्रिप्ट मॉड्यूल फेडरेशन, जे वेबपॅक ५ मध्ये सादर केले गेले आहे.

मायक्रो-फ्रंटएंड्स म्हणजे काय?

मायक्रो-फ्रंटएंड्स ही एक आर्किटेक्चरल शैली आहे जिथे फ्रंटएंड ॲपला लहान, स्वतंत्र युनिट्समध्ये विभागले जाते, जे वेगवेगळ्या टीम्सद्वारे स्वायत्तपणे विकसित (develop), चाचणी (test) आणि तैनात (deploy) केले जाऊ शकतात. प्रत्येक मायक्रो-फ्रंटएंड एका विशिष्ट व्यवसाय डोमेन किंवा वैशिष्ट्यासाठी जबाबदार असतो आणि ते रनटाइमवेळी एकत्र येऊन संपूर्ण यूजर इंटरफेस तयार करतात.

याची कल्पना एका कंपनीप्रमाणे करा: एका मोठ्या डेव्हलपमेंट टीमऐवजी, तुमच्याकडे विशिष्ट क्षेत्रांवर लक्ष केंद्रित करणाऱ्या अनेक लहान टीम्स आहेत. प्रत्येक टीम स्वतंत्रपणे काम करू शकते, ज्यामुळे डेव्हलपमेंट जलद होते आणि देखभाल करणे सोपे होते. ॲमेझॉनसारख्या मोठ्या ई-कॉमर्स प्लॅटफॉर्मचा विचार करा; वेगवेगळ्या टीम्स कदाचित उत्पादन कॅटलॉग, शॉपिंग कार्ट, चेकआउट प्रक्रिया आणि वापरकर्ता खाते व्यवस्थापन सांभाळत असतील. हे सर्व स्वतंत्र मायक्रो-फ्रंटएंड्स असू शकतात.

मायक्रो-फ्रंटएंड्सचे फायदे:

मायक्रो-फ्रंटएंड्सची आव्हाने:

जावास्क्रिप्ट मॉड्यूल फेडरेशन म्हणजे काय?

जावास्क्रिप्ट मॉड्यूल फेडरेशन हे वेबपॅक ५ चे एक वैशिष्ट्य आहे जे तुम्हाला स्वतंत्रपणे संकलित (compiled) केलेल्या जावास्क्रिप्ट ॲप्लिकेशन्समध्ये रनटाइमवेळी कोड शेअर करण्याची परवानगी देते. हे तुम्हाला तुमच्या ॲप्लिकेशनचे काही भाग "मॉड्यूल्स" म्हणून एक्सपोज करण्यास सक्षम करते, जे इतर ॲप्लिकेशन्सद्वारे वापरले जाऊ शकतात, यासाठी npm सारख्या केंद्रीय रेपॉजिटरीमध्ये प्रकाशित करण्याची आवश्यकता नसते.

मॉड्यूल फेडरेशनला ॲप्लिकेशन्सची एक संघटित इकोसिस्टम तयार करण्याचा एक मार्ग समजा, जिथे प्रत्येक ॲप्लिकेशन स्वतःची कार्यक्षमता देऊ शकतो आणि इतर ॲप्लिकेशन्सकडून कार्यक्षमता वापरू शकतो. यामुळे बिल्ड-टाइम अवलंबित्व (dependencies) दूर होते आणि खऱ्या अर्थाने स्वतंत्र डिप्लॉयमेंट्स शक्य होतात.

उदाहरणार्थ, डिझाइन सिस्टम टीम 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` दोन्ही डिरेक्टरीजमध्ये, बॅबेल अवलंबित्व (dependencies) इंस्टॉल करा:

```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` वर नेव्हिगेट करा. तुम्हाला होस्ट ॲप्लिकेशन दिसेल ज्यामध्ये रिमोट कंपोनेंट रेंडर झालेला असेल.

मुख्य कॉन्फिगरेशन पर्यायांचे स्पष्टीकरण:

ॲडव्हान्स्ड मॉड्यूल फेडरेशन टेक्निक्स

मॉड्यूल फेडरेशन अनेक प्रगत वैशिष्ट्ये देते जे तुम्हाला आणखी अत्याधुनिक मायक्रो-फ्रंटएंड आर्किटेक्चर्स तयार करण्यास मदत करू शकतात.

डायनॅमिक रिमोट्स

वेबपॅक कॉन्फिगरेशनमध्ये रिमोट ॲप्लिकेशन्सचे URLs हार्डकोड करण्याऐवजी, तुम्ही ते रनटाइमवेळी डायनॅमिकरित्या लोड करू शकता. यामुळे तुम्हाला होस्ट ॲप्लिकेशन पुन्हा बिल्ड न करता रिमोट ॲप्लिकेशन्सचे स्थान सहजपणे अपडेट करण्याची परवानगी मिळते.

उदाहरणार्थ, तुम्ही रिमोट ॲप्लिकेशन्सचे URLs एका कॉन्फिगरेशन फाइलमध्ये किंवा डेटाबेसमध्ये संग्रहित करू शकता आणि जावास्क्रिप्ट वापरून ते डायनॅमिकरित्या लोड करू शकता.

```javascript // In webpack.config.js remotes: { remote: `promise new Promise(resolve => { const urlParams = new URLSearchParams(window.location.search); const remoteUrl = urlParams.get('remote'); // समजा remoteUrl 'http://localhost:3001/remoteEntry.js' असे काहीतरी आहे const script = document.createElement('script'); script.src = remoteUrl; script.onload = () => { // मॉड्यूल फेडरेशनची मुख्य गोष्ट अशी आहे की रिमोट ॲप // रिमोटमधील नावाने उपलब्ध असतो resolve(window.remote); }; document.head.appendChild(script); })`, }, ```

आता तुम्ही `?remote=http://localhost:3001/remoteEntry.js` या क्वेरी पॅरामीटरसह होस्ट ॲप लोड करू शकता.

व्हर्जन केलेले शेअर्ड मॉड्यूल्स

मॉड्यूल फेडरेशन शेअर केलेल्या मॉड्यूल्सची व्हर्जनिंग आणि डुप्लिकेशन आपोआप हाताळू शकते जेणेकरून प्रत्येक मॉड्यूलची फक्त एकच सुसंगत आवृत्ती लोड होईल. हे विशेषतः मोठ्या आणि गुंतागुंतीच्या ॲप्लिकेशन्ससाठी महत्त्वाचे आहे ज्यात अनेक अवलंबित्व (dependencies) असतात.

तुम्ही वेबपॅक कॉन्फिगरेशनमध्ये प्रत्येक शेअर केलेल्या मॉड्यूलची व्हर्जन रेंज निर्दिष्ट करू शकता.

```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 किंवा कस्टम मॉड्यूल रजिस्ट्रीमधून मॉड्यूल्स लोड करण्यासाठी उपयुक्त ठरू शकते.

मायक्रो-फ्रंटएंड्समध्ये स्टेट शेअर करणे

मायक्रो-फ्रंटएंड आर्किटेक्चर्सच्या आव्हानांपैकी एक म्हणजे वेगवेगळ्या मायक्रो-फ्रंटएंड्समध्ये स्टेट शेअर करणे. या आव्हानाला सामोरे जाण्यासाठी तुम्ही अनेक दृष्टिकोन वापरू शकता:

मॉड्यूल फेडरेशनसह मायक्रो-फ्रंटएंड्स लागू करण्यासाठी सर्वोत्तम पद्धती

मॉड्यूल फेडरेशनसह मायक्रो-फ्रंटएंड्स लागू करताना लक्षात ठेवण्यासाठी येथे काही सर्वोत्तम पद्धती आहेत:

मॉड्यूल फेडरेशनच्या प्रत्यक्ष वापराची उदाहरणे

विशिष्ट केस स्टडीज अनेकदा गोपनीय असल्या तरी, येथे काही सामान्य परिस्थिती आहेत जिथे मॉड्यूल फेडरेशन अत्यंत उपयुक्त ठरू शकते:

निष्कर्ष

वेबपॅक ५ मधील जावास्क्रिप्ट मॉड्यूल फेडरेशन मायक्रो-फ्रंटएंड आर्किटेक्चर्स तयार करण्याचा एक शक्तिशाली आणि लवचिक मार्ग प्रदान करते. हे तुम्हाला स्वतंत्रपणे संकलित केलेल्या जावास्क्रिप्ट ॲप्लिकेशन्समध्ये रनटाइमवेळी कोड शेअर करण्याची परवानगी देते, ज्यामुळे स्वतंत्र डिप्लॉयमेंट्स, तंत्रज्ञान विविधता आणि सुधारित टीम स्वायत्तता शक्य होते. या मार्गदर्शकामध्ये दिलेल्या सर्वोत्तम पद्धतींचे पालन करून, तुम्ही स्केलेबल, देखरेख करण्यायोग्य आणि नाविन्यपूर्ण वेब ॲप्लिकेशन्स तयार करण्यासाठी मॉड्यूल फेडरेशनचा फायदा घेऊ शकता.

फ्रंटएंड डेव्हलपमेंटचे भविष्य निःसंशयपणे मॉड्युलर आणि डिस्ट्रिब्युटेड आर्किटेक्चर्सकडे झुकत आहे. मॉड्यूल फेडरेशन या आधुनिक सिस्टम्स तयार करण्यासाठी एक महत्त्वपूर्ण साधन प्रदान करते, ज्यामुळे टीम्सना अधिक गती, लवचिकता आणि लवचिकतेसह गुंतागुंतीचे ॲप्लिकेशन्स तयार करता येतात. जसजसे हे तंत्रज्ञान परिपक्व होईल, तसतसे आपण आणखी नाविन्यपूर्ण वापर प्रकरणे आणि सर्वोत्तम पद्धती उदयास येण्याची अपेक्षा करू शकतो.