Building Microfrontends with React & Node — Part 1
Design Goals and Tech choices
In order to appreciate the principles of microfrontends, it is important you have a reasonably good understanding of what a Microservice Architecture means. In that regard I would highly recommend reading Building Microservices by Sam Newman.
Design Goals:
Some of the Design principles while building this Microfrontend framework have been :
- Ensure the overall application can be upgraded incrementally, minimizing the need for big bang breaking change releases.
- Teams are able to deploy each micro app independently and the overall application is in a state of Continuous Deployment without the need for extensive regression tests with each release.
- Allow some level of polyglotism wherein teams can at the least choose their own helpers, state management libraries etc. without adding to the performance of learning curve overheads.
Choosing the Tech Stack:
Here are some of the tech stacks we chose and some reasoning behind it.
React
We chose React because it allows us a lean way to build independent components without the need for any boilerplate code or unnecessary dependencies. Infact we felt Create-React-App to be a bit of an overkill for our microapps, and chose to create our micro apps from scratch.
You could also look at Angular Elements, Stencil JS or web-components to build out your micro apps.
Mobx
We are using Mobx for managing the state within the micro-app. The reason we chose Mobx was because it supports multiple stores which means each micro app can have it own isolated store. We can get away with not having to write a lot of unnecessary boilerplate code. We alsolike the notion of computed states, and lastly it uses observables.
In most cases we might not even need Mobx and something like the Context API or Hooks should be able to fulfill your needs.
In case you really like Redux and if you still want to have a single Redux store for the page, then you could expose the store on the window object so that it becomes available to all microapps on that page.
GraphQL
Since each micro app is going to make its own API calls, we will have situations where there will be multiple network calls to the APIs based on the number of microapps per page. This is obviously not ideal, (and we are working to try and solve this situation), in the mean time what we can try and do best is, we can ensure that these network calls are as efficient as possible. This is where GraphQL comes in.
Tailor JS
We use Tailor JS as the assembler, where-in it assembles the page by loading in a template and calling the various micro apps into slots or fragments within the template.
Pub-Sub
Ideally these micro apps shouldn’t have a need to talk to each other, but at times you will need one microapp to update based on changes that happen in another. The best way to facilitate inter app communication is using the publisher-subscriber pattern and that’s where pub-sub comes in.
Cloud Functions
When you need Server Side Rendering for your Micro Apps, you could do that within a node instance, but then that would mean you need to either have a single node instance that renders each microapp at a different route URL or you have an individual node instance for every micro app, both these techniques could be an overkill. Creating a Cloud function to render each of the micro apps is something that’s reasonably easy to deploy and maintain.
Lerna
The micro apps within our project are organised within a mono repo. We use Lerna to run common tasks like installing dependencies, or building the micro apps across all the packages.
Routing
To keep things simple we use the file system as the Routing API.Creating a new route is as simple as creating a new html page within the templates folder.
Alternatively, you could have a custom template API, that’s tied up to your CMS system.
Emotion JS
When building microfrontends it is important that the styles for each micro app are self contained and the styles from one app don’t bleed into another, for this purpose alone we prefer to go with something like Emotion JS that provides encapsulated styles. Styled Components or any other CSS-JS framework would work just as fine.
PlopJS:
While scaffolding your micro apps its always good to have some level of consistency in how each of the micro apps are structured. This is where a microframework generator like plop.js comes in handy. Plop.js provides a nice CLI interface where a developer can quickly scaffold an app by answering a few questions.
In the next part we will dwell into the code for some of the key pieces of the architecture.some the repo for which can be found at https://github.com/xt/nitro2
