DEV Community

Implementing Reactivity from scratch

Siddharth on August 12, 2021

Reactivity is at the heart of many web interfaces. It makes programming robust and interactive web apps much, much easier. Although most frameworks...

Read full post

GrahamTheDev • Aug 12 '21

REPL isn't working but other than that this is well written and clear!

Most people haven't heard of getters and setters in JS.

Your next one should be on proxy as an alternative way to do the same / similar.

Great article! ❤🦄

Siddharth • Aug 13 '21

Yeah, the REPL has a lot of problems. I actually opened two issues on it the last day.

Proxy is not that supported, so I chose getters/setters.

intermundos • Aug 13 '21

What do you mean proxy not supported? Proxy is much supported. In fact, vue 3 reactivity is base on Proxy.

Siddharth • Aug 13 '21

It's not supported everywhere

intermundos • Aug 13 '21

Yes, for sure. Only if you support some esoteric platforms keep writing getters and setters.

GrahamTheDev • Aug 13 '21

Proxy is not that supported, so I chose getters/setters

But you are using arrow functions so the difference will be next to nothing!

REPL seems to work now!

Mike Talbot ⭐ • Aug 13 '21

TBF arrow functions can be provided by babel, proxy cannot be polyfilled. I don't use them either because of the need for IE11 support.

Richard • Aug 13 '21 • Edited

This is really well written! Thank you for the explanation!!

Just checking:

set name (val) {
        this.name = name;
        // TODO notify
 }

Should this have been this.name = val taking the value from the setter param?

Siddharth • Aug 13 '21

Welcome 😁

Attila Gulyas • Aug 17 '21

I got bogged down at the very beginning at const who =, especially when I read "Later, you change who"... I was under the impression that JS constants cannot be changed, and it also didn't work for me when I tried, but I may be missing something basic.

Siddharth • Aug 18 '21

That's my bad, constants can't be changed. I'll fix it. Thanks!

John Warner • Aug 15 '21

Nice article. The Modstache library I wrote uses this approach for reactivity. It uses Object.defineProperty to modify object property getter and setter functions to automatically modify the DOM when the property is modified. It also uses a Proxy for array manipulations. It's an efficient way to detect changes to an object and perform an action, log activity, etc.