Typically, a company strives for a single-version, single-technology frontend stack. Because of autonomous teams, mergers and acquisitions the frontend platform team may face a situation, where different frameworks need to be supported while a unified user experience has to be guaranteed.
This talk will discuss the current challenges of Multi Framework solutions and demonstrates how to bring them together into one integrated UI by using build tools like esbuild and Native Federation.
Manfred Steyer & Michael Egger-Zikes
We use Angular’s latest innovations in this interactive workshop to build a modern and maintainable architecture. We start with Standalone Components and learn how to structure a large application with them using a Mono Repo and Strategic Design – a discipline from Domain-driven Design (DDD). We discuss categorizing the individual parts of our application and how to enforce our architecture with tools such as Nx or Sheriff. On top of our Strategic Design, we implement a Micro Frontend Architecture with Module Federation.
Then, we discover how Angular’s new Signals fit our modern architecture. We discuss fine-grained change detection and implement options for state management with NGRX and Signals. Also, we show how to combine the simplicity provided by Signals with the power of RxJS for providing a reactive UX. Finally, we discuss how the new Signal component will help to simplify our architecture further and how they work together with traditional components.
a) Node.js installed
- LTS version or higher
b) Angular CLI
- npm install -g @angular/cli@latest
c) Test with “npm -v” and “ng v” from the command line whether npm and then Angular CLI work
d) Nx CLI
- npm install -g nx@latest
e) A modern browser like the current Chrome version
f) An IDE with Angular support like Visual Studio Code (free) or WebStorm/IntelliJ (commercial)
g) Please install git
- To clone the repo that I will provide at the begin of the workshop
h) We will use the following internet resources, so they need to be accessible for everyone:
- ANGULARarchitects.io (http://angulararchitects.io)
- npm Registry (https://registry.npmjs.org)
- GitHub (https://github.com)