yhtml
uibuilder
yhtml | uibuilder | |
---|---|---|
3 | 6 | |
101 | 128 | |
- | - | |
3.1 | 0.0 | |
10 months ago | about 4 years ago | |
HTML | TypeScript | |
- | MIT License |
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.
yhtml
-
If Web Components are so great, why am I not using them?
The main reason is that they're too low-level to use directly.
They do a lot, but stop just short of being useful without something of a framework on top. I tried hard to use them directly, but found that it was untenable without sensible template interpolation, and without helpers for event binding.
Here's my shot at the smallest possible "framework" atop Web Components that make them workable (and even enjoyable) as an application developer:
https://github.com/dchester/yhtml
It's just ~10 SLOC, admittedly dense, but which make a world of difference in terms of usability. With that in place, now you can write markup in a style not too dissimilar from React or Vue, like...
${this.count}
-
Modern SPAs without bundlers, CDNs, or Node.js
I also sometimes enjoy this approach of starting from absolutely nothing.
Instead of taking the path of starting with DOM manipulation and then going to a framework as necessary, I've kept really trying to make raw web components work, but kept finding that I wanted just a little bit more.
I managed to get the more I wanted -- sensible template interpolation with event binding -- boiled down to a tag function in 481 bytes / 12 lines of (dense) source code, which I feel like is small enough that you can copy/paste it around and not feel to bad about it. It's here if anyone cares to look: https://github.com/dchester/yhtml
- Bytes HTML tag function for rendering Web Component templates
uibuilder
- Web Components Will Outlive Your JavaScript Framework
- If Web Components are so great, why am I not using them?
- Ask HN: Good resource on writing web app with plain JavaScript/HTML/CSS
-
AlpineJS – Lightweight JavaScript Framework
This looks bad. I see custom syntax, and JavaScript embedded into HTML in a way that cannot be syntax-checked at build time.
If you want a lightweight framework check out UIBuilder instead: https://github.com/wisercoder/uibuilder
Same JSX syntax as React, but this lib is very simple -- just over 200 lines of source code.
-
Virtual DOM is pure overhead
If you don't need Virtual DOM then Web Components are a great idea for building reusable components that work with all frameworks, including React. You can even use JSX to build Web Components: https://github.com/wisercoder/uibuilder
What are some alternatives?
fastdom - Eliminates layout thrashing by batching DOM measurement and mutation tasks
svelte-query - Performant and powerful remote data synchronization for Svelte
custom-elements - Using custom elements
react-svelte - Use Svelte components inside a React app
img-comparison-slider - Image comparison slider. Compare images before and after. Supports React, Vue, Angular.
Alpine.js - A rugged, minimal framework for composing JavaScript behavior in your markup.
systemjs - Dynamic ES module loader
budibase - Budibase is an open-source low code platform that helps you build internal tools in minutes 🚀
custom-elements-everywhere - Custom Element + Framework Interoperability Tests.
proposal-import-attributes - Proposal for syntax to import ES modules with assertions