Improve your JavaScript skills by writing Framework yourself

Tram Ho

Have you ever wondered how a framework works?

When I discovered AngularJS after learning Jquery from so many years ago, AngularJs bed like it is a dark magic to me.

Later, Vue js came out, and when analyzing how it worked, I tried writing my own 2-way binding system.

In this article, I’ll show you how to write a Javascript framework with custom HTML elements, communication and 2-way binding.

How does communication work?

It would be great to start with an understanding of how the framework works. In fact, when you declare a new element in Vue js, the framework supports each of the properties (getters and setters) using the proxy design pattern.

Therefore, it will be able to detect property value changes either from input to code or from user input.

What does the proxy design pattern look like?

The idea behind the proxy design pattern is very simple is overloaded access to an object. A similar example in life is accessing your bank account.

For example, you cannot directly access your bank account balance and change as needed. You need to ask the authorized person, in this case the bank where you are sending money.

In the above example, when using the object bank to access the balance, the getters function is overloaded and it always returns 9,000,000 instead of the property’s value, even if the property doesn’t exist.

By overloading the setters function, you can control its behavior. You can change the value into the set function, update other attributes instead, even don’t do anything.

Example of how it works

Now that you understand how the proxy design pattern works, let’s start writing your own Javascript framework

For simplicity, I will mimic the Angular Js syntax for implementation. Define a controller and bind the template to the controller action.

First, define a controller with properties. Then, use this controller in the template. Finally, use the ng-bind property to enable double-binding with the value of the element.

Assign the template and initialize the controller

To have properties for the bind we need to have a controller and define the properties. Therefore, you need to define the controller and include it in the framework.

During the controller definition, the framework looks for elements with the ng-controller attribute.

If it matches one of the declared controllers, it will create a new instance of that controller. That instance controller will be responsible for only part of this template.

Here is how to declare a controller manually. The object controller will not contain all of the controllers declared in the framework by calling addController.

For each controller, a factory function is saved to initialize the new controller as needed. The framework also stores each new instance of the same controller used in the same template.


At this point, we have an instance of the controller and a template that uses this controller instance

The next step is to expect to bind the element using the controller’s properties.

Quite simply, it stores all the constraints of an object (used as a hash).

This variable contains all the properties associated with the current property and all DOM elements bound from this property

Bind controller properties 2-way

After the preliminary work has been done by the Framework, now comes the fun part: double-binding.

It involves binding the controller’s properties to the DOM elements whenever the code updates the value of the properties.

Also, don’t forget to associate DOM elements with controller properties. In this way, when the user changes the input value, it updates the controller’s properties. It then also updates the other DOM elements associated with that property.

Detect updates from code via proxy

As explained above, Vue wraps components in a proxy to interact with changes to properties. Do the same thing by delegating the setter to only properties bound to the controller.

Whenever a property is set, the proxy looks for all the elements associated with the property. It will then update them with new values.

In this example, we will only support constraints from the input element, since their value is set.

Reaction on element events

The last thing to do is listen for user interactions on the interface. DOM elements trigger events when they detect value changes

Listen for those events and update properties that bind with new values

You can watch the full demo here

Share the news now

Source : Viblo