Abnormal programming
Website development
JavaScript
August 2012 31

Vanilla JS — очень мощный javascript-фреймворк

Как ни странно, на Хабре упоминание этого мощнейшего фреймворка нашлось лишь в одном комментарии от апреля 2012 года.

Вступление


Для меня эта тема особенно актуальна, ведь последнее время на Хабре упоминается огромное количество js-фреймворков. Какие-то из них авторы различных проектов находят в Сети, какие-то — пишут сами, не очень понимая зачем. Кто-то просто пишет свои велосипеды.

Моё же мнение — надо стремиться к отсутствию избыточного кода, к максимальному минимализму, простите за тавтологию.
Если на весь сайт вам нужно только выбирать html-элементы по их id — глупо подключать jQuery.

Если вам на Node.js проекте надо собрать пачку js-файлов и сжать их — глупо писать или подключать тяжёлые фреймворки с кучей настроек, параметров, дополнений и методов, ведь простейший скрипт, склеивающий файлы и прогоняющий их через Кроукфордский jsmin будет намного быстрее, надёжнее и проще.

Чем больше кода — тем больше ошибок. Чем больше стороннего кода — тем сложнее поддерживать проект. Ведь когда вы берёте чужой код, вы берёте на себя и ответственность за его поддержку. Нельзя будет сказать «этот баг не мой, а вон из той библиотеки».

Vanilla JS


Итак, начнём обзор этого мощнейшего и самого популярного в мире JS-фреймворка.

(далее — перевод с официального сайта фреймворка)
Команда Vanilla JS поддерживает каждый байт кода фреймворка и каждый день много трудится, чтобы сделать его маленьким и интуитивным.
Кто использует Vanilla JS? Хорошо, что вы спросили, вот несколько примеров: Facebook, Google, YouTube, Yahoo, Wikipedia, Windows Live, Twitter, Amazon, LinkedIn, MSN, eBay, Microsoft, Tumblr, Apple, Pinterest, PayPal, Reddit, Netflix, Stack Overflow.

Вообще-то, Vanilla JS уже используется на большем количестве сайтов, чем jQuery, Prototype JS, MooTools, YUI и Google Web Toolkit вместе взятые!

На сайте вы можете скачать фреймворк, выбрав нужную вам функциональность:
  • DOM (Манипуляции / Селекторы)
  • Прототипная система объектов
  • AJAX
  • Анимации
  • Система событий
  • Регулярные выражения
  • Функции как объекты
  • Замыкания
  • Библиотеку математических методов
  • Библиотеку для работы с массивами
  • Библиотеку для работы со строками


Плюс можете настроить вашу сборку:
  • Сжать исходники
  • В кодировке UTF8
  • Использовать «CRLF» переносы строк (Windows)

При максимальной комплектации фреймворк будет весить:
Несжатый: 0 байт, сжатый: 25 байт.

Деплоймент

Команда Vanilla JS гордится тем фактом, что это самый лёгкий фреймворк всех времён; используйте нашу стратегию выкладки на продакшн, и браузеры ваших пользователей загрузят Vanilla JS в память ещё даже до того, как начнут загружать ваш сайт.

Чтобы подключить Vanilla JS, просто добавьте следующую строку в ваш HTML:
<script src="path/to/vanilla.js"></script>

Когда будете готовы выложить свой проект на продакшн, смените подключение на намного более быстрый метод:
 

Всё верно, совсем без кода. Vanilla JS настолько популярна, что браузеры автоматически загружают фреймворк уже лет десять.

Сравнение скорости работы с другими фреймворками


Поиск DOM-элемента по ID
Фреймворк Код Оп.\сек
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

Поиск элементов по названию тэга
Фреймворк Код Оп.\сек
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

Примеры кода


Плавно скрыть элемент
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-вызов
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>

Заключение

Больше информации о Vanilla JS вы можете найти по ссылкам:

Когда вы фигачите ваш проект на Vanilla JS, можете использовать эту удобную кнопку: image

--
от автора поста
Что ж, пожалуй, это и вправду самый лучший JS-фреймворк!
Советую, в первую очередь, рассматривать именно его, и лишь при острой необходимости браться за что-то другое.
+87
122.1k 287
Comments 84