Show HN: Ajaxial – Painless, JavaScript-Free Ajax

by KatrinaKitten • 2 years ago

1 2 2 years ago

Ajaxial is a single-file web library that embeds AJAX instructions directly in your HTML structure, allowing you to painlessly design client-server interactions without ever touching JavaScript yourself. With AJAX at your fingertips, the web becomes more powerful than all of Greece!

antman• 2 years ago

Is it something similar or how does it compare to htmx?

KatrinaKitten• 2 years ago

I'm a big fan of HTMX and it heavily inspired Ajaxial from top to bottom. In fact, until it started diverging more significantly, it originally began as "HTMX but fixing the things I don't like".

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>

Show HN: Ajaxial – Painless, JavaScript-Free Ajax

Related Stories