NG/JS Rome Conference MMXXVI

Enterprise applications need to remain maintainable and extensible over the long term. This workshop shows you how to achieve this goal with modern Angular.

We combine cutting-edge features such as Signals, Resources, the SignalStore, and Signal Forms with proven concepts like Strategic Design (DDD), vertical architectures, as well as Monorepos, Moduliths, and Micro Frontends.

Then we use the SignalStore, Signal Forms, as well as the Router to provide context to an AI assistant that we add to our case study. For this, we discuss function calling in the frontend and the creation of dynamic UIs.

By the end of this workshop, you’ll be able to design and implement sustainable solutions using Angular’s latest innovations and evaluate the pros and cons of different architectural approaches for your projects.

Block 0: Project Setup

• Vertical architectures and Strategic Design (DDD)
• Latest features in Sheriff and Nx for building modular solutions
• Current trends for Angular-based Micro Frontends

Block 1: Reactive Design with Signals

• Reactive thinking and principles of reactive design
• Understanding the Signal Graph
• Synchronous and asynchronous projections with computed and the Resource API
• Data sinks in the reactive flow: Templates and Effects

Block 2: Lightweight State Management with the NgRx SignalStore

• The SignalStore and your architecture
• SignalStore and the Resource API
• Mutation APIs as the counterpart to the Resource API
• Custom extensions for recurring use cases
• Communication between multiple SignalStores
• Implementing common state patterns with the SignalStore

Block 3: Signal Forms

• Signal Forms within the reactive data flow
• Standard schemas and Zod for enforcing data contracts
• Integrating Signal Forms with the SignalStore

Part 4: AI Assistants

• Patterns and prompts for AI assistants with Hashbrown
• Using NgRx SignalStore, Signal Forms, and the Router as context sources
• Angular services for assistants: tool-calling in the frontend
• Enabling the assistant to answer questions with dynamic UIs

Target Group: Developers with Angular experience who want to design and build modern Angular solutions that remain maintainable in the long run.

Prerequisites: Please install the following tools for the hands-on labs:

Node.js (current LTS version) Angular CLI (npm i -g @angular/cli) Nx CLI (npm i -g nx) Visual Studio Code (free) or WebStorm/IntelliJ IDEA (commercial)