VanJS: A Minimalist, ‘Vanilla JavaScript’ UI Framework

Backend coder Tao Xin wanted a frontend UI framework with a modern developer experience — including an easy-to-use API and some capacity for reactivity — but he also wanted the simplicity of vanilla JavaScript. So he built VanJS, short for vanilla JavaScript, which is an open source UI framework.

“I started with my own needs, because I needed to build some UI for my own purpose,” Xin told The New Stack. “But even for me with decades of programming experience, I found it very hard to jump-start to learn some UI from scratch.”

VanJS is purposely unopinionated with zero dependencies, he said.

“I want to make sure that I’m adding as few restrictions as possible to the users,” Xin said. “Actually zero dependency is very helpful to make it un-opinionated because you don’t need to bring up anything to work with it. The more things you bring up, the more dependencies you have, the more restrictions you might have, because there might be special rules in any dependency.”

Use cases for VanJS include creating a Chrome extension or building a personal website — basically, anywhere where a heavy framework would be overkill, he said.

“The use cases are mostly small to medium-scale applications,” he said. “Understandably, if you are really about to do something large, like the Facebook website, there could be tradeoffs to be aware of. But for a lot of use cases, these large-scale frameworks are really an overkill — especially for personal tools, personal websites.”

‘Smallest Reactive UI Framework’

VanJS is the “world’s smallest reactive UI framework,” according to its GitHub repository. It offers an alternative to React and native GUI applications. It’s comparable to the Swift UI, which is used to build apps for iOS or even older technologies such as Objective C, Xin told The New Stack. But rather than using a specific language solution for the UI, he decided to take a more web-based approach.

“In my opinion, web-based applications can replace most native applications,” he said. “For most use cases, the actual performance difference is negligible. You actually don’t need the native framework for the performance of your application.”

Web apps can be written once and run everywhere, he added.

“If you want to build something with some UI, for a particular platform, the entry bar is quite high,” Xin explained. “If you build a Windows program, an iOS program, an Android program, or a MacOS program — they are all different. The underlying technologies, the frameworks, the libraries they can use are completely different. So this is something, in my opinion, [where] the web can be easily leveraged. And the performance doesn’t really matter for more than 90% of the use cases.”

It continues a trend that started with Angular and then React trying to programmatically build something in a more declarative way, he explained.

A Minimalist Add-on to JavaScript

“The UI of my application depends on some internal state; and while handling events, I’m mutating some states. It is a guarantee that all the states are automatically propagated into the UI,” he said. “So when you build the application logic, you don’t need to worry about how I can update my UI. This is what VanJS offers. It is a minimal framework, it is a minimal add-on to Vanilla JavaScript.”

It’s minimal, but it offers a more modern developer experience so that programmers can build the UI in a more declarative way.

“Of course, you can build an app with pure vanilla JS with no library at all, but the API that you can get is rather outdated,” Xin said.

VanJS supports states, state bindings and can propagate state changes to the UI, he said — meaning that any state changes will automatically be reflected in the corresponding UI element, keeping the display and data in sync. This while being “much more vanilla compared to other frameworks,” he said.

“When you build the application logic, you don’t need to worry about how I can update my UI — this is what VanJS offers,” Xin said. It also doesn’t require the JSX syntax, which produces React elements.

“For instance, a typical Reactive program is written in JSX,” Xin said. “It cannot even run in a browser, you have to use some tools to transpile into another format. And the other format is kind of like compiled code that is not quite readable.”

Advantages of VanJS

VanJS, by comparison, runs in the browser, creating a more immediate, REPL (Read-Eval-Print Loop) experience for the programmer.

“If you have some ideas, you can open the developer console of the browser and you just type something. You just build your app on the fly. There’s no traditional create, compile, deploy and test cycle. You just build your app on the fly, right in the browser, by typing something in the developer console,” he said.

One benefit of VanJS is that it’s ultra-lightweight on several fronts, he said, including limited top-level functions exposed in the API. This, he added, makes it easy to learn.

Its second advantage is bandwidth, according to Xin. While network bandwidth getting larger has afforded developers the ability “to load some dependencies,” the browser still needs to load the script, parse the script, and execute it.

“I did some benchmarks for VanJS. It performed quite well, although we don’t over-optimize things, so among more than 100 frameworks, we are not among the top…but we’re really ahead of the curve,” he said.

Integration with LLMs

He cited as a third advantage integration with large language models (LLMs). He’s experimenting with teaching LLMs how to code with VanJS. There’s a VanJS App Builder, which is an AI-powered chatbot that can create pages with VanJS developers can explore.

“This is actually a custom GPT model to build apps for VanJS. I’m instructing the language model to just read a tutorial and the sample apps from the website,” he said. “It had zero knowledge about VanJS, but just by learning the tutorial [and] by browsing the website, it can build a very very good app that is bug-free, for a few samples I tried.”

Part of the reason it works so well is that large language models learn better from smaller knowledge bases, so VanJS’s petite footprint gives it an advantage with LLMs, he explained.

Using VanJS

VanJS can be leveraged in a couple of different ways, Xin added. The easiest is to paste a line that loads the library from the CDN and type the application code right into the HTML file. However, it can also be used with npm, which helps manage dependencies with better support for bundling, he said.

VanJS released version 1.0 in August and will be forward-compatible at the API level for upcoming releases, he said. Xin is looking for more people to use VanJS and provide feedback in the GitHub discussion channel.

“Even among programmers, most programmers don’t want to build something for themselves,” Xin said. “With just some basic programming skills, it’s really not that hard to build some tools for your own [use]. I think most people with VanJS can build something useful within a few hours.”

TRENDING STORIES

Source: thenewstack.io