Wednesday, March 27, 2019

nouns and verbs redux... or rather, react

For a long while I've been framing some of the difference between my mental modeling and that of another population of developers as the nouns vs verbs.

I thought of that today - my task was to put some analytics to monitor when our main "hamburger" menu was opened. I poked around the React inspector and at the source and couldn't see anything that looked like an "open menu" event. Investigating with the other inspector tools I shortly realized the trick employed was to have the clickable burger bit be a
<label for="anInvisibleCheckbox"> 
and then some CSS using the ~ sibling selector and the checked state put the sliding menu in the correct position, along with a easing/transition to let it slide gracefully into place.

It strikes me that the method they used was fundamentally "noun"-ish (i.e. the visible state depends on the checkbox) and that my thinking while hunting was fundamentally "verb"-ish - (the click causes an onpage action to occur) and so it took me a little longer than it might have to realize there was no onClick to be found.

I know I'm biased, but somehow the "invisible checkbox" feels like chicanery to me - not to mention, to do the analytics, I had to code to an imperative style, rather than the declarative pattern the invisible checkbox represents, anyway.

My thinking reflects my history as a web developer - from the bad old 90s when an entire HTML page would land as the result of some serverside CGI processing, and that's all you got, on to me  learning CSS and JQuery at the same time - a paradigm where the DOM is stable (more or less like the CGI days) but where Javascript with JQuery selectors could make changes to it at certain specific times, kind of an event-driven model.

This DOM stability is in sharp contrast to the Angular and React assumption that declarative nirvana is found by assuming JS memory is canonical, and that the DOM should be rejiggered as quickly and automatically as possible to reflect those structures. (And of course Redux swings back around to an event-driven way of thinking, but with formalizing manipulating the store/state of memory and not DOM.)

And making a smoothly transitioning UI (a critical bit of UX) uses those CSS transitions - still not my most fluent language, and still feeling a bit awkward. I guess it's because it's nouning a verb, so to speak-- or rather applying the adverb to the adjective....i.e. when you add an easing to a jQuery transition, you're clearly applying an adverb to a verb - change this state quickly, or bouncily, or whatever. Declaring it as a CSS transition - that when this adjective (e.g. the right: property) changes, it changes slowly, or mechanically, or whatnot.

I'm not saying my event-driven, DOM-centric, verb-ishness is superior - but knowing what my instincts are, and that they differ from those of some of my peers, helps me get in their heads a bit more and understand their presumptions and their code that much better.

No comments:

Post a Comment