Micro Frontends approach

Micro Frontends approach
Average rating: 0
(0 votes)

Thanks! You’ve rated this material!

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.

For example, if you work on a project with codebase in pure JavaScript maintaining routing and user sessions, also some shared CSS and a collection of separate modules, built in various frameworks. Moreover, stored in different code repositories. And add there a deployment system that bundles altogether from different repositories and deploys to a server.

But with Micro Frontends approach it’s not as complicated as it seems.
The author suggests a few different approaches to implementing micro frontends:

  1. 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
  2. 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
  3. Isolating micro-apps into IFrames using libraries and Window.postMessage APIs to coordinate
    IFrames share APIs exposed by their parent window
  4. 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
  5. Using Varnish Cache to integrate different modules
  6. Web Components as the integration layer
  7. “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.

Rate this article, if you like it

Thanks! You’ve rated this material!

Got a project? Let's discuss it!

*By submitting this form you agree with our Privacy Policy.

Mailing & Legal Address

Syndicode Inc. 340 S Lemon Ave #3299, Walnut CA, 91789, USA

Visiting & Headquarters address
Kyiv Sofiivska 1/2a, 01001, Kyiv, Ukraine
Dnipro Hlinky 2, of. 1003, 49000, Dnipro, Ukraine
Email info@syndicode.com
Phone (+1) 9035021111