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.

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

Метод Scrum для веб-разработки
Scrum позволяет работать со своей коммандой результативно, полностью контролируя все этапы разработки (при грамотном подходе и в руках нужного человека). Узнай в этом кратком видеокурсе об этом подходе, и совершенствуй свои результаты, закрывая проекты без просроченных дедлайнов.
Метод Scrum для веб-разработки
13 уроков
Скилл: Successful
Game Development with Unity 5
Разработка игр постоянно динамично меняется и совершенствуется. Эта область постоянно в движении, и если вы не будете осторожны, вы можете остаться позади. Вот почему так важно держать свои навыки на высшем уровне и ознакомиться с новейшими инструментами и программами. Этот курс научит вас работать с Unity5, новейшей версии одного из ведущих в отрасли движка.
Game Development with Unity 5
113 уроков
Скилл: EA
Pro Tools 12 Essential Training
Pro Tools является отраслевым стандартом программного обеспечения для музыки и пост-продакшн. Этот курс охватывает основные концепции и методы, необходимые для записи, редактирования, микширования и мастеринга в Pro Tools. Композитор / продюсер Skye Lewin учит, как создавать музыку с виртуальными инструментами и плагинами, работать с аудио и видео файлами, и делать как основные изменения, так и более сложные операции с инструментами, как Elastic Time и Pitch. Являетесь ли вы продюсером, звукорежиссёром, или радиолюбителем - этот курс может помочь вам стать специалистом в Pro Tools 12.
Pro Tools 12 Essential Training
116 уроков
Скилл: Dr.Dre
HTML5 Geolocation in Depth (Ангельский)
Научись использовать HTML5 Geolocation API, Google Maps API, Directions API и Places API для того, чтобы успешно использовать их в своих приложениях.
HTML5 Geolocation in Depth (Ангельский)
58 уроков
Скилл: Географ
ASP.NET MVC Fundamentals
ASP.NET MVC Fundamentals - это именно тот видеокурс, который введет тебя в курс дела перед началом работы с этой гибкой технологией. С помощью C# и ASP.NET ты научишься создавать сложные веб-сайты и приложения быстро и правильно. Эти видеоуроки также будут полезны тем, кто собрался приступить к изучению боллее новой версии - MVC 5.
ASP.NET MVC Fundamentals
10 уроков
Скилл: Виндовоз
The Psychology of Code Testability (Ангельский)
Misko Hevery - создатель AngularJS (от Google) дает нам представление о том, как писать тестируемый код и что делать если код трудно проверить.
The Psychology of Code Testability (Ангельский)
6 уроков
Скилл: Профик