Angular Conference 2022 (Warsaw & Online)
Learn from the BestMeet Michael Egger-Zikes
Michael Egger-Zikes
Trainer & Consultant, ANGULARarchitects.io | Austria
Talk
Multi Version Micro Frontends - Solutions for Routing & State Management
Today, we have solid APIs to create Micro Frontends with Angular thanks to Webpack 5 and community projects. An enterprise-scale application can be split into self-contained Micro Apps with independent build and deployment schedules. Even different dependency versions or frameworks are supported. Nevertheless, to support cross-version and cross-technology Micro Frontends, a solid shell infrastructure is required.
We need to synchronize different Router instances, where each one usually overwrites the current URL. Another challenge is State Management across Micro Frontends.
This talk will provide solutions on how to implement a mature Micro Frontend platform with an Angular App Shell that coordinates complex Routing and State Management in a multi version and technology architecture.
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
Wow, what a journey. This year, Angular already turns 6 years old. Of course, during these years it evolved a lot. Hence, it’s time to have a closer look to recently added modern features that allow for more modern, fresh, and lightweight architectures.
In this interactive workshop, we start with investigating the brand-new Standalone Components and migrate an existing Angular-Application to this innovation. We show how they work together with a professional Nx Workspace and Module Federation for building Micro Frontends and dramatically speeding up the build process.
Also, we discuss the new typed Forms and add it to our case study as well. Then, we develop some Nx Generators and Schematics for the Angular CLI allowing us to automate repeating and boring tasks related to the implementation of our architecture.
Furthermore, we introduce the NGRX Component Store as well as some advanced NGRX-Patterns. By the end you have a case study that shows how a modern Angular application can look like.
Technical Prerequisites for the Workshop:
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) Optionally install git
- https://git-scm.com
- To clone the repo that I will provide at the begin of the workshop
- Alternatively the ZIP file download would work as well
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)