This is the final episode of 2024, and it’s been a busy holiday season! From Observable Standardization to Signal-based Forms and Router integration in DevTools, and even more.
Observables Standardization
There are developments that Observables—and even Signals—are becoming Web Standards. Dominic Farolino is leading the implementation and showcased what’s currently possible and what’s planned at TechStackNation.
There will be differences compared to RxJS Observables. For instance:
Alex Rickabaugh and Pawel Kozlowski from the Angular team continued the discussion with Dominic, particularly around Observables vs. Signals.
Alex noted that Observables represent events at specific points in time, while Signals represent state that is always available. He also highlighted that BehaviorSubject is actually used to hold state. That is not eventing and will probably not be part of the standard.
youtube.com
WICG
/
observable
Observable API proposal
Observable
This is the explainer for the Observable API proposal for more ergonomic and
composable event handling.
Introduction
EventTarget integration
This proposal adds a .when() method to EventTarget that becomes a better
addEventListener(); specifically it returns a new
Observable that adds a new event listener to the target
when its subscribe() method is called. The Observable calls the subscriber's
next() handler with each event.
Observables turn event handling, filtering, and termination, into an explicit, declarative flow
that's easier to understand and
compose
than today's imperative version, which often requires nested calls to addEventListener() and
hard-to-follow callback chains.
Example 1
// Filtering and mapping:
element
.when('click')
.filter((e) => e.target.matches('.foo'))
.map((e) => ({ x: e.clientX, y: e.clientY }))
.…
View on GitHub
State of JavaScript 2024
The results of the State of JavaScript 2024 survey are out, and Angular performed quite well:
Liquid error: internal
NgRx 19
NgRx, the most popular state management library for Angular, released version 19. Highlights include:
Announcing NgRx 19: NgRx Signals Features, Action Signals, and more!
Brandon Roberts for NgRx ・ Dec 19 '24
#angular
#ngrx
Signal Forms - First Git Branch
Forms are a central part of many Angular applications, and an official Signal-based solution is eagerly awaited.
A branch is now available, though Matthieu Riegler from the Angular team explained that the project is still in an early brainstorming phase. Expect significant changes before it reaches an RFC.
GitHub Branch
Thread on Reddit
// Detect dark theme
var iframe = document.getElementById('tweet-1868738996303806807-873');
if (document.body.className.includes('dark-theme')) {
iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1868738996303806807&theme=dark"
}
Router DevTools
Starting with Angular 19.0.5, the Angular DevTools extension now provides router insights. It shows which routes are lazy-loaded, eagerly loaded, and currently active.
Watch Demo
Rx Virtual View
Virtual Scrolling is commonly used to optimize lists, but RxVirtualView extends this technique to any element.
It uses the IntersectionObserver to display placeholders for non-visible regions, only rendering views when they come into view.
RxVirtualView is now available with rx-angular/template v19.1.
Learn More
More...
Observables Standardization
There are developments that Observables—and even Signals—are becoming Web Standards. Dominic Farolino is leading the implementation and showcased what’s currently possible and what’s planned at TechStackNation.
There will be differences compared to RxJS Observables. For instance:
- The standardized Observable might be hot, meaning it multicasts like the share operator.
- Cancellation will use the AbortSignal, similar to the native fetch, instead of unsubscribe.
- In some cases, the Observable may return a Promise when it completes.
Alex Rickabaugh and Pawel Kozlowski from the Angular team continued the discussion with Dominic, particularly around Observables vs. Signals.
Alex noted that Observables represent events at specific points in time, while Signals represent state that is always available. He also highlighted that BehaviorSubject is actually used to hold state. That is not eventing and will probably not be part of the standard.
youtube.com
WICG
/
observable
Observable API proposal
Observable
This is the explainer for the Observable API proposal for more ergonomic and
composable event handling.
Introduction
EventTarget integration
This proposal adds a .when() method to EventTarget that becomes a better
addEventListener(); specifically it returns a new
Observable that adds a new event listener to the target
when its subscribe() method is called. The Observable calls the subscriber's
next() handler with each event.
Observables turn event handling, filtering, and termination, into an explicit, declarative flow
that's easier to understand and
compose
than today's imperative version, which often requires nested calls to addEventListener() and
hard-to-follow callback chains.
Example 1
// Filtering and mapping:
element
.when('click')
.filter((e) => e.target.matches('.foo'))
.map((e) => ({ x: e.clientX, y: e.clientY }))
.…
View on GitHub
State of JavaScript 2024
The results of the State of JavaScript 2024 survey are out, and Angular performed quite well:
- Usage grew from 45% to 50%.
- Positive sentiment increased as well.
- However, interest dropped from 23% to 17% — perhaps React developers haven’t heard about Incremental Hydration yet 😅!
Liquid error: internal
NgRx 19
NgRx, the most popular state management library for Angular, released version 19. Highlights include:
- The Global Store can now dispatch actions based on Signal changes.
- The SignalStore allows properties to be added dynamically to the SignalStore class.
Announcing NgRx 19: NgRx Signals Features, Action Signals, and more!
Brandon Roberts for NgRx ・ Dec 19 '24
#angular
#ngrx
Signal Forms - First Git Branch
Forms are a central part of many Angular applications, and an official Signal-based solution is eagerly awaited.
A branch is now available, though Matthieu Riegler from the Angular team explained that the project is still in an early brainstorming phase. Expect significant changes before it reaches an RFC.
GitHub Branch
Thread on Reddit
// Detect dark theme
var iframe = document.getElementById('tweet-1868738996303806807-873');
if (document.body.className.includes('dark-theme')) {
iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1868738996303806807&theme=dark"
}
Router DevTools
Starting with Angular 19.0.5, the Angular DevTools extension now provides router insights. It shows which routes are lazy-loaded, eagerly loaded, and currently active.
Watch Demo
Rx Virtual View
Virtual Scrolling is commonly used to optimize lists, but RxVirtualView extends this technique to any element.
It uses the IntersectionObserver to display placeholders for non-visible regions, only rendering views when they come into view.
RxVirtualView is now available with rx-angular/template v19.1.
Learn More
More...