Vue.JS for a Micro Frontend approach

Question

Our team is developing a large project and we want to build a big app with multiple forms and dashboards and features. One monolithic SPA would get complicated. So we discuss the approach of „micro frontend“ architecture. The goal is to generate a parent SPA which contains several child SPAs. All SPAs should use the same framework: vueJS.

Idea behind: Micro Frontends

• a web app is a composition of features which are owned of independent teams
• a team has a distinct area of business
• the team is cross-functional and develops the features end-to-end from database to user-interface
• it's like self-contained systems

We found some implementations supporting this:

1. Micro Frontends
2. Single-SPA of CanopyTax

We want to use VueJS in our frontend (vue, vue-router, vue-resource, vue-loade, webpack)

Questions

1. Is a composite UI (i.e. Micro Frontend) feasible with VueJS (standard Vue-tools), are there example projects?
2. We have more than one page, so we need a solution to navigate from one side to another. How can we realize page transitions?
3. Is it possible to established an Event-Bus between the VueJS components?
4. How can we implement a bidirectional communication between the components (parent-child, child-parent)?

Answer 1

Feasibility: Composite UI

1. Is it possible to create a composite UI (micro front end) based on vue by using standard vue tools?

Yes, it is possible. Pretty much any independent Vue-component you see published around (vue-select, vue-slider-component and even full "sets" of components such as vuetify, bootstrap-vue or vue-material are examples of reusable (composable) components developed using standard Vue tools.

Page transistions: Routing

2. We have more than one page, so we need a solution to navigate from one side to another. How can we realize page transitions?

vue-router is the tool for this job. It is developed by the core team, so expect tight integration and great feature support.

Event-Bus

3. Is it possible to established a Event-Bus between the VueJS components?

Every Vue instance implements an events interface. This means that to communicate between two Vue instances or components you can use Custom Events. You can also use Vuex (see below).

Bidirectional communication

4. How can we implement a bidirectional communication between the components?

The best way to send data from parent component to child is using props. Steps:

1. Declare props (array or object) in the child
2. Pass it to the child via <child :name="variableOnParent">.

See demo below:

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>

You can also get references for Child Components (refs) and call methods on them.

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>

To communicate from child to parent, you'll use events. See demo below. There are also several modifiers that make this task easier.

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

Inevitably, though, as your application grows, you will have to use a more scalable approach. Vuex is the de facto solution in this case. Roughly, when using Vuex, you won't have to pass state around from parent to child: all of them will pick it up from the Vuex store (sort of a "global" reactive variable). This greatly simplifies the application management and is worth a post of its own.

---

Final note: As you can see, one great advantage of Vue is how easy you can prototype and test functionality. No build step, few abstractions over raw JS. Compared to other frameworks, I'd say this is an important bonus.

Answer 2

I have been curious looking for a quick way to implement the Micro-Frontend architecture. Some good resources I found are at:

• micro-frontends.org: techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently.
• Single-SPA.js: Javascript router for front-end microservices

However the problem I had with them is setup complexity. I like to see results pretty fast.

Piral

Piral.io (framework for portal-applications following microfrontends architecture) is still pretty much in development and it's mainly targeted for React (another JS frontend-framework).

Vue approach

I was able to come up with an approach and hope to write an medium article on that soon, however for the time being

1. You can build each part of your application as an independent Web Component with Vue. A great place to start is Create & Publish Web Components With Vue CLI 3 - Vue.js Developers.
2. You can use vue-router for page-transitions: with dynamic route matching (e.g /apps/:app_name) you can load sub-applications as appropriate. Within each sub-app, you can as well have a routing system in place
3. As Event-Bus there's BroadcastChannel in recent browsers, which can be used to send messages across sub-apps. The Broadcast Channel API could be resourceful.
4. BroadcastChannel can handle bi-directional communication.

Above approach works best if you want to:

1. Have separate team use whatever tool they're most comfortable with.
2. Add new apps, even in production without downtime.