Remix.run Logo
avsn a day ago

Re-creating minimal framework API is not that difficult. What is difficult is what frameworks are doing under the hood. To support ui=f(state) in the browser/dom you beed something more complex than pub/sub. The problems are 1. We need to calculate what part if UI depends on changed state 2.apply this to a dom efficiently. What author describes is a simple push-only reactivity which does not scale well because all updates are propagated to all subscribers. Libraries Solid and Vue (very simplified) are doing push-pull (push-pull-push) reactivity which involves traversing the dependencies for peace of the state, marking it as dirty and then recomputing the value of that peace of state. Another issue is DOM performance. When changing many parts of the state we want to apply changes to the DOM nodes in predictable and uniform fashion, avoid many writes/repaints, which usually involves some kind of scheduler. Another problem on top of that is measuring DOM before or after changes were applied (getBoundingClientRect can force synchronous layout/reflow, ResiseObserver is a more modern approach) and reacting to that.

Having said that I’m all for using solutions appropriate for the problem, but what many of such tutorials miss is a better problem statement. Yes frameworks are heavy, yes we may not need them. But problems with doing complex DOM manipulations are still there.