Vue micro frontend implementation patterns

Vue micro frontend
implementation patterns
Albert Brand

Who am I?
Albert Brand
Senior consultant @ Xebia
Pragmatic programmer
Proud husband & dad
twitter.com/al_bert_brand
medium.com/@albert.brand
linkedin.com/in/albertbrand
Vue micro frontend implementation patterns - Xebia - @al_bert_brand - 2

What is a micro frontend?
- Autonomously developed, tested and deployed frontend components
- Focused on a single business domain
- Implemented end-to-end by a team
- Offering more freedom and less dependencies for developers
- Very useful in a multi team setting

How can Vue help?
- Vue is an opinionated web framework
- Can build anything:
- large single page apps with client side routing; or
- a library of shared UI components; or even
- repackage as Web Components
- Easy to adjust to needs
- Not too much hard choices
Seems like a good match!

From monolith to disaster microservices
5

Single page app monolith
Browser Page
Server
Backend app
Frontend app
HTML Assets API API
6

Backend microservices
Browser Page
Server
App service
Frontend app
Micro
service
API
HTML Assets
Micro
service
Proxy
API
7

Frontend microservices
Browser Page
Server
App service
Micro
frontend
component
Micro
serviceAPI
HTML Proxy
Micro
service
Assets
HTML
Micro
frontend
component
Micro
serviceAPI
Micro
service
Assets
HTML
8

Domains
Browser Page
Server
Supportive
domain
Business
domain
Business
domain
9

Wait, why can't I use IFRAMEs?
10

More server side concatenation tools
- Server side includes
- Compoxure
- Tailor

Example page
Page
Menu
Footer
Product detail
Cart
12

Micro frontend domain division
Page
Menu
Footer
Product detail
Cart
13

Example repository structure
/renderer
/templates
/domain-navigation
/backend
/assets
/templates
/frontend
/src
/domain-product
... same
/domain-cart
... same

Local development HTTP servers
/renderer <- serves at
http://localhost:8000
/domain-navigation /backend <- serves at
/domain-product/backend <- serves at
/domain-cart/backend <- serves at

Example page render GET request
- Renders a template with menu, cart, product and footer component
- Queries micro frontend endpoints
- Can be queried in parallel, slowest is bottleneck
- Need to handle failing micro frontend endpoint
- No / short cache period for endpoint result
- Returns rendered HTML page

Example renderer requests
http://localhost:9000/assets/frontend-assets.json
http://localhost:9000/menu
http://localhost:9000/footer
http://localhost:9001/product-detail
http://localhost:9002/cart

Frontend assets?
JSON structure that contains initial JS/CSS for the micro frontend component:
{
"css": ["/assets/css/app.a4393e1d.css"],
"js": ["/assets/js/app.938921fc.js"]
}

Navigation Vue JS entrypoint
import Vue from "vue";
import Menu from "@/components/Menu.vue";
import Footer from "@/components/Footer.vue";
new Vue({
el: "#menu",
render: h => h(Menu)
});
new Vue({
el: "#footer",
render: h => h(Footer)
}); Vue micro frontend implementation patterns - Xebia - @al_bert_brand - 19

vue.config.js addition
module.exports = {
...
configureWebpack: {
plugins: [
new HtmlWebpackPlugin({
template: "templates/assets.ejs",
filename: "frontend-assets.json",
inject: false,
minify: false,
}),
],
}
}

Run build
/domain-navigation/frontend$ npm run build
⠋ Building for production…
Build complete. The ../backend/assets directory is ready to be
deployed.

Server side HTML template
<head>
{{range $css := .Assets.CSS}}
<link rel="stylesheet" href="{{$css}}" />
{{end}}
</head>
<body>
{{ .MenuHTML }}
{{ .CartHTML }}
{{ .ProductDetailHTML }}
{{ .FooterHTML }}
{{range $js := .Assets.JS}}
<script type="text/javascript" src="{{$js}}"></script>
{{end}}
</body> Vue micro frontend implementation patterns - Xebia - @al_bert_brand - 22

Rendered template output
<head>
<link rel="stylesheet" href="/proxy/menu/css/app.a4393e1d.css" />
<link rel="stylesheet" href="/proxy/cart/css/app.ae6c87ce.css" />
...
</head>
<body>
<div id="menu"/>
<div id="cart"/>
<div id="product"/>
<div id="footer"/>
<script type="text/javascript"
src="/proxy/menu/js/app.938921fc.js"></script>
<script type="text/javascript" src="/proxy/cart/js/app.ffb4.js"></script>
...
</body> Vue micro frontend implementation patterns - Xebia - @al_bert_brand - 23

Client side result
<body>
<ul class="menu" id="menu">
<li><a href="/">Home</a></li>
<li><a href="/shop">Shop</a></li>
</ul>
<div id="cart"> ... </div>
<div id="product"> ... </div>
<div class="footer" id="footer"> ... </div>
...
</body>

Issues
- Components are only rendered once
- How to send server side data to client side?
- How to call authenticated microservice APIs?
- Everybody's touching my browser's globals
- How do we share components?

Components are only rendered once
Instead of looking at IDs, use custom elements:
<example-menu></example-menu>
<example-product-detail></example-product-detail>
<example-cart></example-cart>
<example-footer></example-footer>

Components are only rendered once
Then add a loop in each entrypoint:
const components = {
"example-menu": Menu,
"example-footer": Footer,
};
Object.entries(components).forEach(([tagName, Component]) => {
document.getElementsByTagName(tagName).forEach(el => {
new Vue({
el,
render: h => h(Component)
});
});
}); Vue micro frontend implementation patterns - Xebia - @al_bert_brand - 28

How to send server side data to client side?
Continuing on the custom elements solution:
<example-menu active="home"></example-menu>

Update the entrypoint:
Object.entries(components).forEach(([tagName, Component]) => {
document.getElementsByTagName(tagName).forEach(el => {
const props = Array.from(el.attributes).reduce((props, attr) => {
props[attr.nodeName] = attr.nodeValue;
return props;
}, {});
new Vue({
el,
render: h => h(Component, { props })
});
});
});

Alternative solution: treat pieces of document structure as Vue template.
Enable the Vue runtime compiler in vue.config.js:
module.exports = {
...
runtimeCompiler: true,
}

The template should be adjusted:
<example-menu class="navigation" active="home"></example-menu>
<example-product-detail class="product"></example-product-detail>
<example-cart class="cart"></example-cart>
<example-footer class="navigation"></example-footer>

Update the entrypoint:
const components = {
"example-menu": Menu,
"example-footer": Footer,
};
document.getElementsByClassName("menu").forEach(el => {
new Vue({
el,
components,
});
});

Bonus: this makes component composition possible:
<example-menu class="navigation" active="home">
<example-menu-item href="/">Home</example-menu-item>
<example-menu-item href="/shop">Shop</example-menu-item>
</example-menu>
Downside is extra 10kb for the runtime compiler in each bundle.

How to call authenticated microservice APIs?
You want to use a prope web token auth framework such as OAuth.
When that's in place you have basically two options:
- store the token on the client and pass it along proxy calls
- store the token on the server and use a session cookie on the client
The last option requires you to tinker with your proxy and make it session-aware.

Everybody's touching my browser's globals
Rules for all teams:
- Only touch your own document structure
- No pollution of global JS scope (should be fine if using Webpack)
- Regulate usage of web APIs (for instance, only 1 client side router allowed)
- If needed, communicate on a page via browser events
- Prefix CSS and limit to document structure

Browser's globals: CSS
Use the scoped attribute on Vue component style tags:
<style scoped>
h1 {
font-size: 2rem;
}
</style>

Browser's globals: CSS
Use a Vue preprocessor to prefix third party CSS:
.navigation {
@import 'buefy.css'
}

How do we share frontend components?
1. Create a Vue component library.
2. Share using a private NPM repo.
3. Include the components that you use in your bundle.
There are some advanced Webpack tricks to reduce bundle size! For next time...

Thank you!
Albert Brand
twitter.com/al_bert_brand
medium.com/@albert.brand
linkedin.com/in/albertbrand

Vue micro frontend implementation patterns

Recommended

More Related Content

What's hot (20)

Similar to Vue micro frontend implementation patterns (20)

Recently uploaded (20)

Vue micro frontend implementation patterns

Editor's Notes