Build Reactive UI with Plain Javascript
in this article we are going to learn about reactive components,and how to deal with updating UI when state of component changes!
what is meant by reactivity when coming to UI?
in general an app may have a particular state/data right!, we need to keep on update our UI when state changes, in case of some libraries/frameworks they have built in ecosystem, that updates ui when state changes,
in plain vanilla javascript we do like
let’s take an example,
as per the above code snippet, we just get some data from api and saving it into the state and rendering ui, upto this it’s perfect, but what if we have data that changes continuously, then we required to explicitly re-render ui
so here reactivity comes into picture, when state changes there should be a trigger that does whatever tasks we wanted to do with the updated state.
but we can get rid of this,we have powerful javascript features called proxy and closures
Our goal is to transform normal state into observable/reactive state that riggers changes in our ui
let’s get started
let’s say we have some DOM container that is nothing but a normal HTMLElement with some identifier like class,id,..etc and it may has few properties like innerHTML,textContent, value,..etc, that’s where we are gonna show state data,
it’s kind of two way data binding, the target HTML element might be anything,
let me quickly explain with the code snippet, btw, this code snippet works similar to react hooks.
closures are powerful js feature that enables inner function to access its parent’s member variables and functions
i decided to ‘make a initial function as closure that takes few parameters like initial value for the state, and selector for HTML Element and property to be monitored on.
it returns an array/tuple of functions getVal returns the current value of the state and setVal(newVal) sets a new value to the state.
how we can use it?
so here is the markup that has a <div> with class container
we can initialize our observable using the closurehook we previously made as
we get’s two functions from our not awesome useClosureHook by array destructuring. we can just invoke them as normal functions,rendering is taken by closurehook itself so we can just focus on setting/getting state data.
the same can be done using proxy but Currently, proxy support is implemented in Node and all current browsers, with the exception of Internet Explorer 11.
ES6 proxies sit between your code and an object. A proxy allows you to perform meta-programming operations such as intercepting a call to inspect or change an object’s property.
let’s Test our both strategies as they work similar
so here, we are giving “ “ as inital value and css selector and property we are setting is “innerHTML”
i’m continuously updating state variables using setInterval
and here is the final output
instead manual setting a tightly coupled functionality in the hook
we can pre configure it with the callback
we can do a lot with closures and proxies
checkout these
Thank you for reading this,I’M noob blogger, your feedback can helps me a lot!
