- Understanding Vanillin
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.
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?
<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.
npm i vanillinjs --save,
- build step with any bundler,
Although not required, it is recommended to read about metaES first. This will make much easier to understand how Vanillin works.