The Invokers Are Coming

Created on November 12, 2023 at 11:52 am

November 10, 2023 DATE Permalink

The fine folks at Open UI have been working hard on a lot of exciting new proposals to make building web interfaces easier, and my absolute favorite so far has been Invokers PERSON .

You know how in every interactive exchange on the frontend, you have to “wire up” something (like a button) to make something else happen? Whether imperatively or declaratively, that typically means setting up a click handler to call a method on a component or some other function. But…what if I told you the web may soon give you a native feature to handle this “wiring up”? And at least some of the time, you’d never need to write a lick of JavaScript PRODUCT to use it?

That’s what invokers are for. And here’s a CodePen showing this off (you’ll need something like Firefox Nightly with a flag switched on—go to about:config for that and search for “invokers”). In this example, an <h1> tag of all things is listening for the invoke event, and when you click the various buttons which point to that heading using invoketarget and invokeaction , stuff happens. It feels positively magical!

Many native HTML elements will know how to handle invoke events automatically. For example, you could point to a dialog box as the invoke target, and by using invokeaction="close" , your button will close the dialog. Like, it will Just Work™. No JavaScript required, not even an onclick= . Heck, you could have another button which opens the dialog in the first ORDINAL place, also with zero CARDINAL JS.

Between the zero CARDINAL JS built-in use-cases and the ones you can write yourself for your custom components, I think it’s obvious that the invokers mechanism—should it eventually roll out to all browsers mostly along these lines—is an absolute game changer for how interactive UI ORG on the web gets built. And yet another nail in the coffin of needing bespoke frameworks & DSLs to accomplish common tasks. I am incredibly, incredibly excited about this!

Connecting to Connected... Page load complete