Micro Frontends: the future of frontends
28 March 2022
Good frontend development isn’t easy. Making frontend development scalable so that multiple teams can work on complex projects simultaneously, is even harder. This blog explains what Micro Frontend development is, how it works, and the benefits of using it to develop websites and applications.
Today, frontend development begins with the development environment and architecture that form the basis for creating new applications. Micro frontends aren’t just responsible for a particular task. They perform every step needed to complete development functions, from frontend to backend and databases, as you can see in the illustration below.
What is a Micro Frontend?
Micro Frontend development uses agile methods to enable different teams of developers to work autonomously on small parts of the code for a website or application.
“Micro Frontend development is a method of working with different teams of developers autonomously on a small part of the code for a website or application.”
Clear communication between teams is important when developing large scale new projects. During Micro Frontend development, teams work on their own feature, separate from the overall application, independent of the other team’s code. Smooth integration of new code when it’s ready for the production environment, and join the current application is essential. After integration the new feature should be able to communicate with other features in the application. The new feature should also be accessible without the application, through the browser. Routing features is a challenge that can be overcome in several ways:
Application shell and routing
2. Application shell and routing
Routing is another important challenge when working with Micro Frontends. The main issue here is how the micro application is positioned in relation to the main application and how it can be accessed. The application shell is the main application in which all the Micro Frontends run and takes care of all connections between the micro applications, but also the global settings and the overview.
Another way to properly manage routing and connections is to develop your own application shell. You can do this using a framework such as Angular or Vue. The Single-SPA framework is another great application shell solution. It can integrate Micro Frontend apps written in Angular, Vue or React into its shell.
How about a bigger digital presence?
Gone are the days when a website was enough for a proper, digital presence. Our experts happily assist in bringing about a digital ecosystem - optimised and on-brand - fit to serve your business goals.
Micro Frontends use different methods of communication but generally they should have as little communication with each other as possible. In Micro Frontends each component should be autonomous. It is important to properly regulate communication between applications as this prevents friction between teams, allowing each team to focus on its own customer.
The best approach to communication is to change as little as possible about who owns the data. Each frontend retains its own data and does not share it with other Micro Frontend apps. It’s common to share the relevant data via a url, but that is not desirable in every Micro Frontend situation. Parent-child traffic (vertical) can be used for this purpose. This is widely used by frameworks such as Angular and Vue. Horizontal traffic (or children communication) is also possible, such as custom events.
Tools for Web Developers
5 real benefits of developing with Micro Frontends
Developing with Micro Frontends means that you can incrementally update, upgrade or even rewrite parts of the frontend without having to deploy the whole application at once. These agile methods and independent features roll-out means less delay and shorter time-to-market. Micro frontends are easy to scale and migrate, and autonomous teams of developers can work on features simultaneously. The user experience (UX) provided by Micro Frontends is not standardised but is consistent over all devices.
Laura MerloFrontend Developer - iO
At iO, the future is both female and front-end with Laura Merlo serving as a prime example. She considers development much like building LEGO, with each brick a part of the puzzle that’s digital. Her goal: to create something complex and have fun doing so.
- Read more
How design systems make app development cheaper, faster and betteriO specialises in creating apps and front-end solutions for clients in the financial sector. To do this at scale, it was necessary to create spaces to improve the collaboration between designers and developers: we call them design systems. In this article, we will explain the advantages and benefits of using design systems.Read more
How does innovative technology make for smoother navigation in real life?Updating and implementing interactive navigation on HD touchscreens for visitors and shoppers at Wijnegem - Shop Eat Enjoy.Look at this client story
How do you introduce flexible, efficient mobility in an organised way?Hoppin is a new platform for the Flemish Government with a focus on flexible mobility. Discover how we helped launch the platform.Look at this client story
How to combine rebranding and site redesign for a better user experience?Creating a Cohesive Platform: Assuralia's Rebranding and Site Redesign for Enhanced User Experience Read the story here.Look at this client story
YER. Experts in secondment and recruitment re-introducing themselves to the Netherlands together with iOYER is already big but aspired to double their presence in the world of recruitment and selection and secondment. iO helped them with creating a new brand, internal branding, external activation online and offline and bringing 3 websites into 1 site for all target groups.Look at this client story
How do you double your mobile conversion within 4 years?What it takes to make booking as easy as possible for you? Discover the power of a strong management vision, a streamlined work process, and long-term, open, and transparent collaboration between Landal GreenParks and iO.Look at this client story
iO develops a secure version of ChatGPT: AiORead more