Что такое ванильный javascript

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-вызов

Заключение

Источник

Ванильный JavaScript и HTML. Никаких фреймворков. Никаких библиотек. Никаких проблем

Используете для создания приложений Vue, React, Angular или Svelte? Я использую, и если вы тоже, и уверен, что вам уже давно не приходилось писать приложение, которое выводит информацию без этих прекрасных инструментов.

Когда-то многие из нас писали веб-приложения только с помощью тех средств, что были встроены в браузер. И хотя современные инструменты помогают нам абстрагироваться от этого (и имеют много других преимуществ), всё ещё полезно знать, что происходит у них под капотом.

При выводе небольшого количества информации вам может потребоваться использовать HTML, JavaScript и DOM без каких-либо инструментов. Недавно я написал несколько базовых примеров, которые иллюстрируют основы веб-разработки и помогают в изучении DOM, HTML, JavaScript и принципов работы браузера. Этот опыт позволил мне понять, что другие разработчики — возможно, вы, — будут рады вспомнить, как выводить информацию без использования библиотек.

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

Давайте рассмотрим разные способы вывода информации. И держите под рукой эту документацию!

Образец приложения

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

Инструменты

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

Мы будем использовать только HTML, TypeScript/JavaScript, CSS и браузерную DOM (объектную модель документа). Давайте посмотрим, как можно отобразить HTML.

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

Подход

Наше приложение отображает индикатор выполнения и список персонажей. Начнём с самого простого — индикатора, — и рассмотрим разные способы его отображения. Затем перейдём к списку и разберёмся, как меняется ситуация, если нужно выводить больше информации.

Отображение индикатора выполнения

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

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

Отображение индикатора с помощью внутреннего HTML

Просто. Легко. Почему так нельзя сказать про любой код? Ну посмотрите, как быстро этот фрагмент решает проблему!

Вероятно, вы уже заметили, насколько уязвим этот код. Одна ошибка в HTML — и всё! У нас проблема. И действительно ли он удобочитаем? Да, это так, но что будет, когда HTML станет слишком сложным? Когда у вас 20 строк кода с классами, атрибутами и значениями… ну, вы поняли. Да, решение не идеальное. Но при небольшом количестве HTML вполне работает, и я рекомендую присмотреться к нему любителям всё писать в одну строку.

И последнее: innerHTML может влиять на скорость отображения. Я не увлекаюсь избыточной оптимизацией, но лучше проверяйте производительность, потому что innerHTML может быть причиной возникновения циклов отрисовки и вывода макетов в браузере. Имейте в виду.

Индикатор выполнения с помощью DOM API

Уменьшить громоздкость длинных строк можно с помощью DOM API. Создаём элемент, добавляем необходимые классы и атрибуты, задаём значения, а потом добавляем его в DOM.

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

Отрисовка индикатора с помощью шаблонов

Ещё один способ заключается в создании тега и использовании его для упрощения вывода информации.

Создадим и присвоим ему ID. Шаблон не будет отображён на HTML-странице, но позднее вы можете ссылаться на его содержимое и использовать его. Это очень полезно, вы можете писать HTML везде, где это целесообразно: на HTML-странице, с применением всех полезных возможностей HTML-редактора.

Затем код может взять шаблон с помощью метода document.importNode() из DOM API. По мере необходимости код может манипулировать содержимым шаблона. Теперь добавьте это содержимое в DOM, чтобы отобразить индикатор.

Шаблоны — хороший способ сборки HTML; мне он нравится, потому что позволяет писать HTML там, где это имеет смысл, и можно меньше делать с помощью кода на TypeScript/JavaScript.

Можно ли импортировать шаблоны из других файлов? Да, но с помощью других библиотек. Однако сейчас мы от них сознательно отказались. Импорт HTML обсуждается годами, но, как видно из материалов сайта «Can I Use», даже не все современные браузеры поддерживают эту возможность.

Отображение списка персонажей

и списка персонажей заключается в том, что теперь мы:

Отображение персонажей с помощью внутреннего HTML

Это работает. И возможно, это более удобочитаемо. Что насчёт производительности? Трудно ли выявить (или вообще возможно?) опечатки при наборе кода? Судить вам. Но давайте не будем делать выводов, пока не разберёмся с другими методиками.

Отображение персонажей с помощью DOM API

Отображение персонажей с помощью шаблонов

. Сначала на HTML-странице создаём шаблон. Этот HTML-код будет чуть сложнее, чем в случае с

. Но это не проблема. Это просто HTML внутри HTML-страницы, так что мы можем легко исправлять ошибки и форматирование с помощью прекрасного редактора VS Code.

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

Итоги

Я не упомянул о том, как отображают информацию популярные фреймворки и библиотеки. Vue, React, Angular и Svelte существенно облегчают задачу и требуют писать меньше кода. Также у них есть и другие преимущества. В этой статье мы рассмотрели лишь относительно простые методики вывода информации с помощью DOM и чистого HTML, а также TypeScript/JavaScript.

Надеюсь, вы теперь представляете, как выводить информацию без использования библиотек. Есть ли другие способы? Конечно. Можно написать функции, которые упростят код и позволят использовать его многократно? Конечно. Но однажды вам захочется поэкспериментировать с одним из таких прекрасных инструментов, как Vue, React, Angular или Svelte.

Эти фреймворки делают за нас много работы. Вы можете помнить, как выводить информацию с помощью чистого DOM-кода с JavaScript или jQuery. Или как делать это с помощью инструментов вроде handlebars или mustache. А может быть, вы никогда не выводили информацию в DOM без помощи фреймворка. Можете сами представить, какие процессы протекают под капотом современных библиотек и фреймворков, когда они выводят для вас информацию на экран.

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

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

Источник

Что такое ванильный javascript

Для чего вам отдельно изучать vanilla JavaScript

От автора: многие люди часто смотрят на vanilla JavaScript и фыркают. Для чего изучать vanilla JavaScript, если у нас есть Angular, React и Node.js? Но именно в этом многие разработчики, особенно новички, ошибаются. Чего они не понимают, так это того, что все это и многое другое построено на JavaScript. Вот несколько веских причин, почему вы должны изучать vanilla JavaScript, даже если вы думаете, что вам это не нужно.

Понимание

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

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

Кто-нибудь помнит старые добрые времена jQuery? Никто больше не говорит о когда-то популярной библиотеке JavaScript. Всем нужны React и Angular.

Лучший код

Если вы лучше поймете, как работает JavaScript, у вас будет больше шансов создать более качественный код.
Суть JavaScript в том, что он был создан, чтобы каждый мог писать код. Однако со временем приложения и требования стали более сложными, и 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.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

JavaScript. Полное руководство

Изучите самый популярный язык разработки и станьте высокооплачиваемым профи

Пишем фронтенд-компоненты на ванильном JS

В наши дни вокруг фронтенд-фреймворков (React, Angular, Vue) много шумихи. Поразмышляем, какую проблему они решают и для чего могут быть полезны.

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

Созданная функция будет представлять собой ра с крывающийся список элементов. Она должна принимать параметр, указывающий на количество элементов, отображаемых при начальной загрузке. При нажатии на “Показать больше” (Show more) будут показаны все элементы в списке. “Показать меньше” (Show less) скроет все элементы, кроме ранее выбранного числа. Фича должна быть расширяемой, чтобы добавлять на одну страницу несколько таких списков.

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

Планирование

Прежде чем приступать, нужно рассмотреть несколько моментов.

Затем, наконец, можно приступить к созданию JS-фичи, добавляя функции в код.

1. Дизайн кода + модульность

Требования гласят, что компонент должен быть доступен для переиспользования во многих экземплярах списка. Как добиться этого в JS?

Способ заключается в создании того, что называется “модулем”. Это набор переменных и функций, которые инкапсулированы в единый контекст выполнения, поэтому переменные внутри будут частными и ограниченными. Другими словами, когда вы создаете объект или функцию в JavaScript, то назначаете границу вокруг функций и переменных внутри них, делая эти значения уникальными.

Узнать больше о шаблоне модуля JavaScript можно из главы о модулях в книге Эдди Османи “Изучение шаблонов проектирования Javascript”. В очень упрощенном виде это означает, что мы пишем код со следующей структурой:

Мы определяем компонент в области действия функции (либо внутри объекта, либо внутри функции, возвращающей объект). Такая структура позволяет написать компонент, все переменные которого ограничены только конкретным экземпляром списка. Так нам не придется больше беспокоиться о расширяемости модуля в будущем. Нет проблемы создать на одной странице один, два или пять списков. Вот модуль, который мы написали:

Важно также, что в действительности пользователю этой функции не видно никакой внутренней логики компонента. При желании вывести компонент на следующий уровень вы можете предоставить геттеры, сеттеры или другие функции. Сейчас мы возвратим только корневой элемент.

Здесь можно было бы раскрыть больше внутренних процессов:

Затем пользователь компонента вызывал бы эти действия извне функции следующим образом:

Здесь следует отметить еще одно: для обозначения элемента DOM используется $ . Это соглашение Jquery, популярной библиотеки методов расширения Javascript, но оно распространилось повсюду для определения переменных в JS, указывающих на один или несколько узлов DOM.

2. Рендеринг HTML-кода

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

На первый взгляд, на основе пользовательского ввода придется ре-рендерить не так уж и много. Единственное, что могло бы часто меняться, — это текст “показать больше”. Что нам нужно сделать, так это отделить логику рендеринга HTML от остальной части компонента.

3. Сохранение состояния компонента

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

4. Уничтожение элемента

Создание фичи

Наконец-то мы готовы создать необходимую фичу. Сначала нужно определить JS-функцию, которая будет модулем для компонента (опять же, термин “модуль” здесь означает часть JS-кода, который будет определять область действия и применяться только к целевому элементу). В приведенном ниже коде строка collapsible($module1, 2) говорит: “Создайте новый модуль JS-кода, который применяет функциональность свертывания только к элементу под названием module1 ”.

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

Разработка без фронтенд-фреймворков — полезное упражнение, которое позволяет увидеть потрясающую функциональность, к которой эти инструменты дают доступ.

Да, вы должны изучить Vanilla JavaScript, прежде чем фантазировать о JS Framework-ах

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

«Что-то не так с нашим Angular-приложением, чувак. У меня есть digest is already in progress ошибка, везде появляется ошибка — не могу понять, что происходит», — говорит он, явно нервничая.

Но я не нервничаю и не нервничаю. Я точно знаю, с чего начать, потому что я знаю свой JavaScript.

И все это я знаю благодаря автоботу.

Перемотка на 2011 год. ⏪

Но мне и моим друзьям пришлось создать софт, ориентированного на задачи автобота в реальном времени для одного из наших классов.

Мы наткнулись на эту новую классную вещь под названием Node.js ( ее документы тогда ). Никаких причудливых зависимостей, легких порожденных дочерних процессов, асинхронных и управляемых событиями … и многие в онлайне говорили, что это было г**но. Мы не имели ни малейшего представления о том, что такое JavaScript или V8, но это все равно казалось хорошим вызовом для нашего проекта.

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

Но я не сделал. Хотя я не знал этого в то время, это было одно из лучших ранних решений в моей карьере.

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

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

2 Что такое “Ванильный JavaScript”?

Позвольте мне процитировать ответ от koenpeters на Stackoverflow :

Использование «VanillaJS» означает использование простого JavaScript без каких-либо дополнительных библиотек, таких как jQuery.
Люди используют это как шутку, чтобы напомнить другим разработчикам, что в наше время можно многое сделать без необходимости в дополнительных библиотеках JavaScript.
Вот забавный сайт, который в шутку говорит об этом: http://vanilla-js.com/

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

Шутка про “фреймворк” Ванильный JS.

Онлайн форумы заполнены такими вопросами, как:

В чем смысл Vanilla JavaScript? Когда был придуман термин?

Становление современного, простого JavaScript

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

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

JQuery

Этот сайт полон полезных примеров JS Vanilla — посмотрите!

О, и в случае, если вам нужно больше социальных доказательств:

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.

— Mislav Marohnić (@mislav) July 25, 2018

Слово о JS фреймворках: плюсы и минусы

Во-первых, что я подразумеваю здесь под «JS»?

Но, пожалуйста, ради этой статьи, давайте объявим их эквивалентными по своему основному назначению.

Плюсы: почему я считаю, что JavaScript-фреймворки потрясающие

→ Они помогают вам, абстрагируя сложный и сложный код.

→ Они помогают быстрее доставлять код и увеличивают скорость разработки.

→ Они заставляют вас сосредоточиться на ценности вашего приложения, а не на его реализации.

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

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

Минусы: почему я считаю, что JS-фреймворки это НЕ ТАК потрясающе

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

Как я когда-то читал где-то: «Вы не React и не разработчик Vue. Вы разработчик».

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

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

Почему вы должны изучать ванильный JavaScript перед фреймворками?

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

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

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

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

Для меня это принесло много положительного:

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

Я надеюсь, что убедил вас испачкать руки простым простым JavaScript. Если вы хотите надрать всем задницу в веб-разработке, вот совет с моего высокого уровня:

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

И еще несколько конкретных советов:

Для начинающих: я считаю, что учебный процесс, изложенный в этом посте про JS, является хорошей отправной точкой:

Теперь об учебных ресурсах:

Learn Vanilla JS — список ресурсов с открытым исходным кодом на GitHub 👈

Мы хотим сделать его максимально открытым и совместным. Так что не стесняйтесь добавлять ценные вещи с помощью вилки + PR! 🔔

Некоторые заметные одноразовые статьи, не добавленные в список выше:

Я надеюсь, что вы найдете ценность в этой маленькой ванильной JavaScript-вики!

Заключение

Так вот мой TL; DR для вас, ребята:

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

Я твердо верю, что этот принцип «сначала изучи основы / корни» применим практически ко всему в жизни. От изучения нового языка программирования до начала нового вида спорта. Это требует много практики, но как только вы овладеете этим, остается только проявить творческий подход. И вот тут начинается настоящее веселье.

Источник