A javascript watcher that works just right

Ivan Orlov
HackerNoon.com
3 min readOct 19, 2016

--

Imagine a javascript watcher that does it right. It uses Object.defineProperty and requestAnimationFrame. It finds the right timing to trigger object changes. It’s clean, efficient and extremely performant.

It’s about time to start sharing my progress on the way to universality. I am working on a very interesting project that will remove the word re-hydration completely, and make universal frameworks finally usable and understandable for beginners.

But flexibility comes with decoupling. That’s why my future framework will be comprised of many tiny solutions. Any developer could just re-use them!

Let’s bring good old days of 2-way binding that is performant and resilient enough.

Let’s get some inspiration from here, right now:

LIVE EXAMPLE

In a nutshell, everything is based on async-watch. When you pass a template string, we extract supposedly watchable variables using extract-vars which is extremely fast. The next step is to bind watchers, which will notify wires-reactive about changes that happen within the template. Once received, angular-expressions (the only sane solution i have at the moment, and i am open for alternatives) will compile it and spit the result back at you!

So what doors does this library actually open? An absolutely safe and reliable 2-way binding. The watching library will take care of entire object hierarchy, making sure all watchers are intact. And yes, we don’t do dirty laundry AKA dirty checking.

We don’t need to worry about timing either. No need in $scope.$apply(), Zones become redundant. Changes are stacked in “transaction”. A callback is fired once browser is ready to paint your DOM!

Let’s stop patching javascript objects, invent extremely complicated solutions. Let’s go for efficiency and minimalism! React-js is not the only way to do things, in fact is not the right way for many requirements!

We can do better!

Stay tuned for more updates. And if you liked any of the libraries above, please, don’t forget to star them. If you have ideas, suggestions, questions, just poke me on Skype!

window.atob(“c2t5cGU6bmNoYW5nZWQ=”)

Hacker Noon is how hackers start their afternoons. We’re a part of the @AMI family. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.

If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!

--

--