Ng-News 24/43: Angular's Future Authoring Format

#webdev #javascript #angular #programming

At "JetBrains JavaScript Day", Jeremy Elbourn presented Angular’s long-term improvements and hinted at new component formats. Nx version 20 also arrived and the buzz around the upcoming resource function continues.

New Authoring Format

Recently, hydration and Signals have dominated Angular discussions—but last week took a different path.

At the JetBrains JavaScript Days, Jeremy Elbourn, Angular’s project lead, presented a talk titled “Evolving Angular for the Long Run.” He discussed current improvements, such as Signals and Hydration, and emphasized that the Angular team is learning from past choices to create a framework suited for the next decade.

To close his talk, Jeremy introduced three new theoretical formats for components, which look notably different from the current component style.

Here's a "TypeScript-first" version where a component is a function:

// TypeScript-first
function HomeComponent(title = input('')) {
  const status = signal('');
  const handleClicked = () => {
    status.set('You clicked me');
  }

  return ng `
    <h1>Welcome {{ title() }}</h1>
    <p>Status: {{ status() }}</p>
    <button on:click="handleClicked()">Change Status</button>
  `
}

Another option is an HTML-first approach:

<script name="HomeComponent" type="ts">
const title = input('');
const status = signal('');

function handleClicked() {
  status.set('You clicked me');
}
<script>

<h1>Welcome {{ title() }}</h1>
<p>Status: {{ status() }}</p>
<button on:click="handleClicked()">Change Status</button>

While still conceptual, postings of Angular team members like Matthieu Riegler, Alex Rickabaugh, and Pawel Koszlowski on X, where they were actively gathering feedback, makes these potential changes feel more concrete.

Nx 20

Also notable, Nx released version 20, with key updates for Angular, including a switch to ESLint’s flat config and an option to use Rspack, a Rust-based bundler. The nx release tool for release management received updates too, with new features like release groups to streamline publishing multiple packages simultaneously.

youtube.com

New Content on upcoming Signal functions

The upcoming resource function, designed to integrate asynchronous tasks with Signals, remains a hot topic. Though it’s set for Angular 19 as an experimental feature, new content continues to emerge, with recent contributions from Manfred Steyer’s article and a video by Joshua Morony.