Partage de technologie

Micro front-end : Qiankun, Wujie, single-spa, comparaison iframe

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

1. Présentation du framework micro front-end

Un framework micro-front-end est une solution technique conçue pour diviser les grandes applications frontales en plusieurs petites applications micro-front-end indépendantes et maintenables. Chaque application micro-front-end peut être développée, testée, déployée et exécutée. de manière indépendante tout en maintenant la collaboration globale et l’expérience utilisateur.Cette architecture est similaire à l'architecture des microservices, mais se concentre sur la zone front-end

2. Frameworks micro-frontaux courants

  1. Qiankun : Développé et maintenu par Ant Financial, basé sur Single-SPA, il offre des fonctionnalités d'accès simples et indépendantes de la pile technologique. Il prend en charge plusieurs frameworks front-end tels que Vue et React, et présente de faibles coûts de transformation et une expérience de développement conviviale.
  2. spa simple : Il s'agit d'un framework de routage frontal JavaScript léger, axé sur la gestion du routage des applications à page unique (SPA). Bien qu'il ne s'agisse pas d'un framework micro-frontend complet en soi, il constitue la base de nombreuses implémentations de micro-frontend.
  3. cadre: Bien que l'iframe lui-même ne soit pas un framework micro-frontal, il est souvent utilisé comme une simple implémentation de micro-front-end
  4. Sans bornes : Le framework micro front-end illimité est une solution micro front-end basée sur des composants Web + iframe. Il présente une série d'avantages tels qu'un faible coût, une vitesse rapide, une isolation native et des fonctions puissantes.Ce qui suit est une introduction détaillée au framework micro front-end illimité

Des points communs:Lorsque l'itinéraire est changé, vous pouvez charger le code de l'application correspondante et la laisser s'exécuter dans le conteneur.

  • avoirPossibilité de charger et décharger des sous-applications, lorsque la page passe d'une sous-application à une autre, elle peut être chargée et rendue normalement ;
  • avoirCapacité de conservation de l’état de routage, après avoir activé la sous-application, l'actualisation du navigateur, le routage avant et arrière de la sous-application peuvent fonctionner normalement ;
  • Entre application principale et sous-application, sous-application et sous-applicationPeut communiquer entre eux
  • Chaque micro-applicationGestion indépendante de l'entrepôt, développement indépendant de la pile technologique, déploiement indépendant et fonctionnement indépendant

3. Comparaison des frameworks micro front-end

caractéristiqueQiankunSans bornesspa simplecadre
Prise en charge de la pile technologiqueIndépendant de la pile technologique, prend en charge React, Vue, Angular, etc.Basé sur WebComponent, prend en charge plusieurs piles technologiquesIndépendant de la pile technologique, prend en charge plusieurs frameworks front-endLa pile technologique n'a rien à voir, mais l'intégration doit tenir compte de la compatibilité
Méthode d'accèsSimple, accès via l'API JSRelativement simple, encapsulé via WebComponentComplexe, vous devez configurer le cycle de vie d'un spa uniqueSimple, intégré via des balises HTML
isolement du bac à sableFournit un bac à sable JS et une isolation de styleUtilisez WebComponent pour une isolation naturelleLes développeurs doivent implémenter eux-mêmes l’isolation du bac à sableisolement naturel iframe
Gestion des itinérairesPrend en charge la maintenance de l'état du routage et le mappage de routage configurablePrend en charge le routage virtuel et maintient l'état du routageEn tant qu'itinéraire de niveau supérieur, vous devez gérer vous-même les itinéraires de sous-application.Le routage est géré par l'application au sein de l'iframe elle-même
Communication des candidaturesFournir un mécanisme de communication entre les applications parent-enfant et les applications enfant-enfantFournir une API basée sur des composants pour prendre en charge la communicationLes développeurs doivent mettre en œuvre eux-mêmes le mécanisme de communicationPeut communiquer via des paramètres postMessage ou URL, etc.
Préchargement des ressourcesPrise en charge du préchargement des ressources statiquesPrise en charge du préchargement des ressources statiquesPrise en charge du chargement paresseux des applicationsNe prend pas en charge le préchargement, le chargement à la demande
Impact sur les performancesPlus bas, optimisé grâce au sandboxing et au chargement paresseuxInférieur, mais WebComponent peut avoir une surcharge de performancesInférieur, mais dépendant de l'optimisation des applicationsPlus élevé, la surcharge de chargement et de rendu de l'iframe est plus importante
Expérience de développementMieux, fournit une API et une documentation richesUne meilleure API basée sur des composants est plus intuitiveEn général, vous devez gérer vous-même de nombreux détailsMeilleur, facile à intégrer dans les applications existantes
disponibilité de productionÉprouvé et adapté aux environnements de productionConvient aux environnements de production, mais peut bénéficier de moins de support communautaireConvient à l'environnement de production et doit être amélioré par les développeurs eux-mêmesConvient aux environnements de production, mais les problèmes de sécurité et de performances doivent être traités avec soin
Coût d'adaptationSupérieur, nécessité d’adapter le routage, le cycle de vie, etc.Modéré, principalement adapté à WebComponentSupérieur, nécessite une compréhension approfondie de l’architecture d’un spa uniqueInférieur, mais il faut faire attention aux problèmes de compatibilité et de performances

Le framework micro front-end apporte de nombreux avantages au développement d'applications front-end, tels que l'indépendance de la pile technologique, le développement et le déploiement indépendants, les mises à niveau incrémentielles, etc. Cependant, il présente également certaines lacunes, telles qu’une grande difficulté d’accès et de faibles capacités de partage des ressources. Par conséquent, lorsque vous choisissez d'utiliser ou non un framework micro-front-end, vous devez le considérer de manière globale en fonction des besoins spécifiques du projet et des capacités techniques de l'équipe. Dans le même temps, dans les applications pratiques, nous devons également prêter attention à des questions telles que la sélection du framework micro-frontal, la conception de l'architecture, la gestion du code, etc., afin d'assurer le bon déroulement du projet et le fonctionnement stable du système.