Serverless Micro-frontends using Vue.js, AWS Lambda, and Hypernova
Serverless computing has been popular in the micro-services world for helping teams to develop new features without manage infrastructure resources; so now it’s time to bring those benefits to micro-frontends.
Things which are equal to the same thing are also equal to one another — Euclid
What are we going to build?
We’re going to build a serverless isomorphic micro-frontend which will display repositories from Github based in a term.
Demo here: http://d2e6o8qnxwp1e4.cloudfront.net/?term=Vue.js
Code here:
You’re probably asking about why use serverless and micro-frontends? and what is an isomorphic web application? I’ll try to answer those questions.
Why use Serverless?
Serverless enables you to build modern applications with increased agility and lower total cost of ownership. Building serverless applications means that your developers can focus on their core product instead of worrying about managing and operating servers or runtimes, either in the cloud or on-premises. This reduced overhead lets developers reclaim time and energy that can be spent on developing great products which scale and that are reliable.
Why use Microfrontends?
The idea behind Micro-frontends is to think about a website or web app as a composition of features owned by independent teams. Each team has a specific area of business or mission it cares about and specializes in. A team is cross-functional and develops features end-to-end, from the database to the user interface.
What is an isomorphic web application?
They’re web applications which server-side render components and those components will continue to be interactive and dynamic in client-side.
Extra resources here:
- Serverless Computing: https://aws.amazon.com/serverless/
- Micro-frontends: https://micro-frontends.org/
- An Introduction to Isomorphic Web Application Architecture: https://medium.com/@ElyseKoGo/an-introduction-to-isomorphic-web-application-architecture-a8c81c42f59
Demo Application Diagram
Base App: It’s the entry point for the user and it requests the necessary views from the Micro-frontend based on the page requested by the user.
Micro-frontend: It requests data (repositories) from the BFF based on the term provided by the Base App, after having the data it renders the views. (There’s only one micro-frontend but we can have more as we need)
BFF’s (Backend for Frontends): It requests repositories from Github using the necessary credentials and transforming them to the expected schema for the micro-frontend.
Browser: Once the HTML document is processed for the browser it performs the client-side hydration to make the Vue component dynamic.
The Vuex store fetches repositories from the BFF when the user clicks the load more button to show more items on the vue component.
Micro-frontend
Micro-services usually provide API endpoints where other services can consume them, the same idea is extended to micro-frontends but we consume views instead of simple data.
Hypernova as server-side rendering service help us to achieve that easily, you can only focus on developing your vue components and they will be rendered by hypernova on demand.
Vue.js is not supported out of the box by Hypernova but it provides a standard interface to integrate any renderer. I’m using hypernova-vue you learn more about how to use it in this post.
How does it work?
Hypernova provides an endpoint to consuming views
POST http://<domain>/batch
Each key inside the request object represents only the key name that will help us to map the requested component on the response object.
name is the name of the component.
data are the props for the component.
Hypernova responds with the rendered HTML of the components.
How is it coded?
The micro-frontend is located in the folder micro-1 .
We’re using the serverless framework to simplify the development and run locally our services using serverless-offline. I decided to include the BFF Lambda inside the same serverless.ymlto avoid have an extra service but it’s recommended have separately.
client folder contains the entry point for our client-side script.
src/components folder contains the ReposList.vuecomponent.
src/store folder contains the Vuex store that the component uses to fetch and get data.
src/batch.js is the handler for our micro-frontend.
src/repos.js is the handler for our BFF.
The RepoListcomponent maps the state and action of the Vuex store using mapState and mapAction to fetch the repositories and render them.
Also, we have a button which calls the loadMore action to fetch more repositories client-side
The Vuex store provides follow actions:
search fetches repositories from the BFF based in a term, page number and page size.
loadMore uses the other action but using the next page number.
We use hypernova-lambda to implement Hypernova on AWS Lambda. As hypernova, it needs the getComponentfunction which returns the Vue components based on the nameprovided in the request payload.
The renderVuefunction decorates the component with the hypernova bindings, behind of scenes it renders the component and instantiates a unique Vuex store for each component using the createStorefunction.
The entry point for our client-side script is pretty similar than the batch.jshandler but it calls the function returned by renderVuex.
Base App
I don’t want to overwhelm you with more code, the base app is just responsible to place the views from the micro-frontend into an HTML document and returns a Cache-Control header that CloudFront uses for caching.
Final Thoughts
Infrastructure and deployment management are the main challenges implementing micro-frontends but using serverless we can focus only on developing new features.
Another benefit of using Hypernova is that we can develop our Vue Components without being worry about how they’re served to the consumers and how they’re hydrated on the client-side.
