Micro front-ends is the latest web development trend

In 2018 we saw the rise of microservices with regards to server side (back-end) development becoming the industry standard when it came to building scalable applications in the cloud. Microservices proved to be a game-changer due to their isolated nature, allowing them to be easily maintainable, re-useable and scalable. However, while all the focus was on the back-end, the nature of front-end development was also rapidly evolving, and had gone under the radar somewhat. With the rise in popularity of front-end development frameworks like React and Vue JS, a similar methodology was being applied to front-ends with similar benefits being observed. Micro front-ends have now started to almost become a necessity, and with good reason. Let’s take a deeper look at what these are, and how they are beneficial.

What are micro front-ends?

Similar to microservices, micro front-ends are essentially smaller, isolated pieces of a front-end, broken up to encapsulate a piece of behavior, look & feel. Take for example Twitter’s UI. If we were to break down the screen which displays a logged in user’s Twitter feed, we can see that it is broken down as such:

A navigation bar

• Icons to different sections of the feed
• A search bar
• The logged-in user’s avatar & name that links to a side navigation

The main container

• The user’s Twitter feed taking up the left 2/3 of the container
• The current trends taking up the right 1/3 + follow recommendations below it

Even though this is a very high-level way of breaking it down and looking at it, we get an idea of how this one screen is broken down into many different smaller (or micro) front-ends, which may contain even more micro front-ends within them. Each one of these has their own styling of elements with them and handling of events and user behavior encapsulated in their logic.

Why micro front-ends are beneficial

One of the main similarities between microservices and micro front-ends is that they are both far more maintainable than their monolithic representations. By building these smaller scoped components, engineers are able to find all the information related to that component in one place (HTML, CSS, Javascript, Events, Handlers, etc.). This makes updating, refactoring or enhancing different areas of the product far easier as time goes on and the code-base begins to swell. It also allows better reusability, as these components need to be designed and engineered once and can be used multiple times in the same project, or even across projects (if well built). Teams can also work autonomously on different components without needing to interfere with each other’s work or get bottlenecked by dependencies and/or pre-requisites. The workflow is much smoother and independent, which is great for agile development.

Best frameworks for building micro front-ends?

Currently there are two leaders in this space, React and Vue JS. React is by far the more popular one, as it has been around longer and was built by the engineers at Facebook, before being open sourced to the development community. It has evolved greatly over the years and has benefitted from widespread adoption, having been battle tested on massive production environments such as Facebook, Instagram & Netflix. Vue JS, although much newer, has been gaining incredible momentum year over year. Having been built by just one-person (an ex-Google engineer) Evan You, Vue JS in just 4 short years has become the second most desired framework to work on for developers as per the Stack Overflow 2019 developer’s insights survey.

This is largely due to the fact that Vue JS is easier to pick up and use when compared to its competitors and allows developers with not as much experience to gain an entryway into micro front-end development, and utilize the latest technology being used to being fast web applications.

Conclusion

Microservices and micro front-ends along with serverless technologies combine to make the pillars of software engineering in 2020 and the near future. Thanks to these fantastic libraries & frameworks, there are far more developers who are able to build complex cloud-based applications that previously seemed out of reach. By breaking down the problems into smaller isolated components and providing a quick and easy way to communicate between components, the daunting architecture of the monolithic applications is no longer a barrier to entry. As these frameworks continue to evolve, we are incredibly excited for what the future holds.