Stairway to Heaven - Scaling Frontends the Right Way

Are micro frontends the best way to scale your app? This talk explores a powerful alternative: the modular monolith.

#1about 6 minutes

Understanding the purpose and benefits of micro-frontends

Micro-frontends are a software trend that enables scaling by splitting a large application into smaller parts developed by independent, agile teams.

#2about 2 minutes

Exploring the challenges and downsides of micro-frontends

Adopting micro-frontends can lead to challenges like increased bundle sizes, browser version mismatches, and the operational overhead of managing npm packages.

#3about 4 minutes

Introducing the modular monolith as a practical alternative

The modular monolith, managed within a monorepo, offers a balanced approach by ensuring version consistency and simplifying code sharing across the application.

#4about 6 minutes

Using Nx to manage and scale a frontend monorepo

The Nx toolset helps manage monorepos by visualizing dependencies and enforcing architectural boundaries between different domains using configurable linting rules.

#5about 7 minutes

A practical demonstration of an Nx workspace

This live demo showcases key Nx features, including generating a dependency graph, defining a library's public API, and enforcing domain boundaries with linting.

#6about 4 minutes

A strategic library structure for scaling applications

Organize monorepo libraries into distinct categories like feature, UI, domain, and utility to improve clarity and enforce strict access rules between layers.

#7about 2 minutes

Combining monorepos with micro-frontends for the best results

A hybrid approach uses a monorepo to develop isolated micro-frontends, gaining benefits like shared versioning and faster builds while maintaining deployment independence.

#8about 9 minutes

Q&A on monorepo processes and common challenges

The Q&A session addresses practical concerns such as coordinating package updates, assigning ownership of shared libraries, and managing circular dependencies.