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-фреймворк!
Советую, в первую очередь, рассматривать именно его, и лишь при острой необходимости браться за что-то другое.
Метки:
Поделиться публикацией
Похожие публикации
Комментарии 84
  • +26
    «При максимальной комплектации фреймворк будет весить:
    Несжатый: 0 байт, сжатый: 25 байт.»

    Дайте два несжатых!
    • +41
      Пожалуй, я повторюсь.
      image
      • +3
        Меня за эту картинку НЛО на месяц забанило недавно :(
        • +10
          мне конец.
          • 0
            А за что формально?
            • 0
              За нецензурную лексику.
              Картинка как раз отлично выражает мои эмоции по этому поводу.
        • +10
          В хаброюмор)
          • +1
            «Вступление» написано вполне серьёзно, а Vanilla JS — лишь удачная иллюстрация :)
            • +11
              Да уж. Я вначале как увидел перечень «Кто использует Vanilla JS?», чуть челюсть не уронил.
              • +3
                Я не удивлюсь если найдутся люди которые станут искать Vanilla JS на полном серьезе)
                • +1
                  А чего искать-то, ссылка на официальный сайт есть в посте. Да и подключать его в проект проще простого, особенно на продакшне :)
            • +2
              Самый быстрый метод — это отсутствие кода? :)
              • +4
                Все встроено в браузеры))
              • –9
                Если на весь сайт вам нужно только выбирать html-элементы по их id
                То я выберу getElementById
                • +10
                  Я вот не понял) Вы так шутите?) или правда не поняли, о чем в статье речь?)
              • +8
                Чем больше стороннего кода — тем сложнее поддерживать проект.

                Ох, не сказал бы… Конечно, если речь идет о куче неизвестно кем написанных плагинов для jQuery — то да, поддерживать сложно. А приличные библиотеки пишутся и тестируются кучей людей, каждый из которых как минимум не хуже пользователей этих библиотек.
                • +3
                  Если что, юмор статьи я уловил.
                  • 0
                    Частично соглашусь, но это актуально тогда, когда фреймворки\библиотеки и правда нужны.
                    Например, jQuery на более-менее крупном проекте будет использоваться по-полной — и всевозможные селекторы, и анимация, и AJAX, и эвенты различные.
                  • +8
                    Поржал. Это уже второй пост про Ваниллу за последние две недели. В прошлый раз обошлось топиком ссылкой — Ванилла лучший в мире =)))
                    • +6
                      Я может чего не понимаю, это флэшмоб такой?)
                      • +2
                        Вообще странная тема.
                        За рубежом топики не менее абсурдно звучат
                        Vanilla JS Used On More Sites Than jQuery

                        Vanilla JS — simply the best JS framework
                    • 0
                      1 апреля? :)

                      Красавцы. Это прям как та компания в США, которая начала продавать воду и под крана, когда эту самую воду вывели на уровень питьевой воды.
                      • НЛО прилетело и опубликовало эту надпись здесь
                        • –2
                          Первая мысль была такой: «Наверное какие-то русские эмы сделали фреймворк с таким названием, не зная что оно назначает на самом деле» :)
                          • 0
                            Порадовал список плагинов к ванилле
                            • +1
                              Igniter-zen-i-rails, my new PHP framework внимательно наблюдает за собратом
                              • 0
                                Это сумасшествие какое-то с этой ванилой, уже второй топик =)
                                • 0
                                  А можно ссылку на первый? Я честно пытался сначала найти поиском по хабру.
                                  • +3
                                    НЛО забрало на исследования.
                                • +4
                                  Р-р-ребята, у меня не получается скочать фреймворк, там пустой файл! ЧЯДНТ!?
                                  • +12
                                    Попробуйте установить браузер.
                                  • +4
                                    А что хороший фреймворк! Я уже на него свои проекты перевожу ))). Быстрый и легковесный.
                                    • –2
                                      В ногу со временем: github.com/kolyuchii/theBestPlugin
                                      • –34
                                        Vanilla JS
                                        document.getElementById('test-table');
                                        12,137,211

                                        Аффтар — это чистй JS.
                                        • +17
                                          Неужели? :)
                                          • +4
                                            Вы гений. Остальные не догадались.

                                            «Аффтар» — обязательно на Хабр подобный сленг приносить?
                                            • НЛО прилетело и опубликовало эту надпись здесь
                                            • 0
                                              Я что-то не очень понял прикола статьи
                                              • 0
                                                Суть в том, что многие «учат фреймворки» и не знают самого языка, и в том месте, где можно было бы использовать встроенные возможности, они подключают тяжёлые библиотеки.
                                              • Тесты не настоящие же? А то что-то у меня сомнения по результатам.
                                                • 0
                                                  Авторы Vanilla JS недалеки от истины.

                                                  На этой странице Хабра
                                                  document.getElementsByTagName('span') 10000 раз выполняется за 27мс,
                                                  jQuery('span') те же 10000 примерно 1300мс

                                                  Vanilla JS примерно в 50 раз быстрее :)
                                                  • Ну с Vanilla я не спорю, я про скрытую рекламу других фреймворках, откуда же эта статистика) кто-то же её нарисовал, реклама именно так и работает)
                                                  • 0
                                                    На jsperf эти тесты есть
                                                  • +2
                                                    Я было повелся… пока примеров кода не увидал. Все-таки .getElementById — слишком толсто.
                                                    • 0
                                                      Тут уже требуется что-то типа function ge(a){return document.getElementById(a)}
                                                      • +6
                                                        Ну тогда вес фреймворка в несжатом виде очень сильно увеличится=)
                                                        Да и не получится подключить такой фреймворк простым методом указанным в статье:

                                                         
                                                        

                                                        Придется добавлять костыли=)
                                                    • 0
                                                      Не вижу ничего плохого в том, чтобы подцепить jQuery даже ради пары-тройки функций.
                                                      • +2
                                                        Конечно, ничего плохого не произойдет, кроме того, что ваша страница прибавит в весе лишних пару десятков кило,
                                                        а еще кроме того, что вашему браузеру понадобится больше времени, для того, чтобы обработать это прибавление.

                                                        • +1
                                                          Не прибавит, если грузить с CDN.
                                                          В этом случае jQuery с большой вероятностью уже окажется в браузерном кеше.

                                                          И, да, $('#myid') существенно приятнее для глаза, чем document.getElementById('myid').
                                                          • 0
                                                            Зато если CDN внезапно упадёт (даже у мировых гигантов типа Гугла и российских типа Яндекса бывает), либо вам перекроют к ним доступ — ваш сайт перестанет работать (полностью, либо частично).
                                                            • 0
                                                              Ну вообще-то есть методики отката на локальную версию, на случай недоступности CDN.
                                                              • +1
                                                                А теперь вопрос: стоит ли оно того ради замены
                                                                document.getElementById('myDiv')
                                                                на
                                                                $('#myDiv')
                                                                ?
                                                                • +1
                                                                  Скажите, когда Вы последний раз писали проект, где использовался ТОЛЬКО getElementById?
                                                                • 0
                                                                  Джиквери ради такого не подключают, если джаваскрипт ограничивается двумя-тремя jQuery функциями, то зачастую можно наблюдать нечно вроде:
                                                                  function $(id) {return document.getElementById(id); }
                                                                  • 0
                                                                    Кто подключает, кто нет.
                                                                • +1
                                                                  Пример отката:
                                                                  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
                                                                  <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.0.min.js"><\/script>')</script>
                                                                  
                                                        • 0
                                                          для YUI приведены примеры для YUI 2.x, это уже неактуально.
                                                          • 0
                                                            Шутки шутками, а переписать parallax scrolling demo на Vanila JS было не так сложно. Работает во всех нормальных браузерах и IE7+. Кода получилось почти столько же, как и в jQuery-версии, и он получился более читаемый и универсальный.
                                                            • +1
                                                              vanilla ruby:

                                                              vanilla php:

                                                              vanilla erlang:

                                                              все, три новых проекта заопенсорсил
                                                              • 0
                                                                vanilla C++ для студентов
                                                              • 0
                                                                Сам с превеликим удовольствием использую сей фреймворк и другим рекомендую!
                                                                • +7
                                                                  Кроссбраузерность страдает, к сожалению
                                                                  • 0
                                                                    Моя демка написана с использованием DOM4 и ES5, работает в IE7+ и остальных.
                                                                    Там конечно не 0 КиБ, а 24 КиБ для IE7, 14 КиБ для IE8 и 8 КиБ для всех остальных (gzip). Всё просто работает и можно писать на Vanila JS
                                                                  • 0
                                                                    Внезапно для себя узнал что неплохо владею VanillaJS.
                                                                    Спасибо )
                                                                    • +7
                                                                      Бесполезная фигня. Взяли Semicolon.js и выкинули все самое важное.
                                                                      • +1
                                                                        читал, думал новая религия)))) а оказывается — очередной разводняк))

                                                                        vapor родил semicolon, semicolon родил vanilla…
                                                                        • +1
                                                                          Сходил по ссылке, посмотрел, а потом перечитал ваш комент и хорошо посмеялся :))))
                                                                          • 0
                                                                            Да, следовал точно тому же маршруту =)
                                                                        • 0
                                                                          уже несколько лет его как использую и даже не знал как он называется
                                                                          • +1
                                                                            Это очень смешной пост. Даже для непрофессионала в JS
                                                                            А профи я думаю вообще плачут от смеха читая его.

                                                                            Но даже допустим я поверил и повелся на написанное здесь и перешел на сайт Ваниля… Блин. Моей первой реакцией было уйти оттуда сразу же. Для «крутого» фреймворка, как то стремно сделан сайт.

                                                                            автор, покажи где на фейсбуке есть ваниль!? Я не нашел… Хотя я и не сильно искал.
                                                                            • +6
                                                                              Есть, продакшен-способом подключен.
                                                                            • +1
                                                                              (function(){
                                                                              	(s.opacity -= .1) < 0
                                                                              		? s.display = "none"
                                                                              		: setTimeout(arguments.callee, 40)
                                                                              })();
                                                                              

                                                                              Это безусловно восхитительный фреймворк, даже если его код вот так разминимизировать. Но чаще встречается как-то вот так:
                                                                              var My_Interval = window.setInterval("if(document.getElementById('thing').style.opacity == 0.1){ document.getElementById('thing').style.display = 'none'; window.clearInterval(My_Interval); }else{ document.getElementById('thing').style.display.opacity = document.getElementById('thing').style.display.opacity - 0.1; }", 40);
                                                                              

                                                                              Да, в одну строку. А иногда даже интервал не очищают =)
                                                                              • +1
                                                                                А если серьезно, то от фреймворков в наши дни сложно отказываться даже с такими отношениями в скоростях. Ведь нужно пару минут чтобы вспомнить какой бы то ни было проект, не использующий виджетов, будь то всплывающий календарь, пипетка (color picker) или валидация полей формы. Отказаться красиво, и можно даже написать кучу быстрого кода, но когда отрефакторишь и избавишь код от конкретных id/class, чтобы вдруг использовать код на других страницах, то получишь тот же самый самописный фреймворк. Который, ко всему прочему не развивается, пока у тебя не выдадутся выходные.
                                                                              • –1
                                                                                Да вы прикалываетесь
                                                                                • 0
                                                                                  а вот тут ребята вполне серьезно обсуждают его
                                                                                  • 0
                                                                                    Оставлю кусок цитаты оттуда:
                                                                                    «Consider this: Vanilla JS is *just* a javascript library, it can't make javascript any faster.»

                                                                                    Хорошо сказано.
                                                                                  • 0
                                                                                    Пример с document.getElementsByTagName(«span»); по сути не совсем честный: он возвращает виртуальный NodeList, тогда как библиотеки действительно находят все соответствующие теги и добавляют в массив. По-хорошему итерация по полученному объекту в jQuery может быть быстрее, чем в Vanilla JS и сравнивать надо получение+итерацию, а не просто получение.
                                                                                    • 0
                                                                                      Пост поднял настроение! =)
                                                                                      Спасибо!)
                                                                                      • 0
                                                                                        Vanilla.JS архитектурно напоминает другой интересный фреймворк — JS.js:
                                                                                        tatiyants.com/introducing-js-js/
                                                                                        • 0
                                                                                          Если забыть про старые браузеры, то да, vanilla js для несложного функционала может быть привлекательно. Но когда начинаешь добавлять костыли, чтобы работало более-менее везде, понимаешь, что плавно начинаешь писать очередной фреймворк.

                                                                                          • 0
                                                                                            Выше написал.. Pure JS параллакс скроллинг без jQuery. При этом, в версии с использованием jQuery, кода больше. Работает во всех браузерах в которых работает jQuery-версия. В IE6 не работает только из-за CSS.
                                                                                            Vanilla JS — это конечно саркастическая шутка, а вот pure JS — это вполне реальность.

                                                                                          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.