JavaScript Conference 2023 (Warsaw & Online)
Learn from the BestMeet Michael Egger-Zikes
Michael Egger-Zikes
Trainer & Consultant, AngularArchitects.io | Austria
Talk
Managing a Multi Framework Application
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.
So far, Webpack Module Federation helped with implementing such scenarios, however a change in the JavaScript ecosystem makes this challenge even harder: a new generation of build tools emerges and will very likely replace Webpack - a new API to compose a Micro Frontend architecture is required.
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.
About Michael Egger-Zikes
Michael Egger-Zikes is an experienced software architect, trainer, and consultant with a focus on Angular in the field of business applications. As a member of the ANGULARarchitects expert network, he has supervised and implemented large enterprise-scale Angular projects in the public and private sectors.
As an external (part-time) lecturer, he also teaches this topic at a university of applied sciences in Graz, Austria. The business informatics graduate has a lot of experience with software engineering and automating business processes.
Workshop
Trainers:
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
- https://nodejs.org
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
- https://git-scm.com
- 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)