Micro-Frontends: What, why and how

Summary

This video offers a high-level overview of micro front-ends, explaining their concept, benefits like team scalability and technology agnosticism, and potential downsides such as increased complexity. It also discusses the process of transforming a traditional website into a micro front-end based architecture, from identifying targets to evaluating tools and designing frameworks.

Takeaways

• 🌟 Micro Frontends (MFEs) are individual pieces of code that represent a portion of a webpage, rather than the whole page.
• 🏢 The architecture of MFEs involves three key components: the micro frontends themselves, a micro frontend framework, and host pages.
• 🔍 The video provides an example of identifying potential MFE targets on a webpage, such as UI elements like panels or headers and footers.
• 📈 One of the main advantages of MFEs is team scalability, allowing more people to work on a webpage independently.
• 🛠️ MFEs enable the host page team to focus on platform-level tasks, while MFE teams concentrate on customer-centric tactical delivery.
• 🔄 Reusability is a key benefit, as MFEs can be easily shared and used across different pages of a website.
• 🌐 Technology agnosticism is a benefit, allowing different parts of the website to be built with different technologies as long as they conform to the MFE standard.
• 🚧 The complexity of MFEs can be a downside, as it introduces more potential for runtime issues and unexpected problems.
• 🛑 The lack of standardization in the MFE space means that there is no 'one-size-fits-all' solution, and each implementation may be unique.
• 🛠️ The process of transitioning to a micro frontend-based website involves identifying MFE targets, developing requirements, and evaluating or designing the MFE framework.
• 🔔 The video encourages viewers to subscribe for updates on micro frontends and advanced front-end topics, emphasizing community and knowledge sharing.

Q & A

What is a micro front end?

A micro front end is a piece of code that represents a portion of a webpage, not the whole page. It is part of a larger architectural model that includes a host page and a micro front end framework, which manages the loading and unloading of these components.

What are the three key components of micro front end architecture?

The three key components of micro front end architecture are the micro front ends themselves, the micro front end framework, and the host pages.

Why are micro front ends interesting for Amazon.com?

Micro front ends are interesting for Amazon.com because they allow for the modularization of user interface elements like panels and headers/footers, which can be reused across different pages while maintaining consistency.

What is one of the main advantages of using micro front ends?

One of the main advantages of using micro front ends is team scalability. Different teams can work independently on various micro front ends, versioning and deploying them independently from the host page.

How does micro front end architecture benefit the host page team?

The host page team can focus on being a platform team, concentrating on long-range deliverables, contracts, and managing the performance and analytics of the site, while the micro front end teams focus on tactical delivery and customer-centric improvements.

What is the concept of reusability in micro front end architecture?

Reusability in micro front end architecture refers to the ability to take self-contained UI components, like Amazon's product panels, and use them across different pages of the website, as long as the host pages conform to the micro front end standard.

What does technology agnosticism mean in the context of micro front ends?

Technology agnosticism in micro front ends means that the host page and the micro front ends can be built using different technologies, as long as they adhere to the micro front end standard, allowing for greater flexibility and innovation.

What potential downside of micro front ends is mentioned in the script?

One potential downside of micro front ends is the increased complexity of the system. This complexity can lead to runtime issues and unexpected problems due to the dynamic loading of components from different teams.

Why might the lack of standards in micro front end frameworks be a problem?

The lack of standards in micro front end frameworks can be a problem because it means there is no widely accepted solution or 'winner' in the space. This variability can make it difficult to choose the right framework and may lead to inconsistencies across different implementations.

What is the first step in transitioning a website to a micro front end based website?

The first step in transitioning a website to a micro front end based website is to identify potential micro front end targets, such as self-contained UI components, on the existing site that can be modularized and reused.

What should be considered when developing the requirements for a micro front end framework?

When developing the requirements for a micro front end framework, one should consider the rendering时机, data requirements, interaction models, and whether the micro front ends need to communicate with each other or the host page.