Vanilla JS - very powerful javascript framework

Oddly enough, on Habré the mention of this powerful framework was found only in one comment from April 2012.

Introduction

For me, this topic is particularly relevant, because lately on Habré a huge number of js frameworks are mentioned. Some of them are the authors of various projects on the Web, some - they write themselves, not really understanding why . Someone just writes their bikes .

My opinion is that we should strive for the absence of a redundant code, for maximum minimalism, sorry for the tautology.
If you only need to select html elements for the entire site by their id - it’s stupid to include jQuery.
')
If you need to build a bunch of js-files on a Node.js project and compress them - it’s stupid to write or connect heavy frameworks with a bunch of settings, parameters, additions and methods, because the simplest script that sticks together files and drives them through Croucford jsmin will be much faster, safer and easier.

The more code - the more errors. The more third-party code - the harder it is to support the project. After all, when you take someone else's code, you take responsibility for its support. It will be impossible to say "this bug is not mine, but out of that library."

Vanilla js

So, let's start the review of this most powerful and most popular JS framework in the world.

(hereinafter - translation from the official website of the framework )

The Vanilla JS team supports every byte of the framework code and works hard every day to make it small and intuitive.
Who uses Vanilla JS? Good thing you asked, here are some examples: Facebook, Google, YouTube, Yahoo, Wikipedia, Windows Live, Twitter, Amazon, LinkedIn, MSN, eBay, Microsoft, Tumblr, Apple, Pinterest, PayPal, Reddit, Netflix, Stack Overflow.

In fact, Vanilla JS is already used on more sites than jQuery, Prototype JS, MooTools, YUI and Google Web Toolkit combined !

On the site you can download the framework by selecting the functionality you need:

• DOM (Manipulations / Selectors)
• Prototype system of objects
• AJAX
• Animations
• Event system
• Regular expressions
• Functions as objects
• Closures
• Library of Mathematical Methods
• An array library
• Library to work with strings

Plus you can customize your build:

• Compress source
• UTF8 encoded
• Use "CRLF" line breaks (Windows)

At the maximum configuration, the framework will weigh:
Uncompressed: 0 bytes, compressed: 25 bytes.

Deployment

The Vanilla JS team is proud of the fact that it is the easiest framework of all time; Use our production strategy for production, and your users' browsers will load Vanilla JS into memory even before they start loading your site.

To connect Vanilla JS, simply add the following line to your HTML:

<script src="path/to/vanilla.js"></script> 

When you are ready to put your project on production, change the connection to a much faster method:

That's right, completely without code. Vanilla JS is so popular that browsers automatically load the framework for ten years.

Comparison of speed with other frameworks

DOM element search by ID

Framework	Code	Op. \ Sec
Vanilla js	document.getElementById('test-table');	12,137,211
Dojo	dojo.byId('test-table');	5,443,343
Prototype JS	$('test-table')	2,940,734
Ext js	delete Ext.elCache['test-table']; Ext.get('test-table');	997,562
jQuery	$jq('#test-table');	350,557
YUI	YAHOO.util.Dom.get('test-table');	326,534
MooTools	document.id('test-table');	78,802

Search for items by tag name

Framework	Code	Op. \ Sec
Vanilla js	document.getElementsByTagName("span");	8,280,893
Prototype JS	Prototype.Selector.select('span', document);	62,872
YUI	YAHOO.util.Dom.getElementsBy(function(){return true;},'span');	48,545
Ext js	Ext.query('span');	46,915
jQuery	$jq('span');	19,449
Dojo	dojo.query('span');	10,335
MooTools	Slick.search(document, 'span', new Elements);	5.457

Code examples

Smoothly hide an item

Vanilla js	var s = document.getElementById('thing').style; s.opacity = 1; (function(){(s.opacity-=.1)<0?s.display="none": setTimeout(arguments.callee,40)})();
jQuery	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $('#thing').fadeOut();</script>

AJAX call

Vanilla js	var r = new XMLHttpRequest(); r.open("POST", "path/to/api", true); r.onreadystatechange = function () { if (r.readyState != 4 || r.status != 200) return; alert("Success: " + r.responseText); }; r.send("banana=yellow");
jQuery	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $.ajax({ type: 'POST', url: "path/to/api", data: "banana=yellow", success: function (data) { alert("Success: " + data); }, }); </script>

Conclusion

More information about Vanilla JS can be found at the links:

• Vanilla JS Documentation
• Various books on Vanilla JS
• or try some of the plugins for Vanilla JS

When you sign your Vanilla JS project, you can use this handy button:

-

from the author of the post

Well, perhaps this is really the best JS framework!
I advise you, first of all, to consider it, and only when absolutely necessary, take on something else.