[w3c/uievents] "UI Actions" or Event Responses for Simplified UI Scripting (#295)

UI events are defined in the HTML spec, used to call JS functions, to implement CSS changes.

The lack of Simple UI actions means that even static websites require complicated JS just like a dynamic website. Eliminating a lot of the benefits of a static website.

I believe there needs to be an expansion to the CSS/HTML/DOM spec to allow for easier UI scripting. This expansion would be used solely for implementing user interface actions or the responses to events.

Something like a dynamic event handler that is easily defined/scriptable to do things such as modifying CSS styles, iterating through data arrays, updating the DOM, and acting on UI events (clicks, drags, form changes etc.)

Right now for each and every UI load, change, click you need to write a JS function even when all you need to do is add or remove a style. This is not only difficult for beginners but very inefficient and extra work and repetition for developers. Js is also very verbose and using standard JS inline even for adding a style would make a mess of code.

Some attempts at solving this have been made with frameworks such as AlpineJS and VueJS which use a small set of JS functions to cover many of the use cases but they are limited by hacks and workarounds that work with the HTML spec. (ie. <template> being used to implement for loops). The other problem is that they are incomplete and don't always play nice with other systems being used.

This could be solved by providing a set of actions as part of the event spec. We have onClick but what happens next is left for us to figure out.

Many websites do not need the full power of JS and only need to implement UI changes or at most basic data iteration/updates but with the current limitation you need a working knowledge of JS to make UI components that only require updating a CSS style.

```
Example implementations:
onClick= update(target, somestyle) // add a style to an item *if target is skipped target = self
onClick= toggle(target, somestyle) // toggle style
onClick= switch(target, style1, style2) // switch betwen styles

<div for(item in array) :key> <var> item['key'] </var> </div> //this is not how var tag currently works
<div while (array) > <div class=row['column'] > row['column']  </div> </div>
```

Currently, all of these would require writing custom JS but are simple enough that they could be added inline if they were standard in the spec.

An alternative could be a small official JS framework much like the C/C++ standard library or the integrated functions for PHP. Jquery and Jquery UI have held this place for a long time but Jquery UI has been abandoned and now people are moving away from Jquery because technology has advanced. This leaves an empty place in the event handling space.


Well that is pretty much all I wanted to say on the subject and is something that has stuck with me for a long time over these 19 or so years of working in web development.


-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/uievents/issues/295