Angular VS lit

feat(router): add controls for route cleanup #65991

Hydration transforms a pre-rendered HTML page (produced by server-side rendering) into a fully interactive Angular application on the client side. With incremental hydration (here the complete RFC), you can determine when specific parts of your application need to become interactive.

Luckily, as of Angular 21.0.1, there's now a really clean way to add them back.

Angular PDF libraries provide a powerful set of features that enable developers to create, display, and manipulate PDF documents, which include an Angular PDF viewer/editor, directly within an Angular application. Which helps us to create PDF files, being a common format for reports, invoices, forms, and downloadable content, their implementation has become an indispensable part of today's web development.

feat(forms): add `debounce()` rule for signal forms #64929

Custom validators are one of those things you'll definitely need when building real-world forms. But if you've been wondering how they work with Angular's new Signal Forms API, you're in the right place. Today we'll migrate a form with custom validation from Reactive Forms to Signal Forms, and I think you'll be pleasantly surprised by how straightforward it is. The syntax changes are minimal, and the result is cleaner, more reactive code.

I've made a few tutorials on Signal Forms now, and I've seen the comments. Some of you said the old Reactive Forms way is just as good, or you just still like it better. And I get it. Maybe the benefit hasn't been obvious. So today, I'm going to show you a real-world form (the kind that gets messy fast) and we're going to rebuild it using Signal Forms. By the end of this post, hopefully you'll see the advantage, not just hear me say it.

Building dynamic forms in Angular has always felt a little like assembling IKEA furniture without the instructions. But soon, there will be a simpler, more reactive way. One that actually feels reactive. In this tutorial, we’ll take a dynamic form built with classic Reactive Forms and upgrade it to use the new Signal Forms API. It's still experimental, but what it can already do will make you wish it wasn’t.

Framework: Lit (Web Components) + Vite

This decision is a bit tricky to explain, so I‘ll show some code (in Lit because that‘s what I like and use daily.

https://developer.mozilla.org/docs/Web/API/Web_components

If that's not enough, Lit enhances it a bit such that either LitElement and/or litHtml can accommodate whichever style you want: https://lit.dev/

I could talk for days on all the peculiar bugs to resolve. Once the alpha stabilizes I have drafts to publish on several topics.

You actually nailed the major pain points. Particularly window focus and state management. I've spent months solving this problem alone.

- Applications data list: Getting the list is easy! Finding out which apps in that list are "real" apps isn't. Getting icons isn't. Reliably getting information on app state isn't. Finding out why something doesn't work right is as painful as can be. Doing all this in a performant way is a nightmare.

- Applications menu renderer: Rendering the list for the menu is easy enough after the macOS app sends the data over via socket. The frontend is just web sockets and web components under the hood (https://lit.dev). The difficult part was converting app icons to PNG, which is awfully slow. So a cache-warmup stage on startup finds all apps, converts their icons to png, and caches them to the app directory for read.

- Window state: again, by far the worst and it isn't even close. Bugs galore. The biggest issue was overriding macOS core behavior on what a window is, when it's focused, and how to communicate its events reliably to the app. Although I did include a couple private APIs to achieve this, you can get pretty far by overriding Window class types in ways that I don't think were intended (lol). There is definitely trickery required here for it to work correctly.

One bug that still makes me chuckle today.. anything can be a window in macOS. I'm writing this on Firefox now, and if I hover over a tab and a tooltip pops up - that's a window. So a fair amount of time has gone into determining _what_ these apps are doing and why. Then accounting for that to clean up a finalized list of windows that should show up in the taskbar. The "Accessibility Inspector" app comes standard on macOS and was helpful for debugging this, but it was a pain regardless.

Elements are kept stable as long as the template containing them is rendered.

The template docs try to get this across by saying that Lit "re-render only the parts of template that have changed." Maybe that needs more detail.

There are details here: https://github.com/lit/lit/blob/main/dev-docs/design/how-lit...

Here’s a library for creating toast notifications in Lit Web Components.

Feel free to contribute, leave a like, or share your feedback.

If unfamiliar with Lit, here's link to docs: https://lit.dev/

The author was a core contributor of Google's Lit project: https://github.com/lit/lit

Angular has nothing to do with web components. It isn't even a way to write web components.

If anything is the "Google blessed" way of writing web components (Google doesn't really work that way), it's Lit: https://lit.dev/

It is a set of Web Componentes created using the Lit Element library, aiming to reuse, speed up, and standardize project development for the sector.

some people cheat by using web components but with Lit Elements. https://lit.dev/