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)
Деплоймент
Команда Vanilla JS гордится тем фактом, что это самый лёгкий фреймворк всех времён; используйте нашу стратегию выкладки на продакшн, и браузеры ваших пользователей загрузят Vanilla JS в память ещё даже до того, как начнут загружать ваш сайт.
Чтобы подключить Vanilla JS, просто добавьте следующую строку в ваш HTML:
Когда будете готовы выложить свой проект на продакшн, смените подключение на намного более быстрый метод:
Всё верно, совсем без кода. 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(),'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())(); 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"); Заключение
Больше информации о Vanilla JS вы можете найти по ссылкам:
- Документация по Vanilla JS
- Различные книги по Vanilla JS
- или попробуйте что-нибудь из плагинов для Vanilla JS
Когда вы фигачите ваш проект на Vanilla JS, можете использовать эту удобную кнопку:
от автора поста
Что ж, пожалуй, это и вправду самый лучший JS-фреймворк!
Советую, в первую очередь, рассматривать именно его, и лишь при острой необходимости браться за что-то другое.
- Ненормальное программирование
- Веб-разработка
- JavaScript
Vanilla JS Используется На Большем Количестве Сайтов, Чем jQuery
Если вы ищете новый фреймворк, который поможет вам создать веб-сайт, вам нужно знать о Vanilla JS. Это самый мощный и легкий из всех фреймворков. Он уже используется огромным количеством веб-сайтов и автоматически загружается большинством браузеров.
Как говорит команда Vanilla JS:
Vanilla JS-это быстрый, легкий, кросс-платформенный фреймворк для создания невероятных, мощных приложений JavaScript.
В следующее утверждение вам может быть трудно поверить:
На самом деле, Vanilla JS уже используется на большем количестве веб — сайтов, чем jQuery, Prototype JS, MooTools, YUI и Google Web Toolkit вместе взятые.
Если быть более точным, Vanilla JS используется, по крайней мере частично, большинством веб — сайтов, включая Facebook, Google, YouTube, Yahoo и так далее.
Стандартные функции, поддерживаемые из коробки, а не из коробки, включают замыкания; селекторы/манипуляции DOM; Ajax; сложную систему обработки событий; 2D-графику и 3D в некоторых случаях; полную поддержку регулярных выражений; и так далее. На самом деле, почти все, что вы хотите, включено в Vanilla JS.
Мало того, что это быстро. На главной странице Vanilla JS есть некоторые сравнения скорости, но мы не можем удержаться от цитирования эталона для поиска объектов DOM:
Обратите внимание, что лучшая альтернативная структура менее чем в два раза медленнее, а любимый всеми jQuery в четыре раза медленнее. Только подумайте, от какой скорости вы отказываетесь! Другие тесты показывают еще большее преимущество для Vanilla JS.
И удивительно, но мы обнаружили, что уже загружаем Vanilla JS и даже иногда используем его.
Чем отличается ванильный JavaScript от нативного JavaScript?
Вроде это шутка про ванильный JS, он по идеи тоже без примесей, родной. Но есть фреймворк Vanilla JS, или этот фреймворк не имеет отношение в ванильному JS?
17th Feb 2020, 10:43 AM
2 Answer s
As you know, JS is a programming language. Which means, by default, there is no document, no window, there is nothing. It can be used just like python or any other programming language, to run simple scripts, that have nothing to do with the web. VanillaJS is used to run browser related stuff, like document. and it is the most commonly used framework. So yes, technically VanillaJS is a framework, just like NodeJS ane ElectronJS are frameworks.
17th Feb 2020, 11:14 AM
Aymane Boukrouh
17th Feb 2020, 11:16 AM
Often have questions like this?
Learn more efficiently, for free:
Для чего вам отдельно изучать vanilla JavaScript
От автора: многие люди часто смотрят на vanilla JavaScript и фыркают. Для чего изучать vanilla JavaScript, если у нас есть Angular, React и Node.js? Но именно в этом многие разработчики, особенно новички, ошибаются. Чего они не понимают, так это того, что все это и многое другое построено на JavaScript. Вот несколько веских причин, почему вы должны изучать vanilla JavaScript, даже если вы думаете, что вам это не нужно.
Понимание
Изучение vanilla JavaScript — это все равно что учиться строить дом с нуля. Вы не зависите от комплектов и моделей, которые в долгосрочной перспективе могут не соответствовать требованиям вашей мечты. Хотя это решает краткосрочную проблему необходимости быстрого производства чего-либо, ваша способность создавать собственные конфигурации ограничена тем, что доступно в выбранной вами среде или библиотеке.
И это еще одна вещь, которую многие разработчики не признают — что существуют фреймворки и библиотеки, помогающие создавать код JavaScript. Без этого вы не сможете создавать то, что вам нужно, на лету. Вы привязываетесь к фреймворкам и библиотекам, которые не будут работать вечно.
Кто-нибудь помнит старые добрые времена jQuery? Никто больше не говорит о когда-то популярной библиотеке JavaScript. Всем нужны React и Angular.
Лучший код
Если вы лучше поймете, как работает JavaScript, у вас будет больше шансов создать более качественный код.
Суть JavaScript в том, что он был создан, чтобы каждый мог писать код. Однако со временем приложения и требования стали более сложными, и JavaScript изменился, чтобы приспособиться к ним.
Это означает, что шаблоны и парадигмы программирования, наряду с идеями других языков, внедряются в природу JavaScript, чтобы предотвратить коллапс приложений.
Большинство основных проблем в программном обеспечении — это проблемы неправильного представления — Рич Хики, дизайнер Clojure.
Когда вы изучите vanilla JavaScript, вы освоите его преимуществам и нюансы. Вы сможете увидеть и понять вещи, которые не видят 90% начинающих разработчиков. С этими новыми знаниями вы начнете воспринимать набор кода по-разному и увидите, где можно улучшить вещи, чтобы уменьшить сложность.
Ускоренное внедрение фреймворков и библиотек
Когда вы изучаете vanilla JavaScript, ваша способность внедрять новые фреймворки и библиотеки увеличивается в три раза. Это потому, что вы сможете посмотреть на фрагмент кода и понять, что он значит.
Разница между теми, кто знает и понимает JavaScript, и теми, кто не знает — это разница между механиком и водителем. Если ваша машина сломается, у механика будет больше шансов починить машину самостоятельно, чем у водителя.
Чтобы стать фантастическим профессиональным разработчиком, вы должны выйти за пределы мышления пользователя JavaScript и войти в пространство создателя. Фреймворки и библиотеки, такие как Angular и React, являются просто инструментами, которые помогают обрабатывать и организовывать JavaScript.
Одно дело научиться пользоваться своими инструментами. Другое дело знать, как эффективно использовать инструменты для достижения ваших целей.
Когда вы изучаете vanilla JavaScript, вы больше понимаете, что делаете. Вы не пишете код, просто потому что в руководстве сказано так.
Долговечность
Фреймворки и библиотеки меняются, но JavaScript — это навсегда.
Ну, на добрую половину десятилетия, по крайней мере, до выхода следующей версии. Но в отличие от фреймворков и библиотек, где нет 100% гарантии обратной совместимости, JavaScript должен быть обратно совместимым. Это единственный язык во время исполнения в Интернете, и если он сломается, у нас у всех будут большие проблемы.
Помните, когда Facebook* изменил свою лицензию с BSD + Patents на MIT, и каждый стартап теперь хочет, чтобы их материалы были написаны на React? А как насчет Angular? Я помню.
Помните, когда вышел Angular 2 и все на Angular 1 рухнуло? Я помню. Помните, когда вышел Angular 1, и все перестали говорить о jQuery? Я помню. Но это все еще всего лишь JavaScript — написанный и структурированный по-другому.
Заключение
Когда вы изучаете vanilla JavaScript, вы также учитесь разрабатывать код и способы уменьшения сложности. В то время как учебные пособия по Angular и React сейчас в моде, FreeCodeCamp приложил усилия, чтобы включить vanilla JavaScript в качестве одной из своих сертификаций — и не без причины. Поэтому если вы потратите время на самостоятельное изучение JavaScript, оно безусловно будет того стоить.
Автор: Aphinya Dechalert
Редакция: Команда webformyself.
* Признана экстремистской организацией и запрещена в Российской Федерации.