Qu'est-ce qu'un micro frontal?
Un style architectural qui combine des applications frontales indépendantes dans un ensemble plus vaste.
Supposons que vous souhaitiez créer une application Web progressive, mais qu'il vous soit difficile d'implémenter de nouvelles fonctionnalités dans l'application globale existante. Par exemple, vous souhaitez commencer à utiliser la nouvelle syntaxe JS (ou TypeScript), mais vous ne pouvez pas utiliser l'outil de génération correspondant dans le processus de génération existant. Ou, vous voulez simplement étendre votre équipe de développement afin que plusieurs équipes puissent travailler sur un produit en même temps, mais le couplage et la complexité des applications existantes restreignent chaque développeur les uns aux autres. Ce sont de vrais problèmes, qui réduisent considérablement l'efficacité de développement des grandes équipes.
Récemment, nous avons vu de plus en plus de frontaux se concentrer sur l'architecture d'applications frontales complexes. En particulier, comment décomposer le front-end dans son ensemble, afin que chaque pièce puisse être développée, testée et déployée indépendamment, tout en restant un tout pour les utilisateurs. Cette technologie est le micro frontal,
Pourquoi utiliser le micro frontend
Afin de séparer et découpler d'énormes projets frontaux. Par exemple: 1. Si chaque module fonctionnel correspond à un référentiel git, lorsque nous devons utiliser plusieurs de ces fonctions pour faire un nouveau projet, il suffit d'introduire le référentiel git correspondant. 2. Nous devons mettre à jour une certaine fonction de manière itérative. En même temps, nous voulons introduire ts pour remplacer la syntaxe originale es6 sans entrer en conflit avec d'autres modules fonctionnels. Le micro frontal peut également être complété.
Application monolithique vs microservices frontaux:
Application simple frontale ordinaire
Architecture micro frontale
avantage:
1. Autonomie des applications. Il suffit de suivre une spécification d'interface unifiée ou un cadre pour faciliter l'intégration du système, il n'y a pas de dépendance entre eux.
2. Responsabilité unique. Chaque application frontale ne peut se concentrer que sur les fonctions dont elle a besoin pour terminer.
3. La pile technologique n'est pas pertinente. Bien que vous puissiez utiliser Angular, vous pouvez également utiliser React et Vue.
Désavantages:
1. La division des applications dépend de la construction de l'infrastructure. Une fois qu'un grand nombre d'applications dépendent de la même infrastructure, la maintenance devient un défi.
2. Plus la granularité de la division est petite, cela signifie que l'architecture devient plus compliquée et le coût de maintenance devient plus élevé.
3. Une fois que la pile technologique est diversifiée, cela signifie que la pile technologique est chaotique
Utilisez un micro frontal pour éviter les risques
1. Prescrire un style de code unifié
2. Développer une pile technologique unifiée
3. Planifier soigneusement la division de l'entrepôt de code, en tenant compte des itérations et de la maintenance ultérieures
4. Unifier la bibliothèque de composants de l'interface utilisateur pour rendre le style de l'interface utilisateur cohérent dans un système
Approche technique
En termes de pratique technique, l'architecture micro front-end peut être mise en œuvre des manières suivantes:
1. Type de distribution d'itinéraire. Grâce à la fonction de proxy inverse du serveur HTTP, la requête est acheminée vers l'application correspondante.
Microservices frontaux. Concevez des mécanismes de communication et de chargement sur différents frameworks pour charger les applications correspondantes sur une seule page.
2. Micro applications. Grâce à l'ingénierie logicielle, dans l'environnement de déploiement et de construction, plusieurs applications indépendantes sont combinées en une seule application.
3. Widgetisation. Développez un nouveau système de construction pour intégrer une partie des fonctions métier dans un code de bloc indépendant, qui ne doit être chargé à distance que lorsqu'il est utilisé.
4. Conteneurisation frontale. Utilisez iFrame comme conteneur pour accueillir d'autres applications frontales.
5. Compositions d'application. Avec l'aide de la technologie Web Components, pour créer des applications frontales inter-cadres.
Réalisation technique
Maintenant, il est principalement basé sur un seul spa, et les frameworks js tels que vue, react et angular peuvent être utilisés en fonction de la pile technologique
Utilisation simple de Single-SPA (prenez react comme exemple)
1. Créez un fichier HTML
<html>
<body>
<div id="root"></div>
<script src="single-spa-config.js"></script>
</body>
</html>
2. Créez un fichier unique-spa-config.js
// single-spa-config.js
import * as singleSpa from 'single-spa';
// 加载react 项目的入口js文件 (模块加载)
const loadingFunction = () => import('./react/app.js');
// 当url前缀为 /react的时候.返回 true (底层路由)
const activityFunction = location => location.pathname.startsWith('/react');
// 注册应用
singleSpa.registerApplication('react', loadingFunction, activityFunction);
//singleSpa 启动
singleSpa.start();
3. Encapsulez le fichier d'exportation de rendu du projet React
Nous modifions le fichier d'entrée pour que le rendu réagisse à cela, puis il peut être connecté à single-spa
import React from 'react'
import ReactDOM from 'react-dom'
import singleSpaReact from 'single-spa-react'
import RootComponent from './root.component'
if (process.env.NODE_ENV === 'development') {
// 开发环境直接渲染
ReactDOM.render(<RootComponent />, document.getElementById('root'))
}
//创建生命周期实例
const reactLifecycles = singleSpaReact({
React,
ReactDOM,
rootComponent: RootComponent
domElementGetter: () => document.getElementById('root')
})
// 项目启动的钩子
export const bootstrap = [
reactLifecycles.bootstrap,
]
// 项目启动后的钩子
export const mount = [
reactLifecycles.mount,
]
// 项目卸载的钩子
export const unmount = [
reactLifecycles.unmount,
]
Lorsque le préfixe de l'URL de notre navigateur a / react, le programme peut rendre l'application normalement.Ainsi
, tous les préfixes de routage de notre application react doivent avoir / react
Pour résumer
Au fil des ans, alors que le front-end continue de devenir plus complexe, nous avons constaté une demande croissante d'architectures plus évolutives. Nous devrions pouvoir développer des logiciels grâce à des équipes autonomes indépendantes.
Bien que les micro-frontends ne soient pas le seul moyen, nous avons vu de nombreux cas réels de micro-frontends atteindre ces objectifs, et au fil du temps, nous avons pu appliquer progressivement cette technologie à d'anciens sites Web. Indépendamment du fait que le micro frontal soit la bonne approche pour vous et votre équipe, le micro frontal est une tendance. Sous cette tendance, l'ingénierie frontale et l'architecture frontale deviendront de plus en plus importantes.