When to use front end component based libraries and what do they do?

Short Answer

State Management.

Someone wise once said the difficult things in software engineering are cache invalidation and naming things. Well, that someone never worked on modern front end applications. Period.

Long Answer

As browsers, front end tools, and frameworks evolved over the period, a lot of desktop applications were started being ported from Desktop to the Browser. Desktop applications had a practical problem that they just could not be reliable on a multitude of base operating systems and architectures. This is when the powerful browsers opened a different door. More and more applications started migrating to be ported to web apps. This paved way for a mindset change on how to build web apps. Until this point, jQuery was a hero and its downfall would begin. jQuery does a lot of good things like DOM access, manipulation and the ease of use. On the flip side, it does not address one area at all, that is state management.

What is state management?

State is all the information your application has decided to retain for the further life cycle of the page / application. It is also the DOM reflecting that particular set of values and computations and reacting to them in a scalable or reliable way. It is also the information being inputted by the user and our application updating its data. In complex front end applications, different parts of the page rely on the same piece of information with different computations on them. This problem exponentially increases when data and the UI inputs / interactions increase.

Let’s imagine this scenario

Lets says you have a list of items and based on that list you have logic to show the list when there are 3 or more fruits. And on deleting fruit items, as expected it should hide or show the list based on the number.

Method 1:

document.addEventListener("DOMContentLoaded", function(event) {
  var fruits = [];
  addFruit(name) {
    fruits.append(name);
    renderFruits()
  }

  renderFruits() {
    document.getElementById('list').children().remove();
    if (fruits.length => 3) { 
        for (fruit in fruits) {
          var span = document.createElement("SPAN");
          span.val(fruit);
          document.getElementById('list').appendChild(span);
        }
    }
  }
  deleteFruit(fruit) {
    var index = fruits.indexOf(fruit);
    fruits.splice(index, 1);
    renderFruits();
  }
}

Method 2:

document.addEventListener("DOMContentLoaded", function(event) {
  var fruits = [];
  addFruit() {
    var input = document.getElementById('fruit-text');
    fruits.append(input.val());
      renderFruits()
  }
  renderFruits() {
     if (fruits.length > 3) {
        for (fruit in fruits) {
          var span = document.createElement("SPAN");
          span.val(fruit);
          document.getElementById('list').appendChild(span);
        }
     }
   }

  deleteFruit(fruit) {
    var index = fruits.indexOf(fruit);
    fruits.splice(index, 1);
    var element = document.getElementById(fruit);
    element.parentNode.removeChild(element);
    renderFruits();
  }
}

This way of writing apps in not scalable and error prone and time consuming.

Components

Developers now a days agree the way to build modern web applications is to use component based system. A component based library encapsulates a thinking where a component is a small reusable piece of code which maintains its own state and DOM tree. This reusable piece of code contains both JavaScript and HTML, the former to hold the data and the later to act as a view. The magic sauce is the component libraries core API which binds the JavaScript and the HTML together.

Let’s imagine this scenario

Let’s redo the above scenario using a component based state approach. I’ll be writing this in Vue but it should not be very different from Angular or React.

%script
    fruits = [],
    methods: {
     deleteFruit(index) {
       this.fruits.splice(index, 1);
     },
   },
});

%template{v-if: 'fruits.length > 3'}
  %span{v-for: '(fruit, index) in fruits' @click='deleteFruit(index)'}
    {{fruit}}

Take away

This is the reason why libraries / frameworks like Angular / React / Vue exist, to solve the state management problem. There are some misconceptions floating around as to why they exist and their usage in wrong way, for example, using these libraries in a place where the application does  not retain much of data, or using it in scenarios where people want to modularise code using components. Although they are not bad reasons to use them, they aren’t good either. Using VanillaJS and jQuery in such use cases is still a better way to go, as it is less browser taxating.

---