VaneJS is vain JS

Computer code on a computer monitor

10 And Moses and Aaron went in unto Pharaoh, and they did so as the LORD had commanded: and Aaron cast down his rod before Pharaoh, and before his servants, and it became a serpent.

11 Then Pharaoh also called the wise men and the sorcerers: now the magicians of Egypt, they also did in like manner with their enchantments.

12 For they cast down every man his rod, and they became serpents: but Aaron's rod swallowed up their rods.

Exodus 7:10-12, The Bible
Poem: Vain Vane
Vain Vane, go away;
We don't want you here today;
We prefer vanilla tech;
Not the vain crap you inject.

Vain Vane, you're a pain;
Wind-twisted just like your name;
You cause my bloody veins to boil;
You give developers much toil.

I'm very surprised that new JS frameworks are still promoted in this time and age. I hold fast to the belief that all JS frameworks were never a good permanent solution. I was hoping that with all the problems of React and Angular, we would move away from this framework obsession.

But lo and behold, another "framework that is not really a framework" called VaneJS rises from the ashes. When will these people quit?

In this post, I would like to take a look at the false advantages of VaneJS and compare them to a no-framework setup.

It has zero build steps

His claim: Just add a single static .js file to your project. No bundlers, no compilers.

My opinion: You know what else has zero build steps? Vanilla JavaScript!

Having no build steps is only a relative advantage; it only holds up if you compare it to other JS frameworks. But if you really don't want any build steps, just use HTML, CSS and vanilla JavaScript.

It's backend friendly

His claim: Works out-of-the-box with PHP, Laravel, Django, Express, ASP.NET — whatever you want.

My opinion: So does vanilla JavaScript.

No paradigm shift

His claim: Feels like HTML, behaves like a reactive system.

My opinion: How is that an advantage? HTML, CSS and JavaScript are usually separated for good reason. They all have different goals, and are more manageable when they are updated separately.

Not every project needs a reactive system. Sometimes building towards that in your project provides a better, more lean solution than a one-size-fits-all approach where you have to ship a large framework to the browser.

It has minimal mental overhead

His claim: You don’t need to "learn a framework." If you know HTML and JS, you’re good.

My opinion: The most minimal mental overhead is when you use the vanilla web languages: HTML, CSS and JavaScript.

Reactive stores between pages

His claim: Yes, you can store values and retrieve them across HTML pages.

For example:

<!-- about.html -->
<p data-vn-bind="mystore.name"></p>
// main.js
$setStore("mystore", { name: "SharedValue" });

My opinion: Has anyone ever heard of localStorage and sessionStorage? I think both of these features of the browser are flexible enough to hold any type of data you need to persist between page loads.

Also, does anyone really want to know what data-vn-bind means? Or what $setStore() does? Is any of this easy to interpret without reading the manual?

I know you need to read the documentation to learn about localStorage and sessionStorage but at least the only dependency it has is the browser. You don't need to download a whole framework to the browser.

It's really equivalent to bringing sand to the beach.

Once again, I don't see how this is an advantage.

Smart inline events

His claim: Attach multiple events inline:

<button data-vn-on="click:myFunc({user.name}); mouseover:logHover()">Click me</button>
$event("myFunc", ({ params }) => console.log(params[0]));
$event("logHover", () => console.log("hovered!"));

My opinion: You would be better off learning the JavaScript event system and how it works with the DOM. It is guaranteed to work on every browser, and you would have a better understanding of the simplicity of JavaScript coding.

Bottom line

Just the same way Aaron's staff swallowed up all the other staffs of the magicians, HTML, CSS, vanilla JavaScript, and the browser would swallow every framework out there.

So learn HTML, CSS and JavaScript. That is all you need to make websites. Unless of course you like pulling teeth.

Further reading

If you would like to reply to or comment on this blog post, feel free to email me at efe@mmhq.me.