Understanding Vanillin

About

Vanillin is a JavaScript DOM user interface library. Vanillin leverages underlying metaES interpreter, allowing all metaES's capabilities to be immediately available and custom extensions to be developed. Read more about metaES.

In many areas, Vanillin is similar to popular (in 2023) libraries or frameworks like React, Angular, Vue or Svelte. However, Vanillin can also be seen as visitor of already rendered DOM. It resembles an enhanced version of jQuery. Vanillin's goal is to enable the interactivity with minimal development effort, potentially bypassing the need for a build step altogether.

Why?

Vanillin started as an experiment to extend metaES and create user interface library which is useful from day zero. Early experiments were successful and allowed to build DOM interface with minimal development effort at very fast pace. Build size and speed never were main goal of the project - speed of apps development and user experience were instead.

How it works?

As mentioned, Vanillin embraces the idea of improving existing DOM elements by utilizing JavaScript to manipulate DOM attributes, tags, and text content. Although the native DOM has proven its worth in keeping the web running smoothly for many years, it shows limitations when we're solely dependent on native web standards. They lack essential software development features like composition, isolation (although Shadow DOM and WebComponents have improved it), modularization, and flow control. All JavaScript code in <script> tags and event handlers like onclick runs within a single global scope. Here comes Vanillin, designed to bridge these gaps and provide the missing components.

Vanillin walks through the DOM tree generated by the browser in a top-down, depth-first manner. For each visited node, it determines the next action based on the provided configuration, node properties node attributes and other custom logic. Think of it as an interpreter pattern. Vanillin is designed to be highly configurable, allowing users to tailor it to their specific needs, depending on their level of expertise with Vanillin. Of course, Vanillin generates new DOM nodes or trees when the situation demands it, for example in loops.

For example, you can style your HTML markup to represent the 'loading' state without any JavaScript whatsoever. Later on, when Vanillin and the data is ready, it will modify the DOM and populate it with the data. In other frameworks, this process is commonly referred to as "hydration".

Installation

• npm i vanillinjs --save,
• build step with any bundler,
• or <script src=""></script>.

Using Vanillin

Although not required, it is recommended to read about metaES first. This will make much easier to understand how Vanillin works.