web-dev-qa-db-ja.com

Vue.JS-マイクロフロントエンドアプローチ

私たちのチームは大規模なプロジェクトを開発しており、複数のフォームとダッシュボードと機能を備えた大きなアプリを構築したいと考えています。 1つのモノリスSPAは複雑になります。そこで、「マイクロフロントエンドアーキテクト」のアプローチについて説明します。目標は、いくつかの子SPAを含む親SPAを生成することです。すべてのSPAは同じフレームワーク（vueJS）である必要があります。

このアプローチの背後にあるアイデア（ https://micro-frontends.org/ ）

  • webアプリは、独立したチームが所有する機能の構成です
  • チームには明確なビジネス領域があります
  • チームは機能横断的で、データベースからユーザーインターフェイスまで、エンドツーエンドで機能を開発しました
  • そのような自己完結型システム

このアプローチの実装がいくつか見つかりました

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

2）CanopyTax with single-spa-> https://github.com/CanopyTax/single-spa

フロントエンドで使用したいもの：

  • vue

  • vue-router

  • vue-resource

  • ビューローダー

  • ウェブパック

私たちの質問：

1）標準のvueツールを使用して、vueに基づいて複合UI（マイクロフロントエンド）を作成できますか？

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

2）複数のページがあるため、あるページから別のページに移動するためのソリューションが必要です。どのようにしてページ遷移を実現できますか？

3）VueJSコンポーネント間にイベントバスを確立することは可能ですか？

4）コンポーネント間の双方向通信をどのように実装できますか？

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

1）標準のvueツールを使用して、vueに基づいて複合UI（マイクロフロントエンド）を作成できますか？

はい、可能です。公開されていると思われるほとんどすべての独立したコンポーネント（ https://github.com/sagalbot/vue-select 、 https://github.com/NightCatSama/vue-slider-component ）およびコンポーネントの完全な「セット」（vuetify、 https://github.com/bootstrap-vue/bootstrap-vue 、vue-materialなど）も再利用可能な（合成可能な）例です）標準のvueツールを使用して開発されたコンポーネント。

2）複数のページがあるため、あるページから別のページに移動するためのソリューションが必要です。どのようにしてページ遷移を実現できますか？

vue-router は、このジョブのツールです。コアチームによって開発されているため、緊密な統合と優れた機能サポートを期待しています。

3）VueJSコンポーネント間にイベントバスを確立することは可能ですか？

すべてのVueインスタンスは eventsインターフェイス を実装します。つまり、2つのVueインスタンスまたはコンポーネント間で通信するには、使用できる カスタムイベント 。Vuexを使用することもできます（以下を参照）。

4）コンポーネント間の双方向通信をどのように実装できますか？

データを親コンポーネントから子に送信する最良の方法は、 propsを使用することです。手順：（1）子でprops（配列または object ）を宣言します。 （2）<child :name="variableOnParent">を介して子に渡します。以下のデモを参照してください。

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>

子コンポーネント（refs） のreferencesを取得し、それらのメソッドを呼び出すこともできます。

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>

子から親へ通信するには、 events を使用します。以下のデモを参照してください。このタスクを簡単にする いくつかの修飾子 もあります。

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>

ただし、アプリケーションが大きくなるにつれて、必然的に、よりスケーラブルなアプローチを使用する必要があります。 Vuex は、この場合のデファクトソリューションです。大まかに言って、Vuexを使用する場合、親から子に状態を渡す必要はありません。それらすべてがVuexストア（一種の「グローバル」リアクティブ変数）から状態を取得します。これにより、アプリケーション管理が大幅に簡素化され、独自の投稿に値します。

最後の注意：ご覧のとおり、Vueの大きな利点の1つは、プロトタイプを作成して機能をテストするのがいかに簡単かということです。ビルド手順がなく、抽象化がほとんどありません。他のフレームワークと比較して、これは重要なボーナスだと思います。

10
acdcjunior

マイクロフロントエンドアーキテクチャを実装する簡単な方法を探していました。 https://micro-frontends.org/ と https://single-spa.js.org/ で見つけたいくつかの優れたリソースがありますが、問題はセットアップの複雑さという問題がありました...かなり速く結果を確認したいのです。 https://piral.io はまだ開発段階にあり、主に反応の対象となっていますが、これが私の発見です。

私はアプローチを考え出すことができ、それについてすぐに中程度の記事を書くことを望みましたが、当面は

  1. Vueを使用すると、アプリケーションの各部分を独立したWebComponentとして構築できます この記事 は、始めるのに最適な場所です。
  2. Vue-routerを使用し、動的ルートマッチング（例：/apps/:app_name）必要に応じてサブアプリケーションをロードできます。各サブアプリ内で、ルーティングシステムを配置することもできます
  3. 最近のブラウザには、サブアプリ間でメッセージを送信するために使用できるBroadcastChannelがあります。 これ は機知に富む可能性があります。
  4. BroadcastChannelは、双方向通信を処理できます。

このアプローチは、次の場合に最適です。

  1. 別のチームに、最も使いやすいツールを使用してもらいます。
  2. ダウンタイムのない運用中でも、新しいアプリを追加します。
0
m_bryo