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.
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
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.
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.
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.
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.