I presumed, but either way you still have to consider that React's "6.4kb" is without any of the actual building blocks a web app will need, just the absolute bare minimum of what React itself needs.
36 karma · joined October 4, 2023
From a functional standpoint:
- HTMX is already tiny at 47.8kb minified, but Ajaxial is even tinier at just 5.0kb minified
- HTMX has more "batteries included" for things like history support and inline event handlers, where Ajaxial takes a more minimal approach with a heavy focus on extensibility, so that it's as easy as possible to add those batteries if you need them
- HTMX supports IE11 (until the currently-alpha v2.0) and has a lot of browser support-induced quirks as a result, where Ajaxial uses current modern web technology like fetch
The single biggest thing that sets Ajaxial apart is that it's designed to be as deeply extensible as possible. Where HTMX has more magic that makes things "just work" out of the box, Ajaxial leaves as much of the process as possible open to changes or additions, so that it can be trivially extended to support almost any use case. For example, here's a tiny extension that enables Mustache template support =)
<script src="https://cdn.jsdelivr.net/npm/mustache@4.2.0"></script>
<script>
Ajaxial.responseConverters.mustache = (body, template) => {
const template = document.querySelector(`template[name="${template}"]`).innerHTML
const rendered = Mustache.render(template, JSON.parse(body))
return Ajaxial.responseConverters.html(rendered)
}
</script> <template mixin="htmx" global>
<script on="connect">htmx.process(root)</script>
</template>A framework component is effectively a reusable block of code. It's an organizational principle more than anything; modular and reusable, but not meaningful to the browser in its own right once rendered. A web component, on the other hand, is very literally a new HTML element, and is treated by the browser as such. Once defined, the browser itself sees that component as a meaningful entity in its own right.
While the difference between those two ideas is fairly subtle on the surface, there's a whole nest of smaller differences that result from it. For just one example, web components are perfectly AJAX-compatible with no extra strings attached - you simply add the HTML tag representing a component to the DOM, and it works out of the box, no matter when or from where you got it. Achieving that with a framework component requires some additional work at best, which may or may not have been done for you by the framework authors.
That's not to say one is necessarily better than the other either, to be clear - they're just different, and treating them as if they were the same does both a disservice.