Whom I follow to understand Micro Frontends
These are my recommended collection of Micro Frontends related materials
9 min readJan 17, 2021
MartinFowler.com / Cam Jackson
Cam Jackson is a software developer and consultant at ThoughtWorks.
Recommend for those: who are new and would like to understand Micro Frontends concept in one place.
Blog Posts
- Micro Frontends
My feedback: This article is highly recommended for me. If someone asks me about micro frontends, this is the very first in the list that I will refer to. This article does not focus on any approach specifically, rather it tries to discover all possible ways to accomplish as well as analyse pros and cons of each approach. This is suitable for everyone — those who want to start implementing micro frontends architecture or those who just only want to understand this hype. This article tries to cover all aspects of Micro Frontends — starting with what are the drives behind micro frontends, benefits of micro frontends, integration approaches — primitive ways as server-side composition and iframe, and newer technique like web component — and many possible ways to handle other complexities e.g. CSS, sharing codes, cross-application communications and testing. Lastly, the article picks one of the micro frontends integration approach, run-time integration via JavaScript — where the author chooses to implement with React but it is worth to mention that it can be implemented with other frameworks or pure Javascript.
Podcast
- Thoughtworks Technology Podcast: What’s so cool about micro frontends?:
My feedback: The Q&A with Cam Jackson. The contents is mostly covered by the contents on the above blog post. Note that the contents here does not touch the implementation details much, rather it is about what, why, and some complexities brought by Micro Frontends. If you are curious on the implementation details , please check out the blog post.
Michael Geers
is a software developer
Recommend for those who are looking at implementing Micro Frontends with: custom elements, client side integration, multiple Micro Frontends in the same view.
Blog Posts
- Micro Frontends: extending the microservice idea to frontend development
My feedback: This article focuses on the micro frontends integration approach by using custom elements (web component). It explains in details how to create the custom elements, explains how to manage the communications (parent-child, child-parent or siblings communication), solves the initial load performance issue with server side rendering. The following topics are discussed with the example codes implemented with pure Javascript without relying on any frameworks. This is really great for someone looking for the tangible example of implementing custom elements.
Podcast
- Software Engineering Radio: Episode 422: Michael Geers on Micro Frontends
My feedback: Q&A with Michael Geers on Micro Frontends
Videos
- Michael Geers — Micro Frontends — The Nitty Gritty Details or Frontend, Backend, 🌈 Happyend
My feedback: The contents are similar to the one mentioned in his website. Additionally, the talk covers the navigation between pages (on contrary, in website, it is labeled as coming soon) and some other details e.g. consistent UX, versioning, performance, testing, and knowledge sharing.
Books
- Micro Frontends in Action <Coming Soon>
Luca Mezzalira
is the VP of Architecture for DAZN and Google Developer Expert (GDE).
Recommend for those who are looking at implementing Micro Frontends with: vertical slice (each Micro Frontends takes place on the whole view), client side orchestrator, decision framework, duplication over wrong abstraction, Domain Driven Design (DDD)
Blog Posts
- I don’t understand micro-frontends
My feedback: As the subject suggests, this article was created to respond to the tweet from Dan Abramov’s “I don’t understand micro-frontends.”. In the article, Luca points out that micro frontends is not always a bad idea and it depends on the context. This is very good material where you can see different opinions, especially resistance, against micro frontends and how Luca explains from his perspective that which context still makes sense (to implement Micro Frontends). - Micro-frontends, the future of Frontend architectures
My feedback: Luca explains how he come up with Micro Frontends Manifesto for his company. This is the first post on his micro frontends series. - Adopting a Micro-frontends architecture
My feedback: Luca gives 3 different approaches to implement micro frontends from other companies before demonstrating how he implements differently where he called “DAZN way”. In this post, he starts with the architecture where the one JS file(he calls it “Bootstrap”), which will be loaded first and always present, plays a key role to load Micro Frontends, handle the life cycle of each Micro Frontends, and creates an abstraction layer between Micro Frontends and the device — TVs, browsers or devices. - Orchestrating micro-frontends
My feedback: In this article, he goes into further details on the role and responsibility of Bootstrap. - Identifying micro-frontends in our applications
My feedback: The article explains the Domain Driven Design (DDD) concepts and the suggestions from Luca on how to divide the frontend monolith. - Micro-frontends decisions framework
My feedback: In this article, Luca comes up with 4 pillars on what he calls the decision framework, (1) Definition (2)Composition (3)Route (4)Communication. He describe it as the most important decisions for defining a micro-frontends architecture. He goes further by digging down in each pillar and explains how it affects his micro frontends architecture.
PodCast
The following lists are presented as the Q&A with Luca. As the subject implied, the talks focus on Micro Frontend and it is roughly around— what the issues the Micro Frontends tries to solve, his decision framework, how the industry implements the Micro Frontends, how DAZN implements the Micro Frontends, challenges, lessons learnt, recommendation, …
- The InfoQ Podcast: Luca Mezzalira on Micro Frontends at DAZN
- Smashing Podcast (Episode 6 With Luca Mezzalira): What Are Micro-Frontends?
- Enginears Podcast: #2: Talking Micro-frontends with DAZN and Luca Mezzalira
- Views on Vue (081): Micro-Frontends with Luca Mezzalira
Videos
- Lessons from DAZN: Scaling Your Project with Micro-Frontends
My feedback: This is the composition of all his blog posts. The contents start from how the frontend architecture evolves, how DDD helps segregate each micro frontend scope, how his decision framework shapes the architecture to how the micro frontends is implemented in DAZN. If you preferred watching video, you can skip all blog posts (I don’t understand micro-frontends might be an exception) and look at this one. - Scaling your projects with Micro-frontends — talk by Luca Mezzalira
My feedback: Scaling your projects with Micro-Frontends — Luca Mezzalira, and Demystifying Micro-Frontends (Luca Mezzalira, 2019) are the same presentation but in different events. Also, they provide almost same content with above but different powerpoint— with more code examples. You are better to checkout this one if you would like to see a little bit more implementation details.
Books
- Building Micro-Frontends <Coming Soon>
Manfred Steyer
is a trainer and consultant with a focus on Angular, Google Developer Expert (GDE), and Microsoft MVP.
website: https://www.angulararchitects.io/en/
Recommend for those who are looking at implementing Micro Frontends with: Angular, Custom Elements, Module Federation in Webpack 5, Monorepo, Domain Driven Design (DDD)
Blog Posts
- series about Micro Frontends
My feedback: These 3 blog posts in this series. The first chapter is about the architectural decision i.e. should we use the Micro Frontends or how to decide and choose among the architectural candidate(s) for implementing Micro Frontends. The latter chapters are the high level summary on Web Component implementation to enable the applications in different versions/frameworks to be able to integrate and work together. - series about Angular Elements
My feedback: There are 6 posts in this series where Manfred will show you how to generate the Custom Elements from Angular Component and use it in the application shell. In addition, he will describe many scenarios on working with Custom Elements e.g. how to lazily load the Custom Elements in the application shell, how to remove Zone.js to make the bundle size even smaller, how the shell can project its content into the Custom Elements, and many different ways for building Angular Elements. I think the contents is similar to the following talk and can be used interchangeably and I preferred the video one. - series about Webpack Module Federation
My feedback: These are all related to how to use and configure Module Federation, new feature provided in Wepback 5, which will allow the application shell to dynamically load separately compiled Micro frontends at run time. The contents is exactly the same as the following below talk. I found it is much easier to follow if you watch the video first.
Podcast
- Real Talk Javascript: episode#99 Talking MonoRepos with Manfred Steyer
My feedback: This is the Q&A with Manfred. As the name implied, this podcast is to discuss about Monorepo and Micro-Frontends. Personally, I don’t think it covers the whole landscape of these topics as the time might not allow and it depends on the questions from panelists. I might prefer read his blog posts above first.
Videos
- A Deep Look At Angular Elements | Manfred Steyer
My feedback: The talk is equivalent to the contents on series about Angular Elements — which is described on the blog posts section. - Manfred Steyer — Angular, React, Vue and co: Harmoniously united by web components and micro apps?
My feedback: This talk is about (1) web component and (2)micro frontends in general. This is for someone who looks at how to achieve the micro frontends with web component in a general overview. - Domain-Driven Design and Angular | Manfred Steyer | ng-conf: Hardwired
My feedback: Manfred talks about 2 concepts (1) DDD and (2) Monorepo. At a first glance, it seems unrelated to each other. Later, he will demonstrate how he can combine these 2 ideas together — the result is developing Micro Frontends with Nx. The highlight of his talk is about features provided by Nx. - DDD Plugin for Nx: Solid Architectures With the Push of a Button
My feedback: This session dedicates to the Nx plugin (@angular-architects/ddd) and it can be seen as the additional session from the above one, Domain-Driven Design and Angular | Manfred Steyer | ng-conf: Hardwired. The mentioned Nx plugin enables you to automatically generate the domains and libraries type of files and folders following DDD and Nrwl’s best practices. This might be relevant for only those who are planing to create the Micro Frontends Monorepo application with Nx. Note that you can skip the first part (theory of DDD) if you already watched his talk above as it is duplicated. - AngularAir — Micro Front End Revolution with Module Federation and Angular with Manfred Steyer
My feedback: This talk starts with advantages and challenges of implementing Micro Frontends. Then it explores on how to load separately compile codes by using Module Federation in Webpack 5. For more information on Module Federation, please consider the below talk where it provides more exhaustive details. - NG-BE Live Episode 3 — Angular and Module Federation In-Depth with Manfred Steyer
My feedback: This talk dedicates to Module Federation in Webpack 5. The contents is the same as what he writes in the series of his blog, The Microfrontend Revolution. This is very exhaustive and, after completing either his talk or blog, you would be ready to implement it. I would recommend for those who are looking at the tangible examples how to implement Micro Frontends with (but not limit to) Angular with runtime integration where application shell doesn’t need to know its Micro Frontends (its referencing parts) at compile time.
e-Books
- Enterprise Angular
My feedback: This free e-book is about the following ideas i.e. DDD, Nx Monorepo and Micro-Frontends. I would say that almost all contents are well-covered by his blogs or talks. It’s fine if you would like to understand these concepts in one place. But if you would like to find more granular, you might consider his blogs in the Angular Architects site.
Footnote
There are many resources and contributors whom I would like to cover more e.g. Nx, Zack Jackson on Webpack 5 Module Federation, Gustaf Nilsson Kotte on implementing Micro-Frontends at IKEA. If I have time, that would be my Part2 of this article.
