DEV Community

Cover image for What exactly is VanillaJS?

What exactly is VanillaJS?

I was browsing through the vanilla JS website because a lot of people recommended VanillaJS to me. If you look through the website, isn't VanillaJS just DOM? I mean, they said you didn't have to import the script, the syntax is exactly the same as DOM.

Is vanillaJS the same as DOM?
Please answer my question if you can.

Thanks!
Happy Coding!

Discussion (23)

Collapse
hasnaindev profile image
Muhammad Hasnain

Vanilla JS refers to pure JavaScript and non-vanilla JS may refer to JavaScript frameworks, libraries, supersets (TypeScript) etc.

I also want to make clear that Vanilla JS is not DOM. DOM (Document Object Model) is a language independent interface that helps you manipulate XML or HTML type documents. Meaning, you could use any language to INTERACT with DOM.

The same goes for vanilla JS. It is used to interact and manipulate DOM but it is not DOM itself. JavaScript is a programming language capable of creating desktop and native applications.

Collapse
leviathanprogramming profile image
π‹π„π‘½πˆπ‘¨π“π‡π€π Programming Author

Thanks, man. This was really helpful

Collapse
sergix profile image
Peyton McGinnis

What's an example separate from JavaScript of interacting with the DOM besides the browser's own rendering engine?

Collapse
hasnaindev profile image
Muhammad Hasnain

I don't understand what you mean but will answer according to what I did understand. An example of JavaScript interacting with DOM is, "document.getElementById." That's it. This method gets you an element which you may interact with, modify and remove.

Collapse
giseleml profile image
Gisele Leonardi

Yes, VanillaJS is literally just plain JS, no framework. I believe the page and name is some kind of joke. Also if you didn't notice, their link to the docs is the JavaScript's documentation on Mozilla xD

Collapse
wanmaoor profile image
wanmaoor

yeah, exactly, but I still like to mess it up with other people

Collapse
infinitewaves profile image
Infinite Waves

This is correct. It was a joke to highlight the silly rate at which frameworks were coming out, when JS was capable of handling the majority of stuff people were using the frameworks for anyway.

Collapse
leviathanprogramming profile image
π‹π„π‘½πˆπ‘¨π“π‡π€π Programming Author

I didn't know I was using it for all these years 🀣

Collapse
ryencode profile image
Ryan Brown

Hi,
Usually the term Vanilla is used to refer to the base state of system. Without extra libraries or add-ons. In this case Vanilla JavasScript would be, all the functionality of JavaScript as provided by the browser (or other runtime like node.)
The website you linked vanilla JS seems to be a humor site pointing out all the features that JavaScript comes with "out of the box", without using jquery or other add-on frameworks.
They are correct that no script import is needed, because it already is JavaScript.
Just remember that the DOM is not the Scripting Language: oblig, SO link

Collapse
inhuofficial profile image
InHuOfficial

As everyone has pointed out, it is a humour page designed to poke fun at bloated frameworks and to make developers think before using jQuery just to update some text in a button etc.

Although humorous it does have a very valid point. Don't use a framework for a mostly static site, speed is important and frameworks slow your page down.

Looking at your site and post history you have nothing to worry about at all (normally people recommend looking at the vanilla JS site when you use libraries for simple tasks).

Finally I will just say if you are creating stuff like that (your site) at 15 I think "old timers" like me should be looking over our shoulders! πŸ‘πŸ»

Collapse
patarapolw profile image
Pacharapol Withayasakpunt • Edited on

Actually, there are two variants of vanilla JS on web browser.

  1. The older one without import, and rely on <script src=""> and attaching to Window object. (And IIFE, if you want to avoid polluting the global scope. As well as, you might want to add "use strict" at the top of JavaScript)
  2. The newer one with import, and rely on <script type="module">. This one will not pollute the global scope, nor window object by default. Also, strict by default. As well as, it may be more performant.

Deno tries to follow the second pattern as well. However, Node.js has a different thing, commonjs. ESM is just a recent addition.

Collapse
cmuralisree profile image
Chittoji Murali Sree Krishna

Vanilla js is plain javascript, without any framework or libraries,
Javascript have few frameworks namely angular or vue.js
And have few Libraries most famous one jQuery

people call it as vanilla js, just to remind other developers still many things can be done without the need of any libraries or frameworks

Collapse
yoursunny profile image
Junxiao Shi

semicolon.js is more powerful than VanillaJS and only marginally larger in download size. It can be inlined like this:

<script>;</script>
Enter fullscreen mode Exit fullscreen mode
Collapse
patarapolw profile image
Pacharapol Withayasakpunt

What is Vajor.js? The website is dead.

Collapse
yoursunny profile image
Junxiao Shi

github.com/madrobby/vapor.js

<script></script>
Enter fullscreen mode Exit fullscreen mode
Collapse
kabrau profile image
Marcelo Cabral Ghilardi

Is JS but like a car without ABS and TCS and ESP :)

Collapse
wanmaoor profile image
wanmaoor • Edited on

Vanilla.js is the lightest weight js framework which has many features that can help you to interact with browser. 🀣🀣🀣🀣

FYI: Vanilla.js will push a new edition every year

Collapse
typo3freelancer profile image
Simon KΓΆhler

Of course it is just DOM, but it sounds better with a cool name, haha

Collapse
programistazpolski profile image
ProgramistaZpolski

VanillaJS is a term that refers to plain JavaScript without any frameworks or libraries, and It's not the same as DOM.

Collapse
hangtwenty profile image
Michael Floering
Collapse
borisnekezov profile image
Boris Nekezov

VanillaJS is only plain JavaScript !No React, Vue, Angular, jQuery etc. No framework!

Collapse
chakudi profile image
Vaishali JS

Vanilla JavaScript is just plain JavaScript used without any frameworks.

Frameworks generally add some flavours of their own to the way we use JavaScript. But when we go framework-less, there are no added flavours to our JavaScript code and that's why its called Vanilla JavaScript πŸ˜‹

Note: DOM is not JavaScript. DOM is part of Web APIs provided by browsers. When working inside browser, we almost always interact with the DOM API in some way, whether we are using some framework or plain Vanilla JavaScript.

Collapse
peerreynders profile image