4 Января 2017

Почему тебе стоит выучить Vanilla JavaScript

На улице 2013 год и наша маленькая команда разработчиков находится на грани запуска одного из самых впечатляющих проектов клиента на сегодняшний день. Мой партнер врывается в дверь кабинета: "Что-то не так с нашим приложением на Ангуляре. У меня ошибки появляются повсюду, и я не могу понять, что происходит," - говорит он, заметно нервничая. Но я не нервничаю. Я точно знаю где начать искать, потому что я знаю, что это мой JavaScript. И я знаю, что все это благодаря небольшому роботу. Да, вы правильно прочитали: роботу.

Вернемся в 2011 год...

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

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

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

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

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

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

Во-первых, что я имею в виду под JS "фреймворками"?

Когда я говорю фреймворки, я имею в виду все из них - Angular, React, Backbone, Express, Koa,Vue, Jquery, Meteor, Socket.io и кладу их в одну коробку. Да, я знаю, что некоторые из них весьма различны. А также знаю что некоторые из них не совсем фреймворки а просто библиотеки. Но, пожалуйста, ради этой статьи, давайте поместим их вместе, чтобы понять главную мысль, которую я хочу донести этим постом.

И для тех, кто спрашивает: "Что такое ванильный JavaScript?"

Позвольте мне украсть ответ от koenpeters на Stack Overflow:

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

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

Почему я думаю, что JavaScript фреймворки крутые

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

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

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

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

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

Почему я считаю JS фреймворки не такими уж крутыми

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

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

Когда-то я прочитал: "Вы не Angular разработчик, не разработчик Express, вы прежде всего - разработчик."

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

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

Как изучения ванильного JavaScript перед фреймворками может помочь, и обязательно поможет вам

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

В течение последних 5 лет, более 10 фреймворков JS будоражили интернет. Угадайте, сколько будет фреймворков в ближайшие 5-10 лет?

Просто подумайте о том, что разработчики JQuery делают сегодня: пытаются догнать Angular. Завтра они будут пытаться догнать React. Печальный цикл.

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

Для меня это принесло много положительных вещей:

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

Изучение ванильного JavaScript, перед фрейморками JS

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

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

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

Слово о начале работы с ванильным JS

Я уверенно надеюсь что убедил вас. Так что если вы хотите надрать задницу в мире веб-разработки, вот вам мой большой совет:

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

И некоторые более конкретные советы:

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

Последние курсы на сайте:

SEO-специалист
Правильный SEO сможет привлечь пользователей и потенциальных клиентов на ваш ресурс практические бесплатно. В этом видеокурсе ты узнаешь как правильно организовать свой сайт для того, чтобы посиковые системы с легкостью понимали ваш контент и поднимали его в выдаче.
SEO-специалист
13 уроков
Скилл: Это SEO, детка
Secure for Web Apps & APIs Using JWTs
Нетривиальным веб-приложениям требуется некоторая форма аутентификации пользователя. Когда дело доходит до реализации аутентификации в современных одностраничных приложениях, все может стать немного сложнее, и традиционные методы сессии и cookie-based авторизация, как правило, мешают. Спецификация JSON Web Token предлагает гораздо лучший способ обработки аутентификации в SPA и имеет множество преимуществ.
Secure for Web Apps & APIs Using JWTs
29 уроков
Скилл: Advanced
ES6 for everyone
Цель этого курса проста: значительно укрепить основные навыки JavaScript и подготовить вас до написания современного JavaScript.
ES6 for everyone
67 уроков
Скилл: Middle
Building Awesome Web Apps with Angular 2
Получите общий обзор основных частей Angular 2 и узнайте как они сочетаются друг с другом, чтобы создать мощную инфраструктуру для постройки приложений. Изучите различия между Angular 1 и Angular 2. Используйте Angular CLI, чтобы развернуть все это супер быстро, и компонируйте большие приложения Angular 2 используя сервисы, роуты и сабкомпоненты.
Building Awesome Web Apps with Angular 2
54 урока
Скилл: Advanced
ASP.NET MVC 5
Узнай как строить веб-приложения с помощью платформы ASP.NET MVC 5 на языке C#. ASP.NET MVC 5 - один из популярных фреймворков для создания веб-приложений, который реализует шаблон Model-view-controller.
ASP.NET MVC 5
64 урока
Скилл: Middle
Super Motion
Крутой видеокурс для создания анимированной 2D графики. В данное время она стала очень популярной и используется в различных отраслях интернет маркетинга, а также в клипах, роликах, мультфильмах и зарисовках. Курс подойдет как новичку в программе Adobe After Effects так и не будет лишным для опытного пользователя этого программного пакета.
Super Motion
54 урока
Скилл: Навальный