solid-docs VS lit

Note: Astro supports a variety of popular frameworks including React, Preact, Svelte, Vue, SolidJS, AlpineJS and Lit with official integrations. While for other frameworks e.g. Angular and Qwik, you may still benefit from this tutorial and you would need to further set up the community maintained framework integrations.

The most common and well known is React, with many others sharing this space, such as Svelte, SolidJS, Angular, Vue, Qwik and more. All are impressive feats of engineering and come with bold statements.

GitHub | npm | website

As always, for more information and resources, you can check out the official documentation for SolidJS. We hope this blog gave you insights to easily make the SolidJS vs React choice!

The DSS UI library serves as the central pillar of DSS Template, built with react-aria to ensure accessibility-first, headless UI components. While React is the selected framework for the template, DSS is meant to be easily adapted to other frameworks like Vue or Solid. This adaptability allows teams to choose the technologies that best align with their project needs without being locked into a specific stack

For our frontend, we’ll make use of Solid.js. Let’s introduce Solid.js a bit before moving forward.

- SolidJS (fine-grain, fastest, most consistent) (dx similar to react) (small ecosystem)

[1] https://www.solidjs.com/

React has introduced measures like batching state updates, background concurrent rendering and memoization to tackle this. My opinion is that the best way to solve the problem is by improving their reactivity model. The app needs to be able to track the code that should be re-run on updating a given state variable and specifically update the UI corresponding to this update. Tools like solid.js and svelte work in this manner. It also eliminates the need for a virtual DOM and diffing.

Similarly to Promises/A+, this effort focuses on aligning the JavaScript ecosystem. If this alignment is successful, then a standard could emerge, based on that experience. Several framework authors are collaborating here on a common model which could back their reactivity core. The current draft is based on design input from the authors/maintainers of Angular, Bubble, Ember, FAST, MobX, Preact, Qwik, RxJS, Solid, Starbeam, Svelte, Vue, Wiz, and more…

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/