Applying Strategic Design in Frontend Architectures: Moduliths and Micro Frontends

(This is a hands-on lab with limited capacity)

Frontends for business applications—especially those implemented as single-page applications—are becoming increasingly complex. These frontends are now far more than just receivers of data transfer objects and are often developed by multiple teams. To manage this complexity, a sound vertical modularization is essential. Ideas from Strategic Design have proven to be effective for this purpose.

After a brief discussion of which concepts from Strategic Design help define boundaries in the frontend (and which don’t fit well), we apply these principles at the code level. We start with a frontend Modulith that uses linting to enforce boundaries and to make sharing decisions explicit. This allows us to represent bounded contexts and/or surface models directly in the code. We then move on to a Micro Frontend architecture, where boundaries are even more explicitly enforced.

By the end of the session, you'll understand how to apply Strategic Design principles in the frontend—and how to implement them in both frontend Moduliths and Micro Frontend architectures.

Prerequisites

Please bring a laptop and install:

• Node.js in the current LTS version
• Angular CLI (npm i -g @angular/cli)
• Nx CLI (npm i -g nx)
• Visual Studio Code (free) or WebStorm/IntelliJ (commercial)
• Git

--- Remarks --- I have comprehensive lab descriptions and solution branches; therefore, I can usually handle a larger audience, even in such interactive settings.