Micro-Frontends Under The Microscope

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