Ces dernières années, le concept de microservices a acquis une immense popularité dans le monde du développement de logiciels. Maintenant, il y a un nouveau venu dans le quartier qui rattrape rapidement son retard : le micro-frontend. C’est une technique qui vous permet de créer et de déployer de petits composants réutilisables qui fonctionnent ensemble pour construire une application plus grande.
L’un des frameworks frontaux les plus populaires aujourd’hui est Vue. Vue est un framework progressif qui vous permet de créer des interfaces utilisateur et des composants réutilisables. Dans cet article, nous verrons comment créer des micro-frontends à l’aide de Vue et de composants réutilisables, ainsi que des différences entre le développement d’applications normal et l’approche micro-frontend.
Qu’est-ce qu’une micro-interface ?
Avant de plonger dans le vif du sujet, définissons ce que nous entendons par micro-interface. Un micro-frontend est une approche architecturale de la création d’applications frontend qui implique de décomposer une grande application en parties plus petites et plus faciles à gérer. Chaque partie, ou micro-frontend, est développée et déployée indépendamment des autres. Cette approche permet aux équipes de travailler sur différentes parties de l’application sans se marcher sur les pieds.
Développement micro-frontend vs développement frontend traditionnel
Alors, qu’est-ce qui différencie les micro-interfaces du développement frontal traditionnel ? Dans une approche de développement frontend traditionnelle, vous avez généralement une base de code monolithique où se trouve tout le code du frontend. Cette base de code peut devenir gonflée et difficile à gérer, d’autant plus que l’application grandit. En revanche, une approche micro-frontend vous permet de décomposer votre base de code frontend en parties plus petites et plus gérables. Cette approche facilite la mise à l’échelle de votre application et vous permet de réutiliser le code dans différentes parties de votre application.
Construire des micro-frontends à l’aide de Vue et de composants réutilisables
vue facilite la création de composants réutilisables, ce qui est essentiel lors de la création de micro-interfaces. Les composants réutilisables sont des composants qui peuvent être utilisés dans différentes parties de votre application sans avoir à réécrire plusieurs fois le même code. Par exemple, un composant de bouton peut être réutilisé dans différentes parties de votre application où vous avez besoin d’un bouton. Cette approche permet de gagner du temps et de réduire la duplication de code.
Pour construire une micro-interface en utilisant vue et des composants réutilisables, vous devez d’abord identifier les différentes parties de votre application qui peuvent être décomposées en parties plus petites et plus faciles à gérer. Chaque partie sera développée comme une micro-interface et aura son propre ensemble de composants réutilisables.
Une fois que vous avez identifié les différentes parties de votre application, vous pouvez commencer à créer les micro-frontends à l’aide de Vue. Chaque micro-interface peut être développée indépendamment et peut être déployée séparément. Lorsque les micro-interfaces sont prêtes, vous pouvez les combiner pour créer l’application plus grande.
Voyons maintenant comment les services interagissent avec les API dans une architecture micro-frontend.
API dans l’architecture micro-frontend
Dans une architecture micro-frontend, les services sont généralement conçus comme des composants autonomes pouvant être utilisés sur différents micro-frontends. Ces services communiquent avec des API pour récupérer et stocker des données.
Par exemple, supposons que vous ayez une micro-interface qui affiche une liste de produits. Vous pouvez créer un service qui communique avec une API pour récupérer la liste des produits. Ce service peut être réutilisé dans d’autres micro-interfaces devant afficher une liste de produits.
Disons que nous construisons une plate-forme de commerce électronique et que nous avons identifié les parties suivantes qui peuvent être décomposées en micro-interfaces :
- Catalogue de produits: Cette micro-interface affiche une liste de produits avec leurs prix et leurs descriptions.
- Chariot: Cette micro-interface permet aux utilisateurs d’ajouter des produits à leur panier et de passer à la caisse.
- Compte d’utilisateur: Cette micro-interface affiche les informations du compte utilisateur, telles que les commandes et les adresses enregistrées.
Pour construire les micro-frontends, nous pouvons commencer par identifier les composants réutilisables dont nous avons besoin pour chaque micro-frontend. Par exemple, les micro-frontends « Catalogue de produits » et « Panier » ont tous deux besoin d’un composant qui affiche les informations sur le produit, tandis que les micro-frontends « Panier » et « Compte d’utilisateur » ont tous deux besoin d’un composant qui affiche l’historique des commandes de l’utilisateur.
Nous pouvons ensuite créer ces composants réutilisables à l’aide de Vue et les importer dans chaque micro-interface selon les besoins. Cette approche permet de gagner du temps et de réduire la duplication de code.
Pour les services, nous pouvons créer un service de produit qui communique avec l’API du produit pour récupérer et afficher le catalogue de produits. Nous pouvons également créer un service de panier qui communique avec l’API de panier pour gérer le processus de panier et de paiement de l’utilisateur.
Finalement, le Compte d’utilisateur micro-frontend peut utiliser un service utilisateur qui communique avec l’API utilisateur pour récupérer et afficher le informations sur le compte de l’utilisateur.
En décomposant notre plateforme e-commerce en micro-interfaces avec des composants et des services réutilisables, nous pouvons développer et déployer chaque partie indépendamment, permettant à notre équipe de travailler sur différentes parties de l’application sans se marcher sur les pieds. De plus, cette approche facilite la mise à l’échelle de notre application et la réutilisation du code dans différentes parties de la plate-forme.
Examinons un exemple de la manière dont nous pouvons créer un composant de catalogue de produits à l’aide de vue:
javascript
<template>
<div>
<h2>Product Catalog</h2>
<ul>
<li v-for="product in products" :key="product.id">
<h3>{{ product.name }}</h3>
<p>{{ product.description }}</p>
<p>Price: ${{ product.price }}</p>
<button @click="addToCart(product)">Add to Cart</button>
</li>
</ul>
</div>
</template>
<script>
import ProductService from '@/services/ProductService.js'
export default {
data() {
return {
products: []
}
},
methods: {
addToCart(product) {
// Call the Cart micro-frontend to add the product to the user's cart
}
},
mounted() {
ProductService.getProducts().then(response => {
this.products = response.data
})
}
}
</script>Dans ce code, nous avons un composant de catalogue de produits qui affiche une liste de produits avec leur nom, leur description et leur prix. Le composant dispose également d’un bouton pour ajouter le produit au panier de l’utilisateur.
Nous utilisons le ProductService pour récupérer la liste des produits à partir de l’API du produit, et nous utilisons la directive v-for pour parcourir la liste des produits et les afficher sur la page.
Lorsque l’utilisateur clique sur « Ajouter au panier” bouton, nous pouvons appeler une méthode pour ajouter le produit au panier de l’utilisateur. Cette méthode peut communiquer avec le micro-frontend « Cart » pour effectuer la mise à jour du panier proprement dit.
Ce n’est qu’un exemple de la façon dont nous pouvons utiliser Vue pour créer un composant réutilisable pour un catalogue de produits de commerce électronique. Des composants similaires peuvent être créés pour d’autres parties de la plate-forme de commerce électronique, telles que les micro-interfaces de panier et de compte d’utilisateur.
Conclusion
L’architecture micro-frontend est une approche puissante pour créer des applications frontend. Il vous permet de décomposer votre application en parties plus petites et plus faciles à gérer, ce qui facilite la mise à l’échelle et la réutilisation du code dans différentes parties de votre application. Lors de la création de micro-frontends à l’aide de Vue, les composants réutilisables sont essentiels. Ils vous aident à gagner du temps et à réduire la duplication de code. Enfin, dans une architecture micro-frontend, les services sont généralement conçus comme des composants autonomes qui communiquent avec des API pour récupérer et stocker des données.