The Road to Angular Today Milestones, Mistakes & Momentum

Slide 1

Slide 1 text

The Road to Angular Today Milestones, Mistakes & Momentum Game of Codes, 2. November 2025 RainerHahnekamp

Slide 2

Slide 2 text

About Me... https://www.youtube.com/ @RainerHahnekamp https://www.ng-news.com https://github.com/softarc-consulting/sheriff ● Rainer Hahnekamp ANGULARarchitects.io NgRx Core Team ● Developer / Trainer / Speaker @RainerHahnekamp Workshops NgRx • Testing

Slide 3

Slide 3 text

RainerHahnekamp Agenda Part II: The Code Part I: The Road

Slide 4

Slide 4 text

About Me... https://www.youtube.com/ @RainerHahnekamp Ng-News Sheriff Rainer Hahnekamp ANGULARarchitects.io Developer / Trainer / Speaker @RainerHahnekamp NgRx Testronaut

Slide 5

Slide 5 text

RainerHahnekamp Part 1: Angular over Time

Slide 6

Slide 6 text

RainerHahnekamp 1. Party Time (2010 - 2014) ● AngularJS ● Hyped ● Not used by any Google Department ● "Side-Project" ● Lots of Community-Work

Slide 7

Slide 7 text

RainerHahnekamp 2. Getting Serious (2014 - 2016) ● Angular 2 ● Rewrite of the Framework ● Rewrite of Applications ● Used internally by Google Ads ○ Funding ○ Static Typing required ● Deadline too Early

Slide 8

Slide 8 text

RainerHahnekamp 3. The Stalling Years (2016 - 2022) ● Ivy ● Technical Debts of Angular 2 ● 2nd Rewrite of Framework ● Backward-Compatibility ● No New Features for 3,5 Years ● Community started drifting away

Slide 9

Slide 9 text

RainerHahnekamp 4. Catching Up (since 2022) ● New Generation of Angular Team ● Firework of New Features ● Focus on Lightweight ● Introduction of Signals

Slide 10

Slide 10 text

RainerHahnekamp Full Commitment (since 2024) ● Wiz open-sources into Angular ● Angular becomes Google-critical Infrastructure ● Long-term stability & Funding ● "If it's good enough for Google…"

Slide 11

Slide 11 text

RainerHahnekamp Main Learnings ● Full Commitment of Google ● Angular Team as "Internal Support Team" for Google ● Simpliﬁcation ○ Signals over RxJS ● No "Angular Way" of doing Things ○ Opening up to the Ecosystem ○ For example: Selectorless, Standalone, Vite ● Communication with the Community

Slide 12

Slide 12 text

RainerHahnekamp 1. Partytime 2. Getting Serious 3. The Stalling Years 4. Catching Up 5. Full Commitment Angular's Story

Slide 13

Slide 13 text

https://x.com/synalx/status/1882879962547659078

Slide 14

Slide 14 text

RainerHahnekamp What can we expect for the future?

Slide 15

Slide 15 text

RainerHahnekamp AI Support ● API-Designed for LLM & Humans ● Web Codegen Scorer ● Angular MCP Server

Slide 16

Slide 16 text

Editor Preview Both @Component class MyCheckbox { constructor( private isChecked = model(false) ) {} toggle() { this.isChecked.update(c => !c); } template = ng` `; } You may have seen some of our early brainstorming const isChecked = model(false); function toggle() { isChecked.update(c => !c); } function MyCheckbox({ isChecked = model(false), }) { function toggle() { isChecked.update(c => !c); } return ng` `; } Ng-Poland 2024

Slide 17

Slide 17 text

Slide 18

Slide 18 text

RainerHahnekamp Part 2: In-Depth

Slide 19

Slide 19 text

RainerHahnekamp Main Areas of Innovation SSR & Hydration Reactivity with Signals

Slide 20

Slide 20 text

RainerHahnekamp a b c d e State Events (Observables, Callbacks) "Event-based" Change Detection / Synchronization (zone.js)

Slide 21

Slide 21 text

RainerHahnekamp a b c d e State (Signals) Events (Observables, Callbacks) "State-based" Change Detection / Synchronization (Signals)

Slide 22

Slide 22 text

RainerHahnekamp Component Tree DOM Submit Cancel zone.js Handled DOM Events Asynchronous Tasks Change Detection with zone.js

Slide 23

Slide 23 text

RainerHahnekamp Component Tree DOM Submit Cancel Change Detection without zone.js (zoneless) async Pipe Signal Change Handled DOM Event Immutable Property Binding manually run markForCheck()

Slide 24

Slide 24 text

RainerHahnekamp Component Tree DOM Submit Cancel Future Change Detection Signal Components Signal Change

Slide 25

Slide 25 text

Show Time

Slide 26

Slide 26 text

RainerHahnekamp Initial Loading Performance

Slide 27

Slide 27 text

RainerHahnekamp Performance Options ● Faster Execution ● Smaller Bundle Sizes ● Hydration Client Server Submit Cancel Only static Classic Hydration Interactive Browser Application Step 1: Server-Side Rendering Browser Application Application Step 2: Hydration

Slide 28

Slide 28 text

RainerHahnekamp Incremental Hydration

Slide 29

Slide 29 text

RainerHahnekamp Performance Options ● Faster Execution ● Smaller Bundle Sizes ● Hydration Client Server Submit Cancel Only static Incremental Hydration: Trigger-based Hydration Interactive Browser Application Step 1: Server-Side Rendering Browser Application Application Step 2: Hydration

Slide 30

Slide 30 text

RainerHahnekamp Performance Options ● Faster Execution ● Smaller Bundle Sizes ● Hydration Client Server Submit Cancel Only static Interactive Browser Application Step 1: Server-Side Rendering Browser Application Application Step 2: Hydration Incremental Hydration: Trigger-based Hydration

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text