Vanilla JS
for building incredible, powerful JavaScript applications.
Introduction
TheVanilla JS team maintains every byte of code in the framework and works hard each day to make sure it is small and intuitive. Who's usingVanilla JS? Glad you asked! Here are a few:
- YouTube
- Yahoo
- Wikipedia
- Windows Live
- Amazon
- MSN
- eBay
- Microsoft
- Tumblr
- Apple
- PayPal
- Netflix
- Stack Overflow
In fact,Vanilla JS is already used on more websites than jQuery, Prototype JS, MooTools, YUI, and Google Web Toolkit -combined.
Download
Ready to tryVanilla JS? Choose exactly what you need!
Testimonials
Getting Started
TheVanilla JS team takes pride in the fact that it is themost lightweight framework available anywhere; using our production-quality deployment strategy, your users' browsers will haveVanilla JS loaded into memory before it even requests your site.
To useVanilla JS, just put the following code anywhere in your application's HTML:
- <script src="path/to/vanilla.js"></script>
When you're ready to move your application to a production deployment, switch to the much faster method:
That's right - no code at all.Vanilla JS isso popular that browsers have been automatically loading it for over a decade.
Speed Comparison
Here are a few examples of just how fastVanilla JS really is:
Retrieve DOM element by ID
| Code | ops / 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 |
Retrieve DOM elements by tag name
| Code | ops / 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
Here are some examples of common tasks inVanilla JS and other frameworks:
Fade an element out and then remove it
| Vanilla JS | var s = document.getElementById('thing').style;s.opacity = 1;(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})(); |
|---|---|
| jQuery | <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script>$('#thing').fadeOut();</script> |
Make an 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> |
Further Reading
For more information aboutVanilla JS:
- check out theVanilla JSdocumentation
- read somebooks onVanilla JS
- or try out one of the manyVanilla JSplugins.
When powering your applications withVanilla JS, feel free to use this handy button!