lit VS Vue.js

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/

But it does not deal with all the non-JSON objects, e.g. Map or other class instances that are not even JSON-serializable by default.

Best to use TypeScript, and ideally, it should only be needed to do such checks when dealing with foreign data.

When data comes from parsing JSON, the check above should be enough.

When authoring complicated library code that needs reflection, I think it's worth looking at Vue2's hilarous solution:

 https://github.com/vuejs/vue/blob/547a64e9b93d24ca5927f653710b5734fa909673/src/util/lang.js#L293

Recently, a ticket was added to our sprint with the goal of reducing packages with critical and high vulnerabilities in a legacy project. The task involved migrating a Vue 2 project using Vue CLI as the build tool to Vite.

Vue.js is a tool for building user interfaces. It's easy to use and works well for both small and big projects. I specifically love the team behind Vue and Nuxt! Highly recommend checking it out and giving it a try. It has 208k stars 🌟. Explore Vue.js here.

Repository: Vue.js

GitHub Repository - The main Vue.js repository.

Vuejs

Vue.js is a big favorite for making websites because it's easy to use and fits in well with other stuff. Many people worldwide are using it, and the community keeps growing.

Vue has a thriving ecosystem with a wide range of third-party libraries and plugins available for extending its functionality. These libraries cover everything from state management to routing, making it easy for developers to find solutions to common problems and enhance their development workflow. As of this writing, Vue has 200k GitHub stars.

6. Vue.js