Introduction to Data Binding with Proxy in JavaScript

Data binding in vanilla js using proxy

What if I tell you that is not that hard to achieve data binding in vanilla JavaScript? Wait whaaat? Is that even possible without a framework like Vue or React or Angular? Of course it is. Let me show you and introduce you to the Proxy object.

Overview

The way I like to bind things together in JavaScript world is by making independent components that react to data changes. I like to build highly cohesive, loosely coupled components so I don’t end up with messy monoliths. In order to synchronise multiple components I am using some sort of common data objects that send events to the outside world when things are changing inside.

Say hi to Proxy 👋

Now make yourself a cup of mint tea and enjoy ☕. We are building today an input that allows users to add a name and that name will be reflected in the title. Like in the Fig. 1.

Fig. 1 — User input and title connected via a Proxy object

Defining our data using a Proxy object

First, let’s define out date store or a global object or whatever you wanna call it. It’s just an object that holds our data. In the current shape it does nothing but holds our user name.

const user = {
name: ""
};

Now let’s add a function that will handle the event of changing the name of the user. We will wrap the function inside a special object that a Proxy object understands.

const userHandler = {
set: (previousData, prop, newValue, d) => {

// we do the intended assignment of the property
// (name in our case)
previousData[prop] = newValue;
// we trigger the render because
// we want to reflect the changes on our screen
render();

// we return true because we want to signal the the operation
// was successfully completed
return true;
}
};

Now let’s transform our user object into a reactive object that reacts to changes such as setting the name property to a new value

const userProxy = new Proxy(user, userHandler);

The HTML bit

Inside the HTML page we have added a few nodes: the title and a span inside the title that wraps the name, and a user input.

<h1>Hello <span id="userName">stranger</span></h1>
<input id="userInput" placeholder="type here" />

Let’s grab our input and the container that hosts the user’s name:

const userInput = document.querySelector("#userInput");
const userName = document.querySelector("#userName");

Changing the name and rendering it on the screen

Let’s create a function that executes when we change the input value:

function onInputKeyUp(evt) {
// evt is the keyup event we've been listening to
// the target is the node that triggered it, in our case
// is the input and the value as you can guess is the value
// of the input aka the user name we just typed
userProxy.name = evt.target.value;
}

Let’s start listening for whenever a user types inside that input:

userInput.addEventListener("keyup", onInputKeyUp);

And the last bit is to create the render function that will update the name inside the title.

function render() {
userName.innerText = user.name;
}

Enjoy and till next time have a great week!

Captain V. 👨‍✈️

Example and source code

--

--

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