Scalable Architecture
& Modern Reactivity with AI

Agenda

• Date: 09.10
• Duration: 8 hours
• Workshop Lead: Fanis Prodromou (GDE)

1. 01

   Nx Architecture: Building Scalable Monorepos

   • The Modulith Pattern – Organize apps into self-contained “Moduliths” for scalability.
   • Layered Architecture – Master separation of concerns using Feature, UI, and Data-Access layers.
   • Workspace Mastery – Efficiently manage the apps vs libs structure using the CLI and Console.
   • Lazy Loading – Configure clean routing using Feature Libraries as entry points.
2. 02

   Enforcing Boundaries & Visualizing Dependencies

   • Dependency Graph – Visualize architecture and data flow in real-time with nx graph.
   • Affected Analysis – Identify exactly which projects are impacted by code changes.
   • Architectural Rules – Use tagging and ESLint constraints to prevent circular dependencies.
   • Intentional Failure – Debug linter errors to understand strict code boundary enforcement.
3. 03

   Signals Core & Fine-Grained Reactivity

   • Signal Fundamentals – Master the basics of signal() vs variables vs Observables.
   • State Derivation – Use computed() for automatic, memoized state calculations.
   • Side Effect Management – Manage DOM updates and logging cleanly with effect().
4. 04

   Advanced Signals & Data Flow

   • Declarative I/O – Implement the modern input() and output() APIs.
   • Resettable State – Manage derived state updates with linkedSignal.
   • Async Data Flow – Handle async loading states using rxResource or toSignal.
   • Signal Forms – Build reactive forms using the experimental form() API.

(NEW) AI topics

1. 01

   Workspace Intelligence & The “Context Gap”

   • The “Context Gap” Explained: Why standard, text-only prompts fail in monorepos because they see individual files but miss the high-level architecture.
   • Instant Architectural Understanding: Using the nx graph as a “Source of Truth” to feed AI agents a structured map of 150+ libraries.
2. 02

   Framework Intelligence: Signals & Angular MCP

   • Powering Modern Angular: Installing framework-specific Agent Skills and MCP Servers.
   • The Synergy Model: Using Nx as the “Map” to find code and the Angular MCP as the “Expert Tools” to refactor it.
   • Future-Proofing the Stack: Using automated tools to modernize legacy code and stay up to date with modern reactivity.
3. 03

   AI-Assisted Signal Migrations

   • Automated Refactoring: Using AI to safely convert legacy RxJS streams and @Input() decorators into modern Signals, input(), and output() APIs.
   • Zoneless Readiness: Delegating the heavy lifting of state migration to agents that respect your workspace’s Architectural Guardrails and Tags.
   • Safe Scaffolding: Using the nx-generate skill to create new features with signal-based boilerplate automatically.
   • Workflow Blueprints: Real-world examples of automated discovery, architectural auditing, and mass Signal migrations.

Takeaways

1. 

   Architect Scalable "Moduliths" with Nx

   Move beyond simple file organization. Learn to structure your workspace into Feature, UI, and Data-Access layers to create a clean and maintainable Modulith.

2. 

   Visualize & Enforce Boundaries

   Stop architectural rot. Use the Nx Graph to visualize dependencies in real-time and configure ESLint rules to prevent business logic from leaking into your UI components.

3. 

   Master Fine-Grained Reactivity

   Understand the shift from Zone.js to Signals. Learn how the Signal Graph works and how to use computed(), linkedSignal(), effect() to update only what changes, when it changes.

4. 

   Modernize Component I/O & Forms

   Say goodbye to @Input() decorators. Implement the new Signal-based input(), output() and model() APIs for cleaner component communication and integrate the new reactive Signal Forms.

5. 

   Simplify Data Fetching with Resources

   Reduce RxJS boilerplate. Learn to use the new rxResource patterns to handle asynchronous data loading, error states, and reactivity without complex pipe chains.

6. 

   Master Declarative Data Flows

   Stop manually updating data. Learn to chain Signals together so your application state automatically stays in sync without writing complex code.

Your Trainer

Fanis Prodromou

Google Developer Expert

Google Developer Expert (GDE) for Angular and Senior Front-End Developer. He is passionate about sharing his knowledge through his YouTube channel, speaking at conferences and meetups, and technical articles. He also stays current in the ever-evolving tech world by attending conferences and experimenting with new technologies, and is a co-organizer of the Angular Athens meetup in Greece.

Get your tickets

Join us for an online workshop. Secure your spot today!

FAQ