M

MLOG

Français

Découvrez la puissance des micro-frontends avec Module Federation de JavaScript dans Webpack 5. Apprenez à créer des applications web évolutives, maintenables et indépendantes.

Module Federation JavaScript avec Webpack 5 : Un guide complet sur les micro-frontends

Dans le paysage en constante évolution du développement web, la création d'applications vastes et complexes peut être une tâche intimidante. Les architectures monolithiques traditionnelles entraînent souvent une augmentation du temps de développement, des goulots d'étranglement au déploiement et des difficultés à maintenir la qualité du code. Les micro-frontends sont apparus comme un modèle architectural puissant pour relever ces défis, permettant aux équipes de créer et de déployer des parties indépendantes d'une application web plus grande. L'une des technologies les plus prometteuses pour la mise en œuvre de micro-frontends est Module Federation de JavaScript, introduit dans Webpack 5.

Que sont les micro-frontends ?

Les micro-frontends sont un style architectural où une application frontend est décomposée en unités plus petites et indépendantes, qui peuvent être développées, testées et déployées de manière autonome par différentes équipes. Chaque micro-frontend est responsable d'un domaine métier ou d'une fonctionnalité spécifique, et ils sont assemblés au moment de l'exécution pour former l'interface utilisateur complète.

Pensez-y comme à une entreprise : au lieu d'avoir une seule équipe de développement géante, vous avez plusieurs équipes plus petites se concentrant sur des domaines spécifiques. Chaque équipe peut travailler indépendamment, ce qui permet des cycles de développement plus rapides et une maintenance plus facile. Prenons l'exemple d'une grande plateforme de commerce électronique comme Amazon ; différentes équipes pourraient gérer le catalogue de produits, le panier d'achats, le processus de paiement et la gestion des comptes utilisateurs. Celles-ci pourraient toutes être des micro-frontends indépendants.

Avantages des micro-frontends :

Défis des micro-frontends :

Qu'est-ce que Module Federation de JavaScript ?

Module Federation de JavaScript est une fonctionnalité de Webpack 5 qui vous permet de partager du code entre des applications JavaScript compilées séparément au moment de l'exécution. Elle vous permet d'exposer des parties de votre application en tant que "modules" pouvant être consommés par d'autres applications, sans avoir besoin de les publier dans un dépôt central comme npm.

Considérez Module Federation comme un moyen de créer un écosystème fédéré d'applications, où chaque application peut apporter sa propre fonctionnalité et consommer la fonctionnalité d'autres applications. Cela élimine le besoin de dépendances au moment de la compilation et permet des déploiements véritablement indépendants.

Par exemple, une équipe de système de design peut exposer des composants d'interface utilisateur en tant que modules, et différentes équipes d'application peuvent consommer ces composants directement depuis l'application du système de design, sans avoir besoin de les installer en tant que paquets npm. Lorsque l'équipe du système de design met à jour les composants, les changements sont automatiquement répercutés dans toutes les applications consommatrices.

Concepts clés de Module Federation :

Mise en place de Module Federation avec Webpack 5 : Un guide pratique

Passons en revue un exemple pratique de mise en place de Module Federation avec Webpack 5. Nous allons créer deux applications simples : une application Hôte et une application Distante. L'application Distante exposera un composant, et l'application Hôte le consommera.

1. Configuration du projet

Créez deux répertoires distincts pour vos applications : `host` et `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 ```

2. Configuration de l'application distante

Dans le répertoire `remote`, créez les fichiers suivants :

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'], }, }; ```

Créez `public/index.html` avec une structure HTML de base. L'important est `

`

3. Configuration de l'application hôte

Dans le répertoire `host`, créez les fichiers suivants :

  • `src/index.js` : Point d'entrée de l'application.
  • `webpack.config.js` : Fichier de configuration Webpack.

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'], }, }; ```

Créez `public/index.html` avec une structure HTML de base (similaire à l'application distante). L'important est `

`

4. Installer Babel

Dans les deux répertoires `host` et `remote`, installez les dépendances de Babel :

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

5. Lancer les applications

Dans les deux répertoires `host` et `remote`, ajoutez le script suivant à `package.json` :

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

Maintenant, démarrez les deux applications :

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

Ouvrez votre navigateur et allez sur `http://localhost:3000`. Vous devriez voir l'application Hôte avec le composant Distant rendu à l'intérieur.

Explication des options de configuration clés :

Techniques avancées de Module Federation

Module Federation offre de nombreuses fonctionnalités avancées qui peuvent vous aider à construire des architectures de micro-frontend encore plus sophistiquées.

Remotes Dynamiques

Au lieu de coder en dur les URL des applications distantes dans la configuration de Webpack, vous pouvez les charger dynamiquement au moment de l'exécution. Cela vous permet de mettre à jour facilement l'emplacement des applications distantes sans avoir à reconstruire l'application hôte.

Par exemple, vous pourriez stocker les URL des applications distantes dans un fichier de configuration ou une base de données et les charger dynamiquement en utilisant JavaScript.

```javascript // Dans webpack.config.js remotes: { remote: `promise new Promise(resolve => { const urlParams = new URLSearchParams(window.location.search); const remoteUrl = urlParams.get('remote'); // Supposons que remoteUrl soit quelque chose comme 'http://localhost:3001/remoteEntry.js' const script = document.createElement('script'); script.src = remoteUrl; script.onload = () => { // la clé de la fédération de modules est que l'application distante est // disponible en utilisant le nom dans le remote resolve(window.remote); }; document.head.appendChild(script); })`, }, ```

Maintenant, vous pouvez charger l'application hôte avec un paramètre de requête `?remote=http://localhost:3001/remoteEntry.js`

Modules Partagés Versionnés

Module Federation peut gérer automatiquement le versionnage et la déduplication des modules partagés pour s'assurer qu'une seule version compatible de chaque module est chargée. C'est particulièrement important lorsque l'on traite des applications volumineuses et complexes qui ont de nombreuses dépendances.

Vous pouvez spécifier la plage de versions de chaque module partagé dans la configuration de Webpack.

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

Chargeurs de modules personnalisés

Module Federation vous permet de définir des chargeurs de modules personnalisés qui peuvent être utilisés pour charger des modules depuis différentes sources ou dans différents formats. Cela peut être utile pour charger des modules depuis un CDN ou un registre de modules personnalisé.

Partage de l'état entre les micro-frontends

L'un des défis des architectures de micro-frontend est le partage de l'état entre différents micro-frontends. Il existe plusieurs approches que vous pouvez adopter pour relever ce défi :

Meilleures pratiques pour la mise en œuvre de micro-frontends avec Module Federation

Voici quelques meilleures pratiques à garder à l'esprit lors de la mise en œuvre de micro-frontends avec Module Federation :

Exemples concrets de Module Federation en action

Bien que les études de cas spécifiques soient souvent confidentielles, voici quelques scénarios généralisés où Module Federation peut être incroyablement utile :

Conclusion

Module Federation de JavaScript dans Webpack 5 offre un moyen puissant et flexible de construire des architectures de micro-frontend. Il vous permet de partager du code entre des applications JavaScript compilées séparément au moment de l'exécution, permettant des déploiements indépendants, une diversité technologique et une autonomie accrue des équipes. En suivant les meilleures pratiques décrites dans ce guide, vous pouvez tirer parti de Module Federation pour construire des applications web évolutives, maintenables et innovantes.

L'avenir du développement frontend s'oriente sans aucun doute vers des architectures modulaires et distribuées. Module Federation fournit un outil crucial pour la construction de ces systèmes modernes, permettant aux équipes de créer des applications complexes avec une plus grande rapidité, flexibilité et résilience. À mesure que la technologie mûrit, nous pouvons nous attendre à voir émerger encore plus de cas d'utilisation innovants et de meilleures pratiques.