We used to implement microservices architecture in some of our complex projects. And that is very important to keep up with the latest technologies and learn how to benefit from them. So today we gonna share with you the interesting article about Micro Frontends approach.
The author of Micro frontends—a microservice approach to front-end web development claims that the part of frontend is getting bigger and bigger and the backend is getting less important. It makes changes to development techniques you use while working on the project. For instance, you have to provide a better support for allowing different frontend frameworks to co-exist, e.g. older modules built in JQuery or AngularJS 1.x, combined with newer modules built in React or Vue.
And you know that the monolithic approach doesn’t work for larger web apps. A large frontend should be split into smaller modules that can act independently. So here microservices is used.
But with Micro Frontends approach it’s not as complicated as it seems.
The author suggests a few different approaches to implementing micro frontends:
- Single-SPA “meta framework”
It combines multiple frameworks on the same page without refreshing the page. Here you can also write code using a new framework, without rewriting your existing app
- Multiple single-page apps that live at different URLs
The apps use shared Bower components as needed for common functionality such as the navigation components
- Isolating micro-apps into IFrames using libraries and Window.postMessage APIs to coordinate
IFrames share APIs exposed by their parent window
- Make the different modules communicate over a shared events bus
Each module can be built using its own framework, as long as it handles incoming and outgoing events
- Using Varnish Cache to integrate different modules
- Web Components as the integration layer
- “Blackbox” React components
Stay tuned! We’ve got a lot more of useful and interesting hacks, advice and news. You can also subscribe to our weekly newsletter to get all the updates in your mailbox.