Take the microservices paradigm and try to plug It into modern UI SPA frameworks and you’ve got yourself a bit of an anti-pattern, right?
I’ve spent the last few weeks trying to bring microservices thinking to the UI, here’s some of my experiences.
What problem are you trying to solve?
Conceptually think of a single UI with a navigation element which can serve multiple components which enables users to interact with different functions of a business.
OK — so can’t you just package up the components individually in your JS framework of choice, and then import them into your project using NPM/Yarn — done, right?
Let me take you further… what if each component was managed by a different application team and each wanted to control what and when they released. In other words, each application team delivering a component wants to be in control of their own build and release process and be completely decoupled from the parent UI container application.
Now we have our problem… Traditionally SPA frameworks (angular/react) at build time, bring lots of little components together and produce a monolithic build.
Let’s try and de-couple the functionality so lots of applications can be brought together and live in a single UI container but be managed by different teams.
What technologies are available?
There are probably several approaches to this, but I want to rule out iFrames as an obvious choice straight off, as they are likely to cause us more problems that solve including performance, stability and debugging.
There are a few JS frameworks out there which attempt to do what we described, one of the better ones I found was single-spa. They claim to support all major JS frameworks and even allow them to co-exist on the page together. Pretty cool!
Another choice would be web components which provide a standard model for encapsulation and interoperability of individual HTML elements.
Web components were introduced as a standard back in 2011 but uptake has been slow due to browser support, and framework loyalty by developers. Given it’s a proposed native standard and browser support is improving (reducing the need for pollyfills) and the fact angular are now on-board with angular elements it seems like a good choice to enable us to reach the Holy Grail of co-existing applications in a single UI container.
What are the next steps?
As the proof is often in the pudding, I am going to pull together a couple of proof of concepts…. one using single-spa and the other using web components. I will evaluate both technologies as we work towards a viable production ready solution.
I have since created a follow-on post to this one:
UI microservices — reversing the anti-pattern
This post is a deep dive into breaking down a monolithic UI build to reverse the anti-pattern and allow the UI to be…
Thank you for taking the time to read my article.