paint-brush
A javascript watcher that works just rightby@ivanorlov
2,673 reads
2,673 reads

A javascript watcher that works just right

by Ivan OrlovOctober 18th, 2016
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

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

Company Mentioned

Mention Thumbnail
featured image - A javascript watcher that works just right
Ivan Orlov HackerNoon profile picture

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=”)