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.
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
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
- 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)
Sign up to receive updates about NG Poland, including workshops, speaker previews, ticket launches, NG Awards, Behind the Code Magazine, CFP details and other exclusive content. We won’t spam you and will only send you emails we genuinely think you’ll find interesting. You can unsubscribe at any time and you can find more information here.