←back to thread

What should a native DOM templating API look like?

(justinfagnani.com)
69 points jdkoeck | 3 comments | 01 Jul 25 17:40 UTC | HN request time: 0s | source
Show context
maxloh ◴[01 Jul 25 19:00 UTC] No.44437012[source]▶
I don't understand why Svelte isn't even mentioned. Its syntax is more readable for me.

  <div>
    {#each colors as color, i}
      <button
        style="background: {color}"
        aria-label={color}
        aria-current={selected === color}
        onclick={() => selected = color}
      >
        {i + 1}
      </button>
    {/each}
  </div>
replies(4): >>44437120 #>>44437268 #>>44437428 #>>44437574 #
roywiggins ◴[01 Jul 25 19:32 UTC] No.44437268[source]▶
I'm somewhat partial to Alpine, which sort of crams it into html.

    <div x-data="{ open: false }">
        <button @click="open = true">Expand</button>
 
        <span x-show="open">
            Content...
        </span>
    </div>
replies(1): >>44437434 #
1. cluckindan ◴[01 Jul 25 19:52 UTC] No.44437434[source]▶
x-anything is just painful like Angular. UI state is better off being non-declarative, otherwise the builtin behaviors become a limit and unmaintainable workarounds ensue.

Nobody wants to express complex conditions all around the UI when derived state can be handled in a single store.

replies(1): >>44440147 #
2. roywiggins ◴[02 Jul 25 04:03 UTC] No.44440147[source]▶
You can drive an entire Alpine app through a class, which works fine- the class handles all the behavior and the x- tags are mostly wiring up events to methods, and state to visible behavior. But it definitely doesn't take that big an app before you start to get a bit cramped.

I think I'm fond of it because I've never grown to love html-in-js. Sometimes you definitely need that, but for apps that are simple enough that you don't, I find Alpine is just nice to use. No build steps at all, every editor knows how to color html, etc.

It probably shouldn't become a web standard though.

replies(1): >>44446053 #
3. cluckindan ◴[02 Jul 25 16:57 UTC] No.44446053[source]▶
You could get pretty far with a global event handler on the body tag, as most UI events bubble up. Write up an interface for registering sub-handlers from component js files and you get template-behaviour colocation, and any DOM subtree mutation no longer requires event rebinding.