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

document.getElementById('test-table');

dojo.byId('test-table');

$('test-table')

delete Ext.elCache['test-table']; Ext.get('test-table');

$jq('#test-table');

YAHOO.util.Dom.get('test-table');

document.id('test-table');

Поиск элементов по названию тэга

document.getElementsByTagName("span");

Prototype.Selector.select('span', document);

YAHOO.util.Dom.getElementsBy(function(){return true;},'span');

Ext.query('span');

$jq('span');

dojo.query('span');

Slick.search(document, 'span', new Elements);

Примеры кода

Плавно скрыть элемент

var s = document.getElementById('thing').style;
s.opacity = 1;
(function(){(s.opacity-=.1)<0?s.display="none": setTimeout(arguments.callee,40)})();

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script> $('#thing').fadeOut();</script>

AJAX-вызов

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");

<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
• Различные книги по Vanilla JS
• или попробуйте что-нибудь из плагинов для Vanilla JS

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

--

от автора поста

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

Автор: norlin