Что такое ванильный JavaScript?
Термин ванильный JavaScript в основном означает JavaScript без фреймворков или библиотек. Все известные фреймворки/библиотеки внешнего интерфейса (React, Angular, Vue, jQuery, моменты и т. д.) за кулисами используют ванильный Javascript.

Что такое Front-end Framework?
Frontend Framework — это набор кода Javascript, который абстрагирует сложный уровень наиболее распространенных методов веб-разработки, необходимых для разработки веб-приложения производственного уровня. . Вся идея разработки Frontend Frameworks возникла 10–15 лет назад, когда веб-браузеры не были достаточно мощными для обработки сложных веб-технологий, и разработчику приходилось писать много стандартного кода для поддержки всех веб-браузеров.

Мы говорим об изучении Vanilla JS, но есть и плюсы использования Frontend Frameworks, верно?
И да, и нет.
Плюсы
 – Они помогают вам абстрагироваться от жесткого и сложного кода.
 – Они помогают быстрее выпускать код и увеличивать скорость разработки.
 – Они заставит вас сосредоточиться на ценности вашего приложения, а не на его реализации.

Минусы
 – Крутая кривая обучения
 – Сильно зависит от организации или сообщества, поддерживающего фреймворки
 – Вы обязаны использовать определенные шаблоны проектирования
 – Если очень специфическая функциональность по умолчанию недоступна в фреймворке, тогда вам сначала нужно понять основную реализацию фреймворка, а затем реализовать требуемую функциональность в соответствии с фреймворком.
- Каждое изменение (большое или маленькое) в фреймворке влияет на проектирование, поскольку а также деловые решения.

Я знаю все эти вещи, но скажите мне, почему я должен осваивать Vanilla JS, прежде чем работать над каким-либо новым фреймворком? За последние несколько лет я не нашел ни одной причины использовать document.querySelector!

Я согласен, что мы не обязаны писать большую часть материала Vanilla JS, за исключением нескольких концепций, потому что мы используем Frontend Frameworks, но знаете ли вы разницу между document.createElement и document.createDocumentFragment? И как все известные Frontend Frameworks используют преимущества производительности одного метода над другим?

Как современные интерфейсные фреймворки используют шаблоны проектирования для эффективного обновления деревьев DOM? Как Angular, React, Vue объединяют несколько запросов на обновление дерева DOM с помощью VanillaJS?
Как реализована двусторонняя привязка данных и односторонняя привязка данных?
Как все интерфейсные платформы прекрасно обрабатывают асинхронные задачи с помощью Vanilla JS ?
Как разработать производительные веб-приложения?

Если вы не знаете ответа на эти вопросы, то сначала вам нужно отточить свои навыки работы с JS, а затем выбрать любой JS Framework, который вам нравится. .

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

Минусы
Вы не будете звучать так круто, как React Developer😉

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

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