3 ms·

One think I'm missing in vanilla JavaScript is reactivity. What's the simplest way to make it so that the page will always display the current value of a variab

by xigoi 5y ago

One think I'm missing in vanilla JavaScript is reactivity. What's the simplest way to make it so that the page will always display the current value of a variable (or something calculated from the current value)?

divbzero 5y ago
Proxy [1] is one way to do it using vanilla JavaScript. [1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
LAC-Tech 5y ago
Something like the observer pattern: https://en.wikipedia.org/wiki/Observer_pattern#JavaScript https://en.wikipedia.org/wiki/Observer_pattern#JavaScript If you look at it from another angle, you might see that `setState` could take a function oldState => newState instead of a raw value. Then you have a `reducer` in the sense of redux. You could also just make the list of observers functions, instead of objects with the signal method. All easily done in about 20 LOC.
veganhouseDJ 5y ago
This is why I just love Sveltekit. There is just not that much to even learn beyond vanilla JS.
- xigoi 5y ago
  I once tried to learn Svelte, expecting to be able to write a simple webpage in HTML and JS and having Svelte make it interactive, but it asked me to clone a whole template repo. No, thanks.
Handytinge 5y ago
How do the frameworks you use do it? If the value is remote, I assume a websocket or regular AJAX poll. If the value is local, simply binding an event emitter to the DOM should do it. Both would be lower load and compute than most frameworks.
- xigoi 5y ago
  https://github.com/zserge/q https://github.com/zserge/q, an experimental minimalistic clone of Vue, uses object.defineProperty. (There has been an attempt to use Proxy instead, but there's a problem with it: https://github.com/zserge/q/issues/1 https://github.com/zserge/q/issues/1) I don't think I could make it any lighter if I wanted to.

by xigoi 5y ago

divbzero 5y ago

Proxy [1] is one way to do it using vanilla JavaScript. [1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

LAC-Tech 5y ago

Something like the observer pattern: https://en.wikipedia.org/wiki/Observer_pattern#JavaScript https://en.wikipedia.org/wiki/Observer_pattern#JavaScript If you look at it from another angle, you might see that `setState` could take a function oldState => newState instead of a raw value. Then you have a `reducer` in the sense of redux. You could also just make the list of observers functions, instead of objects with the signal method. All easily done in about 20 LOC.

veganhouseDJ 5y ago

This is why I just love Sveltekit. There is just not that much to even learn beyond vanilla JS.

xigoi 5y ago
I once tried to learn Svelte, expecting to be able to write a simple webpage in HTML and JS and having Svelte make it interactive, but it asked me to clone a whole template repo. No, thanks.

Handytinge 5y ago

How do the frameworks you use do it? If the value is remote, I assume a websocket or regular AJAX poll. If the value is local, simply binding an event emitter to the DOM should do it. Both would be lower load and compute than most frameworks.

xigoi 5y ago
https://github.com/zserge/q https://github.com/zserge/q, an experimental minimalistic clone of Vue, uses object.defineProperty. (There has been an attempt to use Proxy instead, but there's a problem with it: https://github.com/zserge/q/issues/1 https://github.com/zserge/q/issues/1) I don't think I could make it any lighter if I wanted to.