JQuery has all we need to make it reactive, if we add these four things.

reactive-jquery.md

Reactive JQuery

28 January 2021

Prior art by Meredith Matthews (July 2020), at https://css-tricks.com/reactive-jquery-for-spaghetti-fied-legacy-codebases-or-when-you-cant-have-nice-things/.

Turns out JQuery has almost everything we need to make it reactive (render-on-change-to-data). The virtual DOM is unnecessary if we have guards against unnecessary rendering. We don't need JSX to make it all look more like HTML templates.

This is heresy and not well thought out yet. Certain projects may do this already. None, I would bet serious Gamestop options, uses the SAM pattern.

JQuery has...

• $.ajax(): for data retrieval and submission
• $.clone(): for template retrieval
• $.contents(): for element children and childNodes
• $.data(): for template element state
• $.map(): for collection copying and traversal
• $.on(): for registering event handlers
• $.trigger(): for firing event handlers for a given type
• $.triggerHandler(): for firing all event handlers for a given element

JQuery reactive

Small list of missing pieces.

• $.diff(data): return a path-map of differences between the current data and the new data
• $.next({ name, data }): fire an event of type name as a notifier to other registered listeners except on the current node.
• $.on("render"): register a render-data change handler on the current node
• $.render(data): pass data to the current node - internally calls diff() - if there's a diff, the current node's on("render") callback runs

Descendant drilling is tight coupling

Renders should occur only on the current node and NOT on the children or descendants. These "components" should be defined explicitly and not merely assumed or "passed in."

That's it.

Update March 1, 2021

Looks like JSViews has some of these ideas already.

• $.templates()
• $.link(), $.observable(), $.observe()

However, the template DSL and one of its functions is susceptible to template string injections.