Thursday, November 14, 2024

the visible noun and the functional verb

Here's an article about a minimalist library I find intriguing: 

Why Alpine is the new jQuery and Why that is an Awesome Thing.

The age old challenge of web-based dev remain: what is the best way to mix the visible noun (ie. the DOM) and the functional verb (script), and the balance between what happens on the server and what happens on the client.

The HTML noun vs Code verb was true even back in the servlet/JSP age. JSP (Java Server Pages) was where the body of the source code was akin to an HTML page, but then you could add in code parts. JSP had two ways of mixing the nouns/verbs: at first you could just duck into <? ?> tags, write in Java, then have the stuff in between still be DOM. Later, there were standard template libraries that let you do conditional logic in new HTML-looking tags.

Personally I preferred the former approach; I like that there was one language and syntax for conditionals and loops (i.e. plain old Java) - the way that code blocks looked like code and HTML blocks looked like HTML, rather than everything being flavors of tags.

jQuery's solution (in a pre-SPA time) was: assume the DOM from the backend was pretty complete, and then we're just decorating (actually one sweet spot for it was the visible adverb of animations - generally more straight forward than transitioning things via CSS animation, which to me is getting your nouns to be your adverbs.)

Angular came on the scene and leaned heavily into the all-is-a-tag - but especially with early Angular.js, you had to build a lot of pipework.

The declarative paradigm of React (et al.) is an interesting variant on all the noun/verb relation. Its main point is you set up a relationship so your verb makes your DOM noun (based on your data noun) and then you don't have to worry about the deltas when the data noun changes; it's always redrawing from scratch.

Over time, Vanilla JS got good. String templates are extremely powerful, and when combined with .map().join("") doing declarative programming in the browser without a framework is now a viable option. There are huge implications for people who like to make evergreen low-maintenance projects.

Htmx is an interesting throw back to letting the server do more of the work (and not caring so much about what language is running there). What I find odd about that is 90% of what it's known for was handled a decade earlier via jQuery's  $().load(); function, but those partial page updates didn't get much traction most places.

So finally, here is Alpine. It's back to that Angular way of using tags (or rather attributes) for binding and content. It seems pretty hip! One thing the Vanilla JS approach of declarative programming doesn't cover is the automatic re-render, but Alpine seems to have that covered.

(I posted this on LinkedIn, Stephen Wicks said

Have you seen this site? https://ahastack.dev/

I did a small experiment with Alpine once, but putting js inside html attribute strings felt awkward to me. Looks like the article you posted shows the more natural way to do it.

 So that might be worth checking out.)

No comments:

Post a Comment