How to build a reactive engine in JavaScript. Part 2

How to build a reactive engine in JavaScript. Part 2

If you have ever worked with Vue.js, Ember or MobX I’m pretty sure you stumbled upon so-called computed properties and dependency tracking. Learn how deal with this issue and build a reactive engine in JavaScript.

Hey! If you have ever worked with Vue.js, Ember or MobX I’m pretty sure you stumbled upon so-called computed properties. They allow you to create functions that can be accessed just like normal values, but once computed they are cached until one of its dependencies has changed. In general this is a concept very similar to getters and in fact, the following implementation will be using getters. In a smart way. ;)

This is the 2nd part of the "How to build a reactive engine in JavaScript" series. Before reading any further it is highly recommended to read Part 1: Observable objects, because the following implementation is built on top of the previous article's code.

Computed properties

Let’s say we have a computed property called fullName which is a combination of firstName and lastName with space in between.

In Vue.js such a computed value could be created like this:

data: {
  firstName: 'Cloud',
  lastName: 'Strife'
},
computed: {
  fullName () {
    return this.firstName + ' ' + this.lastName // 'Cloud Strife'
  }
}

Now if we use the fullName somewhere in our template, we expect it will be updated whenever firstName or lastName change. If you come from an AngularJS background you might also remember using expressions inside the template or function calls. Of course, this works the same when using render functions (with JSX or not); it doesn’t really matter.

Let’s consider the following example:

<!-- expression -->
<h1>null null</h1>
<!-- function call -->
<h2></h2>
<!-- computed property -->
<h3></h3>

The result of the above code will be mostly the same. Each time firstName or lastName changes, the view will update with the headers and show the full name.

However, what if we use the expression, method call and computed property multiple times? The expression and method call will have to be calculated each time they are accessed, whereas the computed property will be cached after the first computation until one of its dependencies change. It will also persist through the re-render cycles! That’s actually quite a nice optimization if you consider that in event-based modern user interfaces, it’s hard to predict which action the user will take first.

javascript vue.js development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Vue.js Web App Development | Skenix Infotech

Our expert Vue.js developers follows Agile methodology that delivers high-quality & affordable Vue.js services. Hire Vue.js Developer from Skenix Infotech.

Top Vue.js Developers in USA

Vue.js is an extensively popular JavaScript framework with which you can create powerful as well as interactive interfaces. Vue.js is the best framework when it comes to building a single web and mobile apps.

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.