yhtml
aleph.js
yhtml | aleph.js | |
---|---|---|
3 | 13 | |
101 | 5,254 | |
- | 0.1% | |
3.1 | 6.6 | |
10 months ago | 9 months 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
aleph.js
-
I don't get fresh. why can't I use react without commiting to a server side framework?
Check aleph if you want to use react with deno. But I'd suggest sticking with Node.js and Vite as you'll get less surprises.
-
Modern SPAs without bundlers, CDNs, or Node.js
Here's another thing: if you want to grow from this exact setup, use deno. It has support for import maps and don't require a bundler or a separate compilation step for typescript
https://deno.land/[email protected]/basics/import_maps
Maybe add aleph too (which is similar to nextjs)
https://alephjs.org/
Deno won't require nearly as much tooling as nodejs, but it still has tooling for the cases you need it.
- Deno 1.28: Featuring 1.3M New Modules
-
Fresh is a new full stack web framework for Deno
There’s also https://alephjs.org, never used but pops up when you search for "deno react" so I assume is similar to nextjs.
- Aleph.js – Fullstack Framework in Deno
-
Using Ultra, the new React web framework
Aleph.js is a full-stack framework in Deno, used as an alternative to Next.js. Aleph.js offers features like ES module imports, file-system routing, SSR & SSG, and HMR with a fast refresh.
- Aleph.js is a fullstack framework in Deno, inspired by Next.js
- The Fullstack Framework in Deno
What are some alternatives?
fastdom - Eliminates layout thrashing by batching DOM measurement and mutation tasks
ultra - Zero-Legacy Deno/React Suspense SSR Framework
custom-elements - Using custom elements
fresh - The next-gen web framework.
img-comparison-slider - Image comparison slider. Compare images before and after. Supports React, Vue, Angular.
vitext - The Next.js like React framework for better User & Developer experience!
systemjs - Dynamic ES module loader
inertia-laravel - The Laravel adapter for Inertia.js.
custom-elements-everywhere - Custom Element + Framework Interoperability Tests.
marky - A modular and extensible ESM and Deno Markdown parser.
proposal-import-attributes - Proposal for syntax to import ES modules with assertions
derby - MVC framework making it easy to write realtime, collaborative applications that run in both Node.js and browsers