Episode 23/26: New Control Flow, Angular 17, AnalogJS, "Developer Preview"
Tags: angular, javascript, programming, webdev
Published: 2023-07-05 21:13:09

We had Alex Rickabaugh, talking about the need for a new control flow syntax. Minko Gechev confirmed the release plan for Signal-based components in Angular 17 as a developer preview. Brandon Roberts gave an update on AnalogJS and we finally got a definition for "Developer Preview".

{% embed https://youtu.be/LtwMXO-gTys %}

## Alex Rickabaugh: The need for a control flow syntax

Alex Rickabaugh, tech lead of the Angular framework, gave a thorough explanation about the need for a new control flow syntax.
Currently, we use the structural directives `*ngIf`, `*ngFor`, and `*ngSwitch` for the control flow.

Angular doesn't execute those imperatively, like an `if` statement in JavaScript. Instead, they act as some kind of metadata for the compiler. The compiler splits up the component into multiple views. A view stands for a set of DOM elements which are static. The control flow directives act as a criterion a view's creation.

In addition, the compiler generation an `<ng-template>` and applies the structural directives as a normal property binding on it.

The current approach has some issues though. 
- The syntax is not very developer friendly,
- The type check is incomplete. This is especially the case for the `else` statement.
- We need to use an `<ng-container>`, if we want to have a directive but don't want to create a separate DOM element. The same is true when we want to use multiple directives. We can apply just one to a DOM element (or <ng-container>).
- Finally, if multiple directives need to work together, it also can become quite hard.

The new RFC for control flow will fix those issues. It will be an extension of the template syntax.

According to Alex, one of the downsides of the upcoming approach is that they move away from the possibility of writing these kind of functionalities on your own (he called it user space). The new control flow will be a native feature of the template.

The main takeaway though is that there is a chance that `*ngIf`, `*ngFor`, and `*ngSwitch` might become deprecated. When and how, is a future topic. But Angular wants to have one way of doing central things.

{% embed https://www.youtube.com/live/ZevmaM-TupU %}

## Minko Gechev on Angular Air

Minko Gechev, Angular product lead, was a guest at the Angular Air podcast. He confirmed the plan to release Signal-based components in Angular 17 as a developer preview. The signals library, introduced in Angular 16, will already become stable.

The Signal-based component is a new type that runs without zone.js. The recommendation is to start using signals in performance-critical parts of your application.

It is not possible to come up with an automatic migration to Signals. 

{% embed https://www.youtube.com/watch?v=3_QBBAZXJ-I %}

## Brandon Roberts on AnalogJS

Brandon Roberts summarised the current status of Analog.js. This meta-framework adds features like Vitest, File-based routing, API routes, and server-side rendering and generation out of the box.

{% embed https://brandonroberts.dev/blog/posts/2023-06-28-fullstack-angular-with-analog/ %}

## Meaning of "Developer Preview" & Future of Forms

In the latest recordings of the ng-conf, we got two new insights.

---

A feature marked as a "developer preview" is not a beta version. It is fully functional, and pre-stable but it could happen that the API might change.

{% embed https://youtu.be/rnvKzwzkEuI?t=976 %}

---

Second, a forms overhaul is a mid-term goal. Currently, the Angular team doesn't know yet in which direction it will go. It might even be that Reactive and Template might come together again.

{% embed https://youtu.be/ll-fsZNhSTY?t=901 %}