A Look at Micro Front-Ends, Their Architecture, and More

DZone 's Guide to

A Look at Micro Front-Ends, Their Architecture, and More

Micro front-ends bring the agility and modularity of microservices to front-end application development. Read on to learn more!

· Microservices Zone ·
Free Resource

There has been much buzz about micro front-ends as of late, but have you been wondering what it is? Well, allow us to explain. Simply put, a micro front-end is akin to the concept of microservices, just applied to a web app's front-end. With micro front-ends, web apps are integrated into modules to achieve a specific business-related need that is owned by various teams. Also, every team develops the feature end-to-end, from the UI, all the way to the database and backend. As you can see, the concept remains the same as with microservices — you make smaller independent services work in unison to serve a more significant application.

More often than not, when organizations take on a microservice architecture on the backend, the front-end apps are left as monoliths. What is that, you ask? Well, unified architecture refers to when you use a single team to build web apps with unique technology, and all of the development is completed altogether. Here the backend is organized following the business's needs, but the front-end continues to be jammed into just one app. It can throw up various issues over time. Thankfully, micro front-end architectures allow the entire application to be divided up across the complete stack according to the business domain. It provides the front-end development teams with similar levels of speed, testability, and flexibility as the ones available to the backend team via microservices.

Now that you understand, or are at least familiar with the phenomenon of micro front-ends, let's look at some of the best practices that you must adapt.

  1. Remember that several single-page applications have different URLs. So, in case you are seeking solutions for a shared functionality application, it would be ideal to use Bower or npm components.

  2. You can isolate micro apps into iFrames within the window. Furthermore, you can use message APIs as well as libraries to synchronize these micro apps. It would also help you to know that iFrames share the APIs that are exposed by their parent window.

  3. Make use of different modules if you want to communicate over a shared event bus. Another essential pointer in this context is that every module is created using this framework since it takes care of both incoming as well as outgoing events.

  4. Based on the main app's stack, the different components, as well as app sections, should ideally be developed as libraries and then “required” into the primary app. This, in turn, renders the main app as a composition of distinctive components.

It is easy to see why more and more people favor dividing client apps into several different parts that can be developed and deployed independently. Applying micro front-ends to intricate web apps offers myriad benefits, including agility, reusable code, easier testing, and cutting down the risk of regression issues and bugs. However, before you set out to develop custom web applications with the micro front-end approach, it is essential that you carefully assess the disadvantages it might pose to your project.

micro frontends, microservices, microservices architecture

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}