Ng-News 26/22: TypeScript 7.1, Angular Native and Polymorpheus

#angular #webdev #programming #frontend

Angular’s compiler and TypeScript 7.1, plus Angular Native for mobile apps. Also: Polymorpheus for flexible UI components and upcoming Angular conferences.

Angular’s Compiler and TypeScript 7.1

Angular code is not directly compiled by TypeScript, but by an Angular compiler which sits on top of TypeScript.

TypeScript 7 is the current version and the first version which has been ported to Go. It promises up to 10 times faster compilation. Such a big change to TypeScript therefore also has a huge impact on the Angular compiler.

The Angular compiler uses TypeScript's programmatic API. It imports and uses it like a library. TypeScript 7.0, though, doesn't have a programmatic API, but it is compatible with TypeScript 6, which means we can continue using TypeScript 6's programmatic API. So far so good.

Angular imports TypeScript as a library and calls its programmatic API. Simplified version.

With TypeScript 7.1, a new programmatic API is expected to become available. Angular will need that one to run on 7.1.

Here's the problem. Angular's compiler is written in TypeScript but it now has to access a compiler which is written in Go. This means we have a language boundary. The new interop API will fix that, but it comes without the TypeScript transformer API, which Angular uses to rewrite our code.

That's why Angular will use another very popular tool, Oxc, which is written in Rust and already used by Vite and other widespread tools. Roughly summarized, Angular uses Oxc throughout its various steps to analyze our code and prepare compilation tasks. Angular has two major pipelines. One which prepares our code by transforming it to a final form, and another one where it runs the type-check on the templates. At both ends, we will benefit from the newly gained speed.

Simplified version of the two compiler paths, adapted from the episode animation.

At the time of this writing the PR has already been merged into main. So we might already get a version of it in the upcoming version 22.3 of Angular.

blog.angular.dev

Angular compiler PR

Angular Native

Developing native applications for mobile hasn't been the greatest joy for Angular developers. We have Ionic, but it uses a WebView as a middle layer to display web UI. NativeScript does render truly native UI for both Android and iOS. But we never had something like React Native with its production-proven Fabric renderer and an ecosystem like Expo, which supports the whole development lifecycle.

On 29 September, this changed. Angular Native was released by Ashley Hunter and has gained some traction in terms of contributors. It is an independent community project and is currently in alpha.

The great thing is that its native rendering isn't built from scratch but uses React Native under the hood. That is possible because React Native's Fabric rendering infrastructure can be driven without React. In a typical React Native app, React's reconciler determines the changes to the component tree and passes the rendering work to Fabric. Angular Native drives Fabric without React's component tree or reconciler.

Ashley Hunter made use of that separation and replaced Angular's renderer, which targets the DOM, with a native renderer that uses React Native's Fabric. Switching the renderer to a non-DOM target is not new. Chau Tran applies the same approach in Angular Three.

The framework layer changes; Fabric and the native UI layers remain. Simplified version.

For us, that means we build on a production-proven native renderer, which is well maintained, and on top we have Angular Native as a project that integrates Angular via its official renderer extension points. The integration itself, though, is still in alpha.

Since it is native and not DOM - again, Ionic uses a WebView - we also cannot just use existing components or UI libraries that depend on the browser. For native UI, we have to use the native ones. Familiar tags like div and p do work, but they are mapped to native views and text. There is an exception, though: dom-component lets us embed existing Angular web components, but then that part runs in a WebView. The logic, though, can stay as long as it doesn't depend on browser APIs.

Angular Native also went the extra mile and integrated Tailwind, the Angular router, hot reload, and a testing library. It supports the React Native build environment with the bundler Metro and Expo, which is somewhat like what Nx or Angular CLI is to Angular, but goes further with cloud builds, app-store submission, and updates. So Angular doesn't just run on top of React Native, it also unlocks access to its ecosystem of native modules and tooling. React components and hooks, though, don't just work in Angular.

ng-native.com

Polymorpheus

If you're designing a UI library for generic use, you have to support different use cases, and that can become complicated. For example, an input might start as a simple string. But then a caller needs a function which receives the context for that particular use. Or your users want to display full HTML instead - or even a whole component. Think of a tooltip, for example, where you might have a simple title. Then you use that tooltip inside a loop and need access to the current element, or you want certain formatting.

If you are the author of that tooltip, there's a lot of work that goes into that component to make it applicable to as many use cases as possible.

Alex Inkin is a lead developer behind Taiga UI, and those kinds of challenges are his bread and butter, so to speak. Alex has published an article on Angular Space where he discusses his library Polymorpheus, which is optimized exactly for these challenges, is used in Taiga UI, and can also be used by us.