web-dev-qa-db-fra.com

Vue.JS - approche micro frontend

Notre équipe développe un grand projet et nous voulons construire une grande application avec plusieurs formulaires et tableaux de bord et fonctionnalités. Un SPA monolithique se compliquerait. Nous discutons donc de l'approche de "l'architecte micro frontaux". L'objectif est de générer un SPA parent qui contient plusieurs SPA enfants. Tous les SPA doivent être du même cadre (vueJS).

L'idée derrière cette approche ( https://micro-frontends.org/ )

  • une application web est une composition de fonctionnalités appartenant à des équipes indépendantes
  • une équipe a un domaine d'activité distinct
  • l'équipe est interfonctionnelle et a développé sa fonctionnalité de bout en bout de la base de données à l'interface utilisateur
  • ses systèmes autonomes comme

Nous avons trouvé quelques implémentations de cette approche

1) https://micro-frontends.org/

2) CanopyTax avec spa unique -> https://github.com/CanopyTax/single-spa

Ce que nous voulons utiliser dans notre frontend:

  • vue

  • vue-router

  • vue-resource

  • vue-loader

  • webpack

Nos questions:

1) Est-il possible de créer une interface utilisateur composite (micro front end) basée sur vue en utilisant les outils standard vue?)

- we are not sure how doable is it with VueJS
- there may already be example projects?

2) Nous avons plus d'une page, nous avons donc besoin d'une solution pour naviguer d'un côté à l'autre. Comment réaliser des transitions de page?

3) Est-il possible d'établir un Event-Bus entre les composants VueJS?

4) Comment mettre en œuvre une communication bidirectionnelle entre les composants?

- Parent-Child Communication
- Child-Parent Communication
javascriptvue.jsfrontendmicro-frontend
15
René

1) Est-il possible de créer une interface utilisateur composite (micro front end) basée sur vue en utilisant les outils standard vue?)

Oui c'est possible. Presque tous les composants indépendants que vous voyez publiés autour de ( https://github.com/sagalbot/vue-select , https://github.com/NightCatSama/vue-slider-component ) et même des "ensembles" complets de composants (tels que vuetify, https://github.com/bootstrap-vue/bootstrap-vue , vue-material) sont des exemples de réutilisables (composables ) composants développés à l'aide d'outils standard vue.

2) Nous avons plus d'une page, nous avons donc besoin d'une solution pour naviguer d'un côté à l'autre. Comment réaliser des transitions de page?

vue-router est l'outil pour ce travail. Il est développé par l'équipe principale, alors attendez-vous à une intégration étroite et à une excellente prise en charge des fonctionnalités.

3) Est-il possible d'établir un Event-Bus entre les composants VueJS?

Chaque Vue instance implémente une interface d'événements . Cela signifie que pour communiquer entre deux Vue instances ou composants, vous pouvez utiliser Événements personnalisés . Vous pouvez également utiliser Vuex (voir ci-dessous).

4) Comment mettre en œuvre une communication bidirectionnelle entre les composants?

La meilleure façon d'envoyer des données du composant parent à l'enfant utilise accessoires. Étapes: (1) Déclarez props (tableau ou objet ) chez l'enfant; et (2) le transmettre à l'enfant via <child :name="variableOnParent">. Voir la démo ci-dessous.

Vue.component('child-comp', {
  props: ['message'], // declare the props
  template: '<p>At child-comp, using props in the template: {{ message }}</p>',
  mounted: function () {
    console.log('The props are also available in JS:', this.message);
  }
})

new Vue({
  el: '#app',
  data: {
    variableAtParent: 'DATA FROM PARENT!'
  }
})
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

<div id="app">
  <p>At Parent: {{ variableAtParent }}</p>
  <child-comp :message="variableAtParent"></child-comp>
</div>

Vous pouvez également obtenir des références pour Composants enfants (refs) et appeler des méthodes dessus.

Vue.component('my-comp', {
  template: "#my-comp-template",
  props: ['name'],
  methods: {
    saveMyComp() {
      console.log('Saved:', this.name);
    }
  }
})

new Vue({
  el: '#app',
  data: {
    people: [{name: 'Bob'}, {name: 'Nelson'}, {name: 'Zed'}]
  },
  methods: {
    saveChild(index) {
      this.$refs.myComps[index].saveMyComp();
    }
  }
});
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

<div id="app">
  <div v-for="(person, index) in people">
    <button @click="saveChild(index)">saveMyComp</button>
    <my-comp :name="person.name" ref="myComps"></my-comp>
  </div>
</div>

<template id="my-comp-template">
    <span> {{ name }} </span>
</template>

Pour communiquer de l'enfant au parent , vous utiliserez les événements . Voir la démo ci-dessous. Il existe également plusieurs modificateurs qui facilitent cette tâche.

var parent = {
  template: '<div><child :content.sync="localContent"></child><br>At parent: {{ localContent }}</div>',
  props: ['content'],
  data() {
    return {
      localContent: this.content
    }
  }
};

var child = {
  template: '<div>At child: {{ content.value }}<button @click="change">change me</button></div>',
  props: ['content'],
  methods: {
    change() {
      this.$emit('update:content', {value: "Value changed !"})
    }
  }
};

Vue.component('child', child);
Vue.component('parent', parent);

new Vue({
  el: '#app'
});
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<div id="app">
  <parent :content="{value:'hello parent'}"></parent>
</div>

Inévitablement, cependant, à mesure que votre application se développera, vous devrez utiliser une approche plus évolutive. Vuex est la solution de facto dans ce cas. En gros, lorsque vous utilisez Vuex, vous n'aurez pas à transmettre l'état du parent à l'enfant: tous le récupéreront dans le magasin Vuex (une sorte de variable réactive "globale"). Cela simplifie considérablement la gestion des applications et vaut la peine d'être publié.

Note finale : Comme vous pouvez le voir, un grand avantage de Vue est la facilité avec laquelle vous pouvez prototyper et tester la fonctionnalité. Aucune étape de construction, quelques abstractions par rapport à JS brut. Comparé à d'autres frameworks, je dirais que c'est un bonus important.

10
acdcjunior

Je suis curieux de rechercher un moyen rapide d'implémenter l'architecture Micro-frontend. Quelques bonnes ressources que j'ai trouvées sont à: https://micro-frontends.org/ et https://single-spa.js.org/ , cependant le problème que je eu avec eux est la complexité de la configuration ... J'aime voir les résultats assez rapidement. https://piral.io est encore à peu près en développement et il est principalement destiné à réagir, mais voici mes conclusions.

J'ai pu trouver une approche et j'espère écrire un article moyen à ce sujet bientôt, mais pour le moment

  1. Vous pouvez créer chaque partie de votre application en tant que WebComponent indépendant, avec Vue, cet article est un excellent point de départ.
  2. Vous pouvez utiliser vue-router et avec la correspondance dynamique des itinéraires (par exemple /apps/:app_name) vous pouvez charger des sous-applications selon les besoins. Dans chaque sous-application, vous pouvez également avoir un système de routage en place
  3. Dans les navigateurs récents, il existe BroadcastChannel qui peut être utilisé pour envoyer des messages via des sous-applications. This pourrait être ingénieux.
  4. BroadcastChannel peut gérer la communication bidirectionnelle.

Cette approche fonctionne mieux si vous souhaitez:

  1. Demandez à une équipe distincte d'utiliser l'outil avec lequel elle est la plus à l'aise.
  2. Ajoutez de nouvelles applications, même en production, sans temps d'arrêt.
0
m_bryo