https://htmx.org logo
Powered by
# htmx-general
  • f
    In reply to this obv
  • g
    Hey @User - I never used Intercooler, so I can't say if it's an upgrade or downgrade. But, I do know a lot of client side interactivity have been moved over to hyperscript. It's gotten ridiculously powerful in the last couple of months 🙂
  • f
    I no doubt believe that. But I would imagine people are using htmx to avoid learning another framework/way of thinking, and yet hyperscript requires to do exactly that instead of relying on an already existing, widely known and quite powerful library like vanilla JS or jQuery
  • g
    Yes. That's a very fair point.
  • g
    I'll need to look up 
    ic-on-success
    to understand what it did/does, but I'd imagine there's a limit to what you can put in the attributes of a single tag.
  • g
    One more quick plug for hyperscript, it reads very much like a natural language sentence. So it's less about learning-yet-another-js-library and more about describing the interactions. I'll let you look it up without being a nag 🙂
  • f
    AppleScript tried to follow the same approach and at least historically speaking was widely unpopular because of it. While the idea is great, developers just feel more comfortable having a syntax they can rely on than having to figure out the natural language.
  • g
    I'm doing a bit of digging to see if I can replicate 
    ic-on-success
    . I think there's an event 
    htmx:beforeSwap
    that gets pretty close. You could hook into that, and evaluate something in the xhr and then cancel the event if you don't like it.
  • g
    (writing code)
  • f
    To be fair, intercooler was struggling with too many special attributes like this. Usually you only have to do very minor feedback calls on success or on failure – anything more would usually result in a dedicated JavaScript function call.
  • f
    Yeah, but that means having to hook an event listener on every page, no? And what if you have multiple different elements that interact with intercooler – how do you efficiently differentiate in the hook?
  • g
    This is quickly-written code that probably has 20 syntax errors, but you get the idea...
    Copy code
    <div hx-get="/my-server" _="on htmx:beforeSwap(xhr) if xhr.headers.nope then halt">
  • g
    Yes, kinda. There's a couple of ways to make global event handlers in hyperscript that would probably minimize the amount of code. One really cool way is "behaviors" (that are not documented on the website, yet) that let you write a series of event handlers that gets bound to any div that wants it. It would look something like this (typing frantically)
  • g
    Copy code
    <script type="text/hyperscript">
    behavior onSuccess(args)
        on htmx:beforeSwap
            if event.headers.nope 
                halt -- this cancels the event, and therefore the swap
            end
        end
    end
</script>

<div hx-get="/my-server" _="install onSuccess"></div>
  • g
    @User and @User are gonna be sad looking at my hacky behavior code, but again, you get the gist. There's a lot you can do with the htmx event system, and combining it with hyperscript is supposed to cover the use cases that intercooler did.
  • f
    And what's the benefit of that over just using JavaScript?
  • g
    There are other ways to write global event handlers in hyperscript, this one is just the new shiny right now.
  • g
    You could just use Javascript, too.
  • g
    I think hyperscript makes it a little easier to attach specific events to specific elements, but we're not showcasing that here. There are some other benefits to hyperscript if you're writing complex async code, or doing lots of DOM manipulations. Think of it as a high-level library that cuts down the amount of actual code by 2-3x.
  • g
    Behaviors work great if you have a lot of complex code. (I believe) the goal was to reduce the use of "magical" CSS classes to link event handlers to a node. But, you could also do this:
    Copy code
    <script type="text/hyperscript">
    on htmx:beforeSwap from .magicalCSS  -- match event based on CSS class
        fetch /validation-url with as json -- async process (go to another server, or something)
        if it.isNotOK then               -- halt the swap if you want to 
           halt
        end
</script>

<div hx-get="/my-server" class="magicalCSS"></div>
    Hyperscript is really great at making event handlers readable, which is a lot better than this Javascript:
    Copy code
    javascript
window.addEventHandler("htmx:beforeSwap", function(event) {
    if (event.target.cssClass == "magicalCSS") { // too lazy to figure out contains right now...
        fetch("/validation-url", args)
        .then(function(response) { // Promises are awful to work with
            var body = JSON.parse(response.body) // I think this is how to parse the JSON
            if (body.isNotOK) {
                event.cancel(); // OMG, done!
            }
        })
    }
}
    I'm typing fast, so I guarantee there are tons of problems with my JS. But hopefully it makes the point. You could absolutely use Javascript to look for 
    htmx:beforeSwap
    events, and that probably makes sense for many people. But personally, I think hyperscript makes the process a lot happier. 🙂
  • f
    heh, alright – thanks for taking time to elaborate; I can definitely tell there's a lot of passion there 💯
  • m
    As you noted, the problem that intercooler had was a blow out of attributes for events. So htmx went with a well developed event model instead, and allows you to handle those events however you'd like: vanilla js, jquery, alpine.js or, if you are adventurous, hyperscript. Hyperscript is not required to hook into any of these events, but is just another option for you to consider using.
  • m
    I don't expect most people to use hyperscript for a while, but maybe eventually it will offer enough value that it stands on its own.
  • m
    I completely understand skepticism towards hyperscript in the meantime
  • m
    The main advantages of hyperscript are: - you can embed custom event handlers directly in the DOM. You can, of course, embed things like 
    onClick
    handlers in the DOM, but you can't embed 
    onhtmx:success
    or whatever. This means you can have the locality of behavior (https://htmx.org/essays/locality-of-behaviour/) of the old intercooler.js attributes, but without blowing out the htmx attributes. - hyperscript is more expressive than javascript, so you can handle more things directly inline in the DOM without a bunch of junky code: 
    on click transition my opacity to 0 then remove me
  • m
    But hyperscript is far more speculative than htmx. I hope it works out well, and I'm happy so far, but we will have to wait and see. In the meantime, htmx can work fine without it, and vanilla js, jquery, alpine.js or whatever else you'd like can be used to work with the well developed event system
  • m
    as I often say: let's find out 🙂
  • s
  • a
    Hi! Long time Intercooler user here. We’re in the process of porting a largish Intercooler-based app to htmx and hyperscript. Mostly to scratch my own itch, I started a migration guide that attempts to map Intercooler attributes and api commands to the htmx + hyperscript equivalents. The guide isn’t finished, but perhaps it might be useful to you: https://htmx.org/migration-guide/
  • a
    And yes... lots of passion to be found around here for htmx and hyperscript 😁
1...215216217...1146Latest