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

В спешке? Пропустить:

1 [История JavaScript]
2 Что такое ванильный JavaScript?
3 Фреймворки JavaScript: плюсы и минусы 4 Зачем изучать простой JS перед фреймворками
5 Список открытых источников ванильных JS-ресурсов
6 TL;DR (too long; didn’t read (многа букаф, ниасилил)) aka Подведем итоги

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

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

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

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

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


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

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

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

Мы назвали его Optimus Prime и в итоге продали его Майклу Бэй.

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

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

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

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

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


Так какой смысл здесь? Я потратил достаточно времени, чтобы понять основные принципы JavaScript, прежде чем использовать ярлыки, предоставляемые фреймворками и библиотеками JS . Почему это важно? Ну, это то, о чем этот пост: не просто притворяться.

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

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

Vanilla JS

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

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

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

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

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

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

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

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

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

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

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

JQuery

$('.my #awesome selector');

против ванили JS:

document.querySelectorAll('.my #awesome selector');

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

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

гитхаб провел рефакторинг своего кода и перешел с jquery на JS

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

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

Я поместил все Angular , Vue , React , Backbone, Ember, Knockout, Ext, jQuery, Meteor, Express, Koa, Total, Socket.io и т. Д. В один ящик. Да, я знаю, что некоторые - совсем другое. Да, я знаю, что некоторые из них «на самом деле не фреймворк, а скорее библиотека.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Это помогло мне создать потрясающий набор клиентских функций за очень короткий промежуток времени для приложения Ember, не зная ничего о Ember.
  • Он получил предложение о работе от одного из технических гигантов из-за очень простой библиотеки, которую я написал в свободное время.
  • Это заставило меня выявить ошибки в реализации libs и быстро предложить простые решения.

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

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

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

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

  • Всякий раз, когда в Echo JS, Hacker News или GitHub появляются новые библиотеки или фреймворки JS, продолжайте читать источники.
  • Каждый раз, когда вы пишете кусок кода, старайтесь придумать простое решение JS, которое может соответствовать вашим потребностям, вместо того, чтобы сразу же искать библиотеку для интеграции.
  • Перейдите на Stack Overflow и бросьте себе вызов, чтобы самостоятельно ответить на ванильные вопросы JS.

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

1 Поймите некоторую основу Udacity, Codecademy или freeCodeCamp
2 Взгляните на JavaScript: понимание странных частей
3 Ознакомьтесь с серией книг YDKJS(You don’t know JS)!

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

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

Я работал со своим другом Фрэнком из Snipcart, чтобы составить тщательно отобранный список учебных пособий, книг, курсов, документации, источников новостей и блогов по vanilla JS .

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

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

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

Заключение

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

  • Если вы не знаете основополагающих принципов Интернета, вы в конечном итоге попадете в стену благодаря эволюции самого языка и постоянному появлению новых фреймворков.
  • Знание чистого JS сделает вас ключевым инженером, который может решать сложные проблемы (причина перед безумным гугл поиском).
  • Это сделает вас универсальным и продуктивным как на переднем, так и на заднем плане.
  • Это даст вам набор инструментов для инноваций, а не просто для выполнения.
  • Это поможет вам понимать, когда использовать фреймворк а когда нет .
  • Это даст вам лучшее общее представление о том, как работают браузеры и компьютеры.

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

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

перевод статьи https://snipcart.com/blog/learn-vanilla-javascript-before-using-js-frameworks

Поделиться Комментарии

Поделиться новостью

comments powered by Disqus