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

MDN docs on es6 Proxy

javascript closures

Thank you for reading this,I’M noob blogger, your feedback can helps me a lot!

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

State is on the Hook for Functional Components with React Hooks

Why should we use react :)

Stop using nested ternary operators. Here’s why.

Building a Web Application with React, Webpack & Bootstrap

Using Angular-Elements in a Chrome Extension

How to export all __attribute__((constructor)) functions based on Mach-0

Practices for clean coding in JavaScript

Function vs Class Components in React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store



More from Medium

Closure In Javascript

Introduction to Modern JavaScript.

Javascript ES6 Modules

Javascript Error Handling