7 comments

  • tosh a day ago ago

    Reminds me of how facebook used to render html snippets on the backend and the frontend would just fetch that and update the DOM.

    When you say it can replace htmx (which I’m using at the moment):

    Isn’t this similar to htmx?

    Like if I’m already using htmx, do I see benefits from switching?

    Please correct me, but I’d rather frame HMPL, htmx and Alpine.js in the same camp?

    So they are direct competitors and different flavors for the lightweight frontend approach.

    But the main proposal of HMPL et al is to make people re-think if they need a huge and complex heavy frontend approach or if/when they should go for something lighter.

    • aanthonymax a day ago ago

      Hello! HMPL differs from HTMX quite seriously in that HTMX uses the outdated XMLHTTPRequest in requests, and is also almost not customizable at all. HMPL focuses on customization, which is done through more complete integration via JavaScript. It differs from Alpine.js in that it is a highly specialized tool, not a general one.

      Alpine.js, HTMX and HMPL - represent the same idea (if we are talking about the server), but differ in details.

      • tosh a day ago ago

        Is there a problem with XMLHTTPRequest?

        When you say customizable: how? Can you give an example?

        • aanthonymax a day ago ago

          It's old. You can specify AbortController, for example.

          • rendall 16 hours ago ago

            Could you be more specific?

            • aanthonymax 8 hours ago ago

              import hmpl from "hmpl-js";

              const templateFn = hmpl.compile( `<div> <button data-action="increment" id="btn">Click!</button> <div>Clicks: {{#request src="/api/clicks" after="click:#btn"}}{{/request}}</div> </div>` );

              const controller = new AbortController(); const clicker = templateFn(({ request: { event } }) => ({ body: JSON.stringify({ action: event.target.getAttribute("data-action") }), signal: controller.signal, })).response;

              document.querySelector("#app").append(clicker);

            • aanthonymax 8 hours ago ago

              In such code, you are free to specify almost all RequestInit supported by fetch.