lit-state
panel
lit-state | panel | |
---|---|---|
3 | 1 | |
137 | 272 | |
- | 0.0% | |
0.0 | 5.7 | |
over 1 year ago | 3 months ago | |
JavaScript | JavaScript | |
GNU Lesser General Public License v3.0 only | - |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
lit-state
-
Web Components Eliminate JavaScript Framework Lock-In
The reason React uses a virtual DOM is because when React started, there were no (advanced) HTML templates yet. And it made it easy to setup listeners on elements, instead of manually adding it with `addEventListener()` and possibly remove them again with `removeEventListener()`. So the virtual DOM was really a game changer.
But Lit templates solve this problems in a more browser integrated way, without the need of a virtual DOM. How you manage the state is free to your choice, that is also not something exclusive to React and your favorite pattern can also be used with Lit. I wrote a tiny state management library (LitState [0]) which makes it very easy for multiple components to share the same state and stay in sync. I personally find it much more convenient and cleaner than any other state library I've used before. And it integrates very nicely with Lit.
[0]: https://github.com/gitaarik/lit-state
- Web Components Will Outlive Your JavaScript Framework
- Litstate Simple Shared App State Management For
panel
-
Web Components Will Outlive Your JavaScript Framework
Webcomponents will outlive React 13, mostly likely. Will they outlive React entirely or its cousins like Solid and Svelte? Perhaps not.
Webcomponents and React look like they solve the same problem but they do not.
Webcomponent api is pretty shallow. You get connected/disconnnected/attributeChanged call back but gotta write your own property setter and getters, and that’s mostly it. Shadow dom becomes a pain to work with if something needs to pierce it. Can’t pass nested objects in attributes, gotta encode as string.
Mixpanel went all in on webcomponents, but had to build a whole bunch of lib tooling around it. They made their own framework on top of webcomponents. https://github.com/mixpanel/panel
Worked on panel lib and webcomponent UI for many years. It is not a silver bullet.
The issue with webcomponents is there are a ton of libraries that fill in the missing gaps. There’s not a lot you can do with pure vanilla webcomponent api since browsers don’t provide efficient dom updating mechanism. Google has their own thing, Microsoft had multiple internal libs across orgs, Reddit does their own thing.
The most standard thing for frontend with wide adoption right now is React.
So the way I see it, is that React has already outlived webcomponents.
What are some alternatives?
lit - Lit is a simple library for building fast, lightweight web components.
kor - User Interface Component Library based on LitElement / lit-html
router - Small and powerful client-side router for Web Components. Framework-agnostic.
lrnwebcomponents - HAXTheWeb monorepo of elements and apis
web-components-examples - A series of web components examples, related to the MDN web components documentation at https://developer.mozilla.org/en-US/docs/Web/Web_Components.
WebComponentFactory - Make use of JavaScript web components while keeping your code in .html for LSP features
joystick - A full-stack JavaScript framework for building stable, easy-to-maintain apps and websites.
lit-style - Shared component styles for LitElement
uibuilder - Typed HTML templates using TypeScript's TSX files
butterfloat - The greatest view engine for the modern web
live_state - The hex package for the server side of live state