bob2517
commented
3 years ago I agree. I believe CSS is the best shorthand approach to this. CSS directly manipulates DOM properties and has the shortest method of referencing them. It currently has :hover, which is an event of sorts. It can easily be extended to add other event methods to those objects. The syntax just needs extending a little bit to be useful.
JavaScript is too far removed from the browser for any radical syntax changes to make things quicker for the developer. The current API approach is perfectly fine and probably the best JavaScript can do, without making some shorthand commands for things like getElementById, which seems to be the most common solution to the problem when you look at popular JavaScript wrapper frameworks.
To open CSS up to properly handling UI, the basics that are needed to add this functionality are:
1) All access to all the other browser events. So like :hover we then get :click, :mouseover, :popstate, etc. This on an event declaration means that events can be differentiated from "static" display property declarations when parsing the CSS file so that these don't have to touch the rendering engine.
2) Add a "target" selector underneath the new "event" selector so that the rest of the DOM can be affected by actions in the event.
3) Add useful new commands to CSS, like add-class, remove-class, etc.
4) There's a bunch of other stuff too which would be useful, but those are the main ones which would be useful to every developer.
Eg.
#myButton:click {
#myDiv {
add-class: .something;
}
}Every UI action taken in the browser is a cause and effect type of activity. Everything that happens on a web page is prompted by an event of some kind, and actions then take place. I believe CSS has the perfect basic syntax structure for this.
I've actually been working and evolving on this concept for a few years, and have a cross-browser prototype which is a work-in-progress.
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. 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.
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.