One of the most popular new features of Angular is signals. As a lightweight, reactive building block, Signals allow fine-grained change detection and increase the data binding performance.
As is so often the case, the basics are quickly explained. But only then do the really interesting questions arise: How and where should I use Signals in my application? Do I need a store? How do I really get the advertised fine-grained and Zone-less change detection? Do I need to work with Immutables? How to use signal components together with traditional ones?
These questions are answered here with some examples! In the end, you know how to integrate Signals into your modern Angular architecture.
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)
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.