A presentation at React Norway in in Larvik, Norway by Trent Willis
Micro-Frontends Under The Microscope Trent Willis | Micro-Frontends React Norway
Last year, I was interviewing managers… Trent Willis | Micro-Frontends React Norway
“What trends do you see in web development?” Trent Willis | Micro-Frontends React Norway
Every single one mentioned micro-frontends as a trend to watch Trent Willis | Micro-Frontends React Norway
Why all the hype? Trent Willis | Micro-Frontends React Norway
Micro-Frontends promise to make building complex applications easier and your team more efficient Trent Willis | Micro-Frontends React Norway
Do they live up to that promise? Trent Willis | Micro-Frontends React Norway
Micro-Frontends Under The Microscope Trent Willis | Micro-Frontends React Norway
Trent Willis Staff Software Engineer, Netflix Worked on several micro-frontend apps of varying complexities and scale Trent Willis | Micro-Frontends React Norway
What are micro-frontends, really? Trent Willis | Micro-Frontends React Norway
“An architectural style where independently deliverable frontend applications are composed into a great whole.” - Cam Jackson, martinfowler.com Trent Willis | Micro-Frontends React Norway
“An architectural style where independently deliverable frontend applications are composed into a great whole.” - Cam Jackson, martinfowler.com “A design approach in which a front-end app is decomposed into individual, semiindependent “microapps” working loosely together.” - Bob Myers, Toptal “A type of architecture where a web application is divided into different modules or individual functions, implemented autonomously.” - Aplyca “An architectural and organizational style (NOT a specific technology!!!) in which the front-end of the app is decomposed into individual, loosely coupled “micro apps” that can be built, tested, and deployed independently.” - AltexSoft “An approach to building applications where the front-end is broken down into smaller, independent parts, each with its own user interface and functionality. These independent parts are then integrated to form a complete application.” Trent Willis | Micro-Frontends React Norway
architecture Trent Willis | Micro-Frontends composed independent React Norway
What does it mean for apps to be independent? Trent Willis | Micro-Frontends React Norway
“…scaling frontend development so that many teams can work simultaneously on a large and complex product is even harder…[microfrontends] can increase the effectiveness and efficiency of teams working on frontend code.” - Cam Jackson, martinfowler.com Trent Willis | Micro-Frontends React Norway
“…scaling frontend development so that many teams can work simultaneously on a large and complex product is even harder…[micro-frontends] can increase the effectiveness and efficiency of teams working on frontend code.” - Cam Jackson, martinfowler.com “[Micro-Frontends] are owned by independent teams. Each team has a distinct area of business or mission it cares about and specialises in.” - Michael Geers, micro-frontends.org “Its purpose is to eliminate the dependency between work teams, which slows down development and increases the complexity of the digital product.” - Aplyca “Using this type of architecture, the monolith team gets split to separate independent teams, which helps improve scalability, code complexity, etc., as each team works on a specific feature of the application separately.” - XenonStack “A microfrontend is made of components — owned by different teams — that can be deployed independently…no single team owns the UI in its entirety.” - Semaphore Trent Willis | Micro-Frontends React Norway
What does it mean for apps to be independent? They enable teams developing the apps to work independently Trent Willis | Micro-Frontends React Norway
What are micro-frontends, really? Any application architecture where an app is composed from sub-apps so that teams can work independently Trent Willis | Micro-Frontends React Norway
If your teams are not independent, micro-frontends are failing to deliver on their promises Trent Willis | Micro-Frontends React Norway
But, aren’t they just like microservices? Trent Willis | Micro-Frontends React Norway
No. Micro-Frontends are hyphenated. Microservices are not. Trent Willis | Micro-Frontends React Norway
They sound quite similar… Trent Willis | Micro-Frontends React Norway
An architectural style that structures an application as a collection of services that are: • • • • Independently deployable Loosely coupled Organized around business capabilities Owned by a small team Trent Willis | Micro-Frontends React Norway
There are 2 important differences Trent Willis | Micro-Frontends React Norway
Microservices do not share a runtime. Micro-Frontends do. Trent Willis | Micro-Frontends React Norway
“Isolate Team Code - Don’t share a runtime, even if all teams use the same framework. Build independent apps that are self contained. Don’t rely on shared state or global variables.” - Michael Geers, micro-frontends.org Trent Willis | Micro-Frontends React Norway
Sharing a runtime makes isolation and independence more difficult Trent Willis | Micro-Frontends React Norway
Microservices do not need to deliver a seamless user experience. Micro-Frontends do. Trent Willis | Micro-Frontends React Norway
Micro-Frontends have important differences from microservices that make it harder to be independent Trent Willis | Micro-Frontends React Norway
Micro-Frontends have important differences from microservices that make it harder to live up to the hype Trent Willis | Micro-Frontends React Norway
What happens in reality? Trent Willis | Micro-Frontends React Norway
First, you decide on a technology… Trent Willis | Micro-Frontends React Norway
What technology? • Webpack Module Federation • Emerging Frameworks (single-spa, qiankun, • • piral, luigi, etc.) Framework Specific (Ember Engines, etc.) Custom (Dynamic Imports, Iframes, etc.) Trent Willis | Micro-Frontends React Norway
What technology? • Webpack Module Federation • Emerging Frameworks (single-spa, qiankun, • • piral, luigi, etc.) Framework Specific (Ember Engines, etc.) Custom (Dynamic Imports, Iframes, etc.) Trent Willis | Micro-Frontends React Norway
There is no “standard” micro-frontends technology, yet Trent Willis | Micro-Frontends React Norway
Lack of standardization means lack of best practices Trent Willis | Micro-Frontends React Norway
The pioneer tax is still high today Trent Willis | Micro-Frontends React Norway
TypeScript Integration • How do you share types for the connection • points between micro-frontends? Not a problem if truly isolated, but most apps are not Trent Willis | Micro-Frontends React Norway
A “shared” (type definition) package can quickly become a monolithic dumping ground Trent Willis | Micro-Frontends React Norway
@module-federation/typescript Trent Willis | Micro-Frontends React Norway
Complex apps could benefit the most from micro-frontends, yet they are also the most likely to run into edge cases Trent Willis | Micro-Frontends React Norway
What repository strategy? • Separate repos (multirepo) vs. monorepo • A highly consequential decision we often make implicitly Trent Willis | Micro-Frontends React Norway
Monorepo Repo / App App App App Trent Willis | Micro-Frontends Repo / App Repo / App React Norway
Monorepo Shared Repo / App App App Shared Trent Willis | Micro-Frontends App Shared Repo / App Repo / App Shared React Norway
How much code do you intend to share between apps? Trent Willis | Micro-Frontends React Norway
Sharing code and micro-frontends both intend to make development more efficient, but together they can actually make it less efficient Trent Willis | Micro-Frontends React Norway
Monorepo • Less overhead to share Multirepo • More overhead to share • • • code Requires investment in tooling/processes to keep teams independent More likely for apps to be tightly coupled, but less slow down when that happens Trent Willis | Micro-Frontends • code Tools and processes for each repo are independent Less likely for apps to be tightly coupled, but more slow down when that happens React Norway
If you can’t have dedicated support for your architecture, you probably don’t need micro-frontends Trent Willis | Micro-Frontends React Norway
Each strategy has trade-offs. Choosing the wrong one may negate the intended benefits. Trent Willis | Micro-Frontends React Norway
Isolated Runtime Dependencies • Isolation leads to duplicate dependencies • Will multiple versions running side-by-side work? Trent Willis | Micro-Frontends React Norway
The browser has non-isolated state no matter how well your micro-frontends are isolated Trent Willis | Micro-Frontends React Norway
Shared Runtime Dependencies • How will you handle (major) versions? • Shared dependencies require coordinated upgrades Trent Willis | Micro-Frontends React Norway
Isolated dependencies = Duplication Shared dependencies = Coordination Trent Willis | Micro-Frontends React Norway
How do you divide up the app? • By route, by feature, by screen section? • How large/small are the divisions? • Will the divisions survive organizational change? Trent Willis | Micro-Frontends React Norway
Profile Trent Willis | Micro-Frontends Feed Settings React Norway
Profile Feed Settings Avatar Trent Willis | Micro-Frontends React Norway
Profile Feed Settings Avatar Trent Willis | Micro-Frontends React Norway
Post Summary Profile Settings Feed Avatar Trent Willis | Micro-Frontends React Norway
Post Summary Feed Settings Profile Feed Settings Avatar Trent Willis | Micro-Frontends React Norway
Deciding how to divide an app so that teams can operate independently while maintaining consistency is a hard problem Trent Willis | Micro-Frontends React Norway
No technical strategy/architecture will fix organizational dysfunction Trent Willis | Micro-Frontends React Norway
Handling troubleshooting • Which app is responsible for handling • uncaught errors? How does the correct team get notified about errors? Trent Willis | Micro-Frontends React Norway
Handling errors consistently and “near” where they occurred requires more than just error boundaries Trent Willis | Micro-Frontends React Norway
Dealing with optimization • Whose responsibility is it to monitor the • performance of the composed app? Who owns optimizing the app when things get slow? Trent Willis | Micro-Frontends React Norway
Separate builds and separate repos make it difficult to analyze performance characteristics holistically Trent Willis | Micro-Frontends React Norway
Every division in an app can add complexity Trent Willis | Micro-Frontends React Norway
Every decision in an app can add complexity Trent Willis | Micro-Frontends React Norway
Every decision in an app can add complexity, be intentional and consider the long-term impact Trent Willis | Micro-Frontends React Norway
So, do micro-frontends live up to the hype? Trent Willis | Micro-Frontends React Norway
They can with the right strategy Trent Willis | Micro-Frontends React Norway
Testing (especially end-to-end) Authentication & Authorization Privacy Availability & Resiliency Analytics Accessibility And more… Trent Willis | Micro-Frontends React Norway
We are still figuring out “best practices” for micro-frontends Trent Willis | Micro-Frontends React Norway
My recommendation… • Use Module Federation • In a monorepo • With as few divisions as possible • With as little shared code as possible • Supported by an infrastructure team Trent Willis | Micro-Frontends React Norway
Keep your goals in mind when solving problems Trent Willis | Micro-Frontends React Norway
Micro-Frontends promise to make building complex applications easier and your team more efficient Trent Willis | Micro-Frontends React Norway
Micro-Frontends can make building complex applications easier and your team more efficient Trent Willis | Micro-Frontends React Norway
Micro-Frontends can make building complex applications easier and your team more efficient but require thoughtful investment Trent Willis | Micro-Frontends React Norway
A buzzword amongst buzzwords, “micro-frontends” have emerged as a popular approach for building complex web applications in recent years. But is it all it’s hyped up to be?
Let’s take a detailed look at the complexities of micro-frontend architecture and discover its pros and cons. We’ll learn about several different approaches to implementing micro-frontends and whether or not they could benefit you. You will walk away with a deeper understanding of micro-frontends as an architecture and, hopefully, practical ideas to apply to whatever architecture your application uses.
Here’s what was said about this presentation on social media.
for free. You
can too.