ванильный код что это

Учите ванильный JavaScript, прежде чем браться за фреймворки

Что такое «ванильный JavaScript»?

VanillaJS – это использование простого JavaScript без каких-либо дополнительных библиотек, таких как jQuery. Люди используют этот термин как шутку, чтобы напомнить другим разработчикам, что многое можно сделать в наши дни без дополнительных библиотек JavaScript.

Или, в нашем случае, без новых, причудливых фреймворков.

Фреймворк Vanilla JS

История сайта Vanilla JS, выдающего себя за сайт очередного JS фреймворка, коротка, но забавна. Эрик Вастл создал его в 2012 году, чтобы с щепоткой троллинга и путаницы объяснить: зачастую можно использовать простой JavaScript без дополнительных фреймворков или библиотек.

Хотя Эрик не использовал термин как таковой, его сайт, безусловно, способствовал его популярности.

Состояние современного «обычного» JavaScript

Исторически сложилось так, что разработчики должны были обходить нативный JavaScript для решения многих задач, например, кроссбраузерности, или просто для выхода за пределы возможностей языка. Речь идет о далеких днях IE 6-7. Очень часто им в этом помогала jQuery. Но сейчас этот продолжительный условный рефлекс опоры на внешние библиотеки уже не нужен, благодаря эволюции спецификации ECMAScript, и современным браузерам, поддерживающим большинство новых возможностей.

Сегодня выбор Vanilla JS вместо jQuery чаще всего является самым разумным, не раздувая кодовую базу ненужными зависимостями. Очевидный пример с великолепного сайта Возможно вам не нужна jQuery:

На этом сайте полно примеров ванильного JS, обязательно посмотрите!

Если вам нужно больше доказательств:

We’re finally finished removing jQuery from https://t.co/r2QL2aHBfa frontend. What did we replace it with? No framework whatsoever:

• querySelectorAll,
• fetch for ajax,
• delegated-events for event handling,
• polyfills for standard DOM stuff,
• CustomElements on the rise.

О JS фреймворках: за и против

Прежде всего, что мы имеем ввиду под термином «JS фреймворки»?

Речь идет о всех этих Angular, Vue, React, Backbone, Ember, Knockout, Ext, jQuery, Meteor, Express, Koa, Total, Socket.io и им подобных. Да, безусловно, они все разные. Да, некоторые из них на самом деле не фреймворки, а скорее библиотеки. Но в рамках этой статьи мы обобщим их, потому что все они имеют общую цель.

За: JavaScript-фреймворки великолепны

Все это упоминается при каждом обсуждении популярных фреймворков. Но это по большей части маркетинг.

Самая большая ценность здесь – это сотрудничество. Последовательный интерфейс и методы позволяют разработчикам из разных стран понимать друг друга и работать вместе.

Если вы создаете приложение с помощью [ваш любимый фреймворк], то когда придет время, вы сможете найти опытного разработчика, который сможет быстро разобраться с кодовой базой проекта и начать работу без объяснений каждой детали вашей архитектуры.

Другой ключевой причиной использования фреймворков является практика. Они заставляют тебя тренироваться снова и снова. И это замечательно! Практика всегда приводит к мастерству, чего бы вы ни пытались достичь.

Против: JavaScript-фреймворки ужасны

Люди, которые работают над реализацией фреймворков, очень талантливы – по крайней мере, большинство из них. Они делают огромную работу по упрощению сложностей. Но все эти уровни абстракции могут быстро стать злом.

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

Ты не React-разработчик и не Vue-разработчик. Ты просто разработчик.

Конечно, фреймворки полезны для небольших команд, работающих над одним приложением. Да, они сэкономят вам некоторое время (если вы не наркоман рефакторинга). Но что делать, если у вас несколько команд и несколько проектов? Как вы думаете, все руководители групп согласятся на единую платформу для всего набора приложений? А что, если в 2019 появится новый суперфреймворк?

Проблема в том, что в тот момент, когда вы выбираете фреймворк, вы влияете на каждое предстоящее инженерное решение. Кроме того, вы приковываете свою команду к технологии, которая, вероятно, скоро будет устаревшей. Эта ужасно.

Почему сначала нужно учить ванильный JavaScript?

Если вы освоите основы JavaScript, то вашей единственной проблемой при изучении новых фреймворков будет их синтаксис.

JavaScript сейчас – это язык веб-программирования. Понимание его основных инженерных принципов имеет первостепенное значение, если вы хотите построить себе достойную карьеру в этой области.

За последние 5 лет появилось больше 10 фронтенд-фреймворков. Угадайте, сколько будет в ближайшие 5-10 лет? Если вы просто притворяетесь, что знаете JavaScript, этот движок, питающий веб-революцию, как вы будете идти с ним в ногу?

Просто подумайте о том, что сегодня делают «разработчики jQuery»: пытаются догнать Angular. Завтра они будут пытаться догнать React / Vue. И этот грустный цикл продолжается.

Знание ванильного JavaScript позволит вам понять или даже внести свой вклад в JS фреймворки, и поможет выбрать правильный, когда вам это потребуется.

Где и как учить ванильный JavaScript?

Надеюсь, вы готовы запачкать руки простым старым JavaScript. Вот вам суперсовет:

Всегда будьте любопытны, всегда читайте исходники и всегда пробуйте сами.

И еще несколько конкретных рекомендаций:

Для начинающих: вот отличный материал для старта. И еще немного:

А здесь огромный список ресурсов для обучения.

Еще парочка статей:

Заключение

Использование фреймворка, безусловно, даст вам быстрые результаты. Но если Вы не понимаете основные понятия, стоящие за ним, то далеко не уйдете. Научиться играть Wonderwall на гитаре не значит научиться сочинять музыку, но это даст вам повод для практики.

Принцип «сначала изучи основы» применим практически ко всему в жизни. От изучения нового языка программирования до нового вида спорта. Это требует много практики, но когда вы освоите основы, начнется самое интересное.

Источник

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 вместе взятые!

Деплоймент

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

Чтобы подключить Vanilla JS, просто добавьте следующую строку в ваш HTML:

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

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

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

Поиск DOM-элемента по ID

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

Примеры кода

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

AJAX-вызов

Заключение

Источник

Почему вам тоже стоит писать код в vanilla

Перевод статьи “Why you should code in vanilla too”.

Цветение ванили

За прошедшие несколько лет я стал парнем, которому нравится ваниль во всем: в мороженом, в коктейлях, тортиках и коде.

Как (почти) все, я начинал создавать вебсайты с помощью jquery, поскольку это было сравнительно просто для понимания и не требовало написания большого количества кода. Затем последовал angular-бум и я стал создавать проекты на AngularJS.

И хотя я писал vanilla javascript тут и там, но когда мои проекты росли, становилось тяжелее разбираться с ошибками.

Да, фреймворки помогают вам создавать свои проекты быстрее. Да, они упрощают работу. Но по мере роста вашего проекта наступает момент, когда вы знаете, что что-то не так, но не понимаете, что именно. Фреймворки созданы чтобы решать специфические виды проблем. А когда ваш проект растет, в нем возникают совершенно другие проблемы. Поэтому я могу гарантировать, что время, которое вы сохранили благодаря использованию фреймворка, будет потеряно при решении проблемы с багом, о котором вы и понятия не имеете.

А теперь я расскажу вам, почему вам стоит писать более сложный код и в больших количествах.

1. Легковесные приложения

Добавление любых зависимостей автоматически увеличивает размер вашего приложения, количество http-запросов и время загрузки.

Размеры файла (минимизированные) в самых используемых библиотеках/фреймворках JavaScript:

2. Отсутствие зависимостей

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

3. Изучение нового

Когда у вас нет никакого уровня абстракции, вы стремитесь к исследованию и изучению нового. Вы будете искать решения, предоставляемые языком, и найдете скрытые сокровища JavaScript. Ваше понимание языка улучшится и, конечно, вы начнете лучше понимать собственный проект.

4. Вклад в open source

(Почти) все библиотеки, которые вы используете, написаны на vanilla JS. Поскольку теперь ваше понимание JavaScript улучшилось, вы можете быстро понять большую кодовую базу любой библиотеки и внести свой вклад в нее.

5. Улучшение безопасности

Да, вы правильно прочитали. Используя библиотеки, вы, возможно, делаете свой сайт более уязвимым, и, может быть, рискуете данными своих пользователей. Есть вероятность, что некоторые внешние зависимости изымут данные ваших пользователей и отправят их на свой сервер. Если хотите подробностей, можно почитать этот пост.

Источник

9 прекрасных проектов, которые можно создать на ванильном JavaScript

Хочешь проверить свои знания по JS?

Подпишись на наш канал с тестами по JS в Telegram!

Перевод статьи «9 Awesome Projects You Can Build With Vanilla JavaScript».

Скажем откровенно: не важно, сколько книг по программированию вы прочли, сколько видео просмотрели и сколько подкастов прослушали — если вы хотите стать лучшим разработчиком, вам нужно непрерывно практиковаться.

В мире фронтенда существует множество фреймворков, например, React, Angular, Vue — и это лишь небольшая толика. Каждый из них прекрасен, без них фронтенд-разработка не достигла бы современных высот. Но все эти фреймворки, несмотря на существующие между ними различия, имеют и нечто общее: все они основаны на JavaScript. Да, старый добрый JS!

Не сомнений, что сегодня в web правит JavaScript. И каждый фронтенд-разработчик, не важно, опытный он или только начинающий свою карьеру, обязательно должен знать основы JavaScript, HTML и CSS.

Фреймворки приходят и уходят, а JavaScript остается!

Поэтому я решил составить небольшой список из девяти прекрасных проектов, которыми вы можете заняться, чтобы освежить свои навыки, узнать что-нибудь новое о JS и сохранить релевантный уровень знаний в 2020 году и дальше. Все эти проекты можно создать на чистом JavaScript (плюс HTML и CSS в разных пропорциях). Вы можете добавить их в свое портфолио, показывать рекрутерам или потенциальным работодателям, а также забросить в свой аккаунт на GitHub в качестве «справочников» для будущих работ.

Сразу проясню: цель этих проектов не в том, чтобы обучить вас всем премудростям JavaScript. Для этого есть специальные прекрасные курсы, раскрывающие все темы от А до Я. Здесь речь идет о создании каких-то вещей. О том, чтобы приложить руки к чему-то практическому. О выработке мышечной памяти.

Примечание редакции. Все видео в статье — на английском языке. Если знаете этот язык хоть немного, просмотр подобных туториалов в том числе поможет вам расширить свой словарный запас. Но если вы пока не можете уследить за объяснениями на английском, можно просто воспользоваться списком идей.

Если вы прям сейчас хотите попробовать свои силы в JavaScript, попробуйте пройти тест в 20 вопросов по результатам которого вы сможете понять, стоит ли вам изучать этот язык самому или же пойти на курсы по программированию. Вопросы довольно сложные для новичка. Но проходной балл доступный.
ПРОЙТИ ТЕСТ

1. Приложение для медитации

Это приложение, предлагающее эмбиент-звуки для медитации. Пользователи могут выбирать различные таймеры и звуки.

В прилагаемом туториале используется ванильный JavaScript, как раз то, что нам нужно. Кроме того, вы научитесь манипуляциям со звуком и видео при помощи JS.

Голос инструктора четкий, а инструкции просты для понимания.

2. Виртуальная клавиатура

Это проект по созданию виртуальной клавиатуры с нуля. Используются ванильный JS, HTML и CSS. Приложение предназначено в т.ч. для использования в браузере; оно должно быть отзывчивым и пригодным для управления касаниями.

Мне нравится оригинальность этого проекта. Раньше мне не доводилось создавать виртуальную клавиатуру, так что создание ее лишь на JavaScript, HTML и CSS было для меня отличным опытом.

Что касается видео, то голос инструктора четкий, да и объясняет он довольно хорошо.

3. Корзина покупок eCommerce

Здесь мы создаем корзину покупок, которая может использоваться в онлайн-магазинах и на сайтах электронной коммерции. В работе применяются все те же ванильный JS, HTML и CSS. Для хранения информации о продуктах инструктор использует Contentful — headless CMS. Научиться работать с headless CMS вообще и с Contentful в частности не является основной целью проекта, но это хороший сервис, так что вы не пожалеете, увидев его в действии.

Запись туториала очень длинная. С одной стороны, это впечатляет, но с другой — довольно утомительно. Голос инструктора четкий и понятный. Иногда немного сложно уследить за мыслью, но это можно объяснить сложностью проекта.

4. Приложение для прогноза погоды

При создании этого приложения, помимо обычного набора технологий, используется Dark Sky API — для сбора информации о погоде. Так что это отличная возможность научиться взаимодействовать с APIs.

Такое приложение может хорошо подойти для портфолио. Если вы взялись за первый проект нашего списка, то инструктор вам уже знаком, и я лишь отмечу, что это видео тоже отличается прекрасным качеством. Похоже, он в самом деле умеет учить, причем делает это понятно и не скучно.

5. Issue-трекер

В этом проекте нужно создать issue-трекер, который может использоваться для отслеживания проблем (например, с программными продуктами) на любом сайте. Он также может стать хорошим пополнением для вашего портфолио.

У инструктора есть ясное понимание того, что он хочет создать. Голос четкий и понятный, а проект годится и для начинающих.

6. PIN Pad

Это проект по созданию клавиатуры для ввода PIN-кода в браузере (с функционалом проверки PIN-кода на корректность). В этом туториале инструктор применят исключительно ванильный JS, HTML и CSS.

Я считаю, что это очень креативный учебный проект для показа, на что способен ванильный JavaScript. Инструктор проделал хорошую работу: все объясняется очень четко, за мыслью легко уследить.

7. Целевая веб-страница (лендинг)

Брэд покажет вам, как создать интерактивный лендинг, показывающий время и имя пользователя. Для хранения имени приложение использует локальное хранилище.

Брэд известен качеством своих туториалов. Именно этот — довольно короткий, и я бы сказал, что он простоват. Но зато в нем используются исключительно JavaScript, HTML и CSS.

8. Игра «Камень, ножницы, бумага»

Создание игр может быть интересным способом изучить что-нибудь. JavaScript предлагает широкие возможности по созданию браузерных игр. В этом учебном проекте вы создадите классическую игру «камень, ножницы, бумага».

Инструктор провел отличную работу по созданию туториала. Видео вышло увлекательным.

9. Игра «крестики-нолики»

Это проект по созданию игры в крестики-нолики. Задача интересная, но вместе с тем и сложная, потому что здесь используются основы ИИ и алгоритмы. Но помимо этого все создается на старых добрых JS, HTML и CSS.

Проект имеет хороший размер и понятную структуру. Работать над ним интересно. Голос инструктора четкий, за мыслью уследить легко. Объяснения очень хорошие, так что с созданием игры все должны справиться.

Вот и все. Я уверен, что вам уже не терпится взяться за эти отличные туториалы. Но я хотел бы еще кое-что сказать. Просмотр видео и параллельное написание кода это хороший способ изучать что-то новое и набивать руку. Но вы получите куда больше пользы от создания проектов, если внесете в них что-нибудь свое. Вы ведь вполне можете их улучшить, изменить, скомбинировать. Можно сделать и еще лучше: построить собственный проект, по ходу дела документируя свою работу. Так вы и сами многому научитесь, и другим поможете.

Источник

Создаём простую игру на Vanilla JS

В этой статье мы создадим простую игру с помощью HTML5, CSS3 и чистого JavaScript. Вам не понадобятся глубокие знания программирования. Если вы знаете, для чего нужны HTML, CSS и JS, то этого более чем достаточно. На работу игры вы можете посмотреть здесь.

Структура файлов

Начнём с создания нужных папок и файлов:

Начальный шаблон, соединяющий CSS- и JS-файлы:

Необходимые изображения можно скачать из репозитория проекта.

Мы используем простой, но очень полезный сброс стилей, который будет применён ко всем элементам:

Свойство box-sizing: border-box учитывает значения внутренних отступов и границ элемента при подсчёте общей высоты и ширины, поэтому нам не нужно заниматься математикой.

Поле из карточек должно выглядеть примерно так:

Добавим ещё эффект при клике. Псевдокласс :active будет срабатывать при каждом нажатии на элемент. Он устанавливает длительность анимации равной 0.2 с:

Переворачиваем карточки

CSS класс flip переворачивает карточку на 180 градусов:

Если перезагрузить страницу и снова перевернуть карточку, она пропадёт!

Наконец, мы получили желаемый эффект переворота!

Ищем пару

Мы научились переворачивать карточки, теперь нужно разобраться с проверкой на совпадение.

Теперь при нажатии на вторую карточку мы попадаем в else-блок нашего условия. Чтобы проверить, совпадают ли карточки, нужно их всех идентифицировать.

Всякий раз, когда нам нужно добавить дополнительную информацию к HTML-элементам, мы можем использовать data-* атрибуты, где вместо «*» может быть любое слово. Добавим каждой карточке атрибут data-framework :

Складываем всё воедино:

Блокируем поле

Мы научились проверять, совпадают ли карточки, а теперь нужно заблокировать поле. Это нужно для того, чтобы два набора карточек не могли быть перевёрнуты одновременно, в противном карточки не будут переворачиваться обратно.

Нажатие на ту же карточку

У нас всё ещё есть сценарий, при котором после нажатия на одну карточку дважды условие совпадения будет выполнено и обработчик событий будет удалён.

Новый метод будет вызываться из disableCards() и unflipCards() :

Перемешивание

Наша игра выглядит довольно неплохо, но играть в неё не очень весело, если карточки всегда на одном месте. Пора это исправить.

Хинт для программистов: если зарегистрируетесь на соревнования Huawei Cup, то бесплатно получите доступ к онлайн-школе для участников. Можно прокачаться по разным навыкам и выиграть призы в самом соревновании.

Перейти к регистрации

Источник