In Vanilla Javscript
7 GUIs is a user interface programming benchmark. It specifies a list of simple graphical interfaces that any good UI framework should make easy to implement. I am working on a product with a browser-based UI and was hitting "scaling" issues with vanilla javascript. For a myriad of reasons, I do not want to use React or other web frameworks. However, it was very clear html/css/javascript sucks. I decided to give the browser one last chance for redemption by implementing 7 GUIs in vanilla javascript.
I think the fundamental problem is that the DOM is "retained" mode. Namely, it is much easier as a programmer to rebuild the ui as a function of your application state than carefully apply deltas from user input. Indeed, one of my observations was that implementing a render
function for a widget, and then calling it whenever the state is mutated is much easier. The performance implications of doing this is unclear however, since these widgets are to small to benchmark.
Retrieving references to the DOM is also quite uncomfortable. You can call document.getElementByClassName
, but this is quite verbose so I use a wrapper function simply called element
. I then implemented a batch load(parent, classNames)
that loads all the relevant children from a parent and returns them. The alternative to doing so was loading all the references to DOM elements as fields in your main object representing the component, however now you need to pass your component around everywhere.
Lastly, javascript is an absurd language. Taking a reference to a class method e.g. this.myMethod
will not bind this
correctly when calling that reference. I understand javascript's prototype system well enough to understand why this is the case, but the end result is completely unnatural semantics for the programmer. Luckily, I only require for-loops, if-statements, and arrays to be productive, so most of the language idiosyncrasies do not effect me much.
An observant visitor will notice that there are only 6 guis and the undo/redo button in the "Circle Drawer" application is unintuitive. Truthfully, web programming is incredibly frusturating. I do not see how my perspective will change by implementing an extra spreadsheet application.