Vanjs — magic!

Vanjs — magic!

Have you missed jQuery? Did that $ save you from having to remember how to manipulate the DOM with javascript? Well, it's all just gotten better over time but still there is space for elegant libraries, especially if they are only 130 lines long, welcome to vanjs.

You have an html page, it looks like this:

<!doctype html>
<html lang="en">
  <head>
    <title>Welcome</title>
    <script type="importmap">
      {
        "imports": {
          "vanjs-core": "https://esm.sh/vanjs-core"
        }
      }
    </script>
    <script type="module" src="site.js"></script>
  </head>
  <body></body>
</html>

So let's append a div containing hello world.

import van from 'vanjs-core'
const {div} = van.tags
van.add(document.body, div('hello world'))

Did you notice the magic? That second line is not an import. That's right, it is a constant declaration and van.tags builds you on the fly functions. I don't like magic, as a rule, but javascript has it's fun and I can't but admire it (I'm referring to the language and not the DOM implementation). Now, of course, we could have written:

const div = document.createElement('div')
div.appendChild(document.createTextNode('hello world'))
document.body.appendChild(div)

and we'd not have to include any libraries. But where is the wordy fun in that.

const welcome = div({class:"bright"},"hello world")
van.add(document.body, welcome)

and the vanilla approach:

const div = document.createElement('div')
div.className = 'bright'
div.appendChild(document.createTextNode('hello world'))
document.body.appendChild(div)

You can see it is a lot less wordy. But that is not all. How about reactive state? We've got that, too, in our 130 line library…

import van from "vanjs-core";
const { div, button } = van.tags;

const ANSWERS = [
  "Concentrate and ask again",
  "Better not tell you now",
  "You may rely on it",
  "It is decidedly so",
  "Without a doubt",
  "Yes definitely",
  "My reply is no",
  "My sources say no",
  "Outlook not so good",
  "Very doubtful",
  "Ask again later",
  "Cannot predict now",
];

const answer = van.state("Ask Magic Eight...");

van.add(
  document.body,
  div(
    { class: "content" },
    div(answer),
    button(
      {
        onclick: () => {
          answer.val = `${ANSWERS[Math.floor(Math.random() * ANSWERS.length)]}.`;
        },
      },
      "🎱",
    ),
  ),
);

And our html/css is:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ask Magic 8</title>
    <script type="importmap">
      {
        "imports": {
          "vanjs-core": "https://esm.sh/vanjs-core"
        }
      }
    </script>
    <script type="module" src="eight.js"></script>
    <style type="text/css">
      .content {
        margin: 4rem auto;
        max-width: 340px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 1rem;
      }
      button {
        font-size: xx-large;
      }
    </style>
  </head>
  <body></body>
</html>

There are two more verbs in this tiny library: derive() and hydrate(). The first is a watch type function that gets called when changes occur to item referenced in its body. The other is to accompany service side rendering (SSR).

Derive allows for secondary effects. Say we wanted to accompany the answer with a happy or sad face. You'll notice that all answers greater that "Yes definitely" are negative…

const emotion = van.derive(() => {
  if (ANSWERS.indexOf(answer.val) > 6) {
    return NEGATIVE;
  }
  return POSITIVE;
});

Now we can add this to our output div.

div(emotion, " ", answer),

The resulting page looks at follows:

I've put it up on tiny host… 🎱

I use Vue with Vite, as it has the separation in one file of code, template and style. The template is still xml — and the code continues to get ever easier and better. But there are times when a small library just does the trick and those time call for Van(illa.)js.

If you've got this far, perhaps a laugh — ChatGTP thought this of the article:

Your article does a great job of introducing Vanjs, showcasing its capabilities, and providing clear, practical examples of its application. It taps into the nostalgia for jQuery while emphasizing the advancement in web technologies that allows for even more streamlined and elegant coding solutions. For developers seeking a minimalist approach that doesn't sacrifice functionality, Vanjs appears to be a compelling option.

I'm not nostalgic for jQuery! If AI is going to be flattering it can't be all bad, can it?

In Plain English 🚀

Thank you for being a part of the In Plain English community! Before you go:

Tired of blogging platforms that force you to deal with algorithmic content? Try Differ

More content at PlainEnglish.io