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

Меня зовут Александр Дудукало, я курирую направление «Веб-разработка» в Skillbox. Мои выпускники, посвятившие себя фронтенд-разработке, часто рассказывают о том, что им бывает очень непросто сориентироваться в обилии существующих технологий, особенно поначалу. Человек приходит в новую компанию, ему дают какой-то проект, включают в рабочую группу в корпоративном чате, и он остается один на один с поставленной тим-лидом задачей. Обычно в подобной ситуации джун испытывает растерянность, поскольку не знает, за что хвататься в первую очередь, какой софт ему нужен для работы, где черпать полезную информацию. Эта статья — своего рода шпаргалка по экосистеме фронтенд-разработчика на JS, которая поможет начинающему программисту почувствовать себя более комфортно в процессе погружения в свой первый самостоятельный проект.

Сообщества, полезные любым IT-специалистам

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

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

GitHub — отличная альтернатива коммерческому хостингу: портал позволяет не просто создать собственный репозиторий кода, но также писать документацию с вики- markdown- или html-разметкой, осуществлять контроль версий, собрать собственную команду или вступить в уже существующую, задавать вопросы и оставлять комментарии. Иными словами, это целая социальная сеть с уклоном в программирование.

Кроме GitHub, следует отметить портал Stack Overflow. Это, пожалуй, самый большой форум в интернете, содержащий информацию и обсуждения по всем языкам программирования, не только по JavaScript. Если у вас возникло какое-либо затруднение или появился кажущийся нерешаемым вопрос, будьте уверены, что ответ вы найдете на Stack Overflow. Ссылки именно на этот портал обычно появляются в выдаче первыми, когда мы ищем информацию по программированию в Google. Пользователи этого ресурса общаются на английском языке, но в разделе форумов есть ветки на русском. Кроме того, при необходимости всегда можно воспользоваться онлайн-переводчиком.

Из русскоязычных источников информации следует, безусловно, упомянуть сайт Tproger, на котором собрано очень много полезной информации по JavaScript, и полезный учебник https://learn.javascript.ru, в котором собраны уроки по JavaScript/DOM начиная с самых основ. Имеет смысл взять на вооружение тематические каналы в Тelegram: список самых полезных из них был не так давно опубликован на портале Tproger, еще один перечень можно найти на сайте Techrocks. И конечно же, «Хабр» — здесь можно почерпнуть полезные лайфхаки, научиться новым приемам программирования и почитать лонгриды о полезном инструментарии.

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

Платформа Node.js

Очевидно, что самый простой способ запустить программу на JavaScript — использовать браузер. Обычно он и применяется в процессе разработки фронтенда. Но часто возникает необходимость запускать JS-приложения вне браузера, например при написании и тестировании каких-либо серверных приложений, для которых не требуются браузерные функции и компоненты. Благодаря появлению программной платформы Node.js JavaScript-код можно запускать на устройствах с операционными системами Windows, Linux и macOS без использования браузера. 

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

Инструменты разработки

Для написания кода нужен простой, удобный и по возможности бесплатный редактор. Одним из самых популярных является Visual Studio Code (VS Code), разработанный корпорацией Microsoft, — он поддерживает синтаксис многих языков программирования, в том числе JavaScript. В нем уже «из коробки» имеется множество полезных функций — встроенный отладчик и средства для рефакторинга, а недостающие возможности без труда добавляются в редактор установкой плагинов. При этом дополнений для VS Code существует множество — их можно добавлять как с помощью встроенного инструментария самого редактора, так и с сайта Microsoft, где над их разработкой и поддержкой трудится целое сообщество программистов. В других редакторах расширения подключаются из командной строки, что не слишком удобно.

Еще один текстовый редактор, специально созданный для разработки кода, носит наименование Sublime Text. Он поддерживает подсветку синтаксиса многих языков, включая JavaScript, и позволяет подключать плагины. Так же, как и WebStorm, он платный.

К инструментам разработки можно отнести и полезные плагины — о некоторых мы уже подробно рассказывали в предыдущей статье. Помимо них, следует упомянуть набор плагинов Emmet — они значительно облегчают и упрощают написание кода не только на JavaScript, но также на HTML, XML, XSL и других языках. Плагины Emmet сами написаны на JavaScript, они уже встроены в VS Code, а к другим редакторам подключаются в виде надстроек и распространяются бесплатно на основе открытой лицензии. Этот минимально необходимый инструментарий, который следует освоить любому разработчику.

Инструменты для автоматизированного и юнит-тестирования

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

Наиболее популярной системой тестирования в стеке фронтенд-разработки на JavaScript является Jest. Это среда тестирования JavaScript, созданная на основе среды тестирования JavaScript с открытым исходным кодом Jasmine. Она позволяет тестировать программы, написанные с использованием Babel, TypeScript, Node, React, Angular, Vue и других фреймворков. Пожалуй, самое большое достоинство Jest состоит в том, что для большинства проектов на JavaScript этот инструмент может работать без дополнительных настроек. Для Jest имеется развернутая документация на русском языке, и кроме того, есть обширное русскоязычное сообщество.

Языки, компилируемые в JavaScript

Языки, компилируемые в JavaScript — это тоже часть экосистемы разработчика. Основным среди них является TypeScript, созданный корпорацией Microsoft. TypeScript расширяет возможности JS в вопросах типизации: в этом языке переменная может менять свой тип в зависимости от ситуации. Однако эта медаль, как водится, имеет две стороны: хотя удобство разработки и повышается, но возможность явного статического назначения типов переменных и использование полноценных классов создают предпосылки для ошибок в коде.

Код на TypeScript компилируется в JavaScript. Для решения простых задач TypeScript не нужен, но тем не менее сегодня этот язык стал стандартом де-факто и занимает значительную часть рынка. Он поддерживается многими фреймворками, например, Angular — созданной Google открытой платформы для разработки веб-приложений. Сама эта платформа написана на TypeScript. Поэтому, если вы планируете использовать Angular, вам придется освоить этот язык.

Компонентные фреймворки

Фреймворки включают набор функций, элементов, модулей, которые позволяют нам быстро создавать компоненты для приложений и соединять их вместе. Обычно фреймворки обладают возможностью работать с сервером, то есть они решают ту часть задач, которая обычно выпадает на долю разработчика. Фактически они позволяют не изобретать собственный велосипед всякий раз, когда вам нужно куда-то доехать. Самые известные из JS-фреймворков — это React, Vue.js и Angular.

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

Платформу Angular я уже кратко упоминал выше — это популярный фреймворк для создания веб-приложений, разрабатываемый совместно командой из компании Google и независимым сообществом программистов. С помощью Angular можно строить довольно сложные веб-приложения, и лучше всего этот фреймворк подходит для разработки больших проектов с жесткой структурой. У Angular имеется уникальная возможность обеспечивать обратную взаимосвязь данных. То есть можно изменить данные на стороне фронтенда, а на сервере соответствующие изменения произойдут автоматически. Этот же принцип работает и в обратном направлении: такую синхронизацию обеспечивает Angular. Но этот фреймворк сложнее в изучении и использовании, поскольку требует обязательного знания TypeScript.

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

Этот фреймворк очень прост, но при этом Vue — мощный инструмент, который позволяет создавать полноценные приложения. У него также есть дополнительные подключаемые модули, библиотеки, которые дают возможность создавать полноценные мобильные приложения. Чаще всего Vue используется, когда имеется большой проект, построенный без применения каких-либо дополнительных инструментов, и необходимо перейти к использованию фреймворка. Он дает такую возможность. Вы можете постепенно выделять или создавать отдельные компоненты и шаг за шагом переводить сайт или веб-приложение на Vue.js. У Vue есть отличная система анимации, с помощью которой можно анимировать все что угодно, используя транзишены — эффекты плавного анимированного перехода от одного состояния к другому. Они создают ощущение отзывчивости интерфейса, пример такой анимации — сдвигающееся меню, переворачивающиеся страницы на сайте. Для начинающих разработчиков, на мой взгляд, это идеальный фреймворк. 

Инструменты автоматизации сборки

Если JavaScript используется исключительно для верстки веб-страниц, то для автоматизации сборки обычно применяется Gulp. Если речь идет о разработке фронтенда приложения, лучше всего подойдет Parcel — это один из самых простых сборщиков. А для более серьезных и масштабных проектов лучше выбрать Webpack — он предоставляет удобный способ сконфигурировать настройки нашего сборщика. Для расширения возможностей этого инструмента можно подключить к нему дополнительные библиотеки, модули, инструменты и плагины.

Многие фреймворки работают с собственными сборщиками — например, Webpack используется в Vue.js. Лично я для сложных задач выбираю именно его, а для простых сайтов, лендингов или одностраничных веб-приложений применяю Parcel.

***

Безусловно, в этой статье я перечислил далеко не все существующие сегодня инструменты, входящие в экосистему JS-разработчика. Например, вопрос оптимизации JS-приложений стоит очень остро: в частности, для оценки производительности веб-приложений используется инструментарий Chrome Dev Tools. Если у вас есть любимые библиотеки или полезные приложения, о которых я не упомянул, обязательно поделитесь ими в комментариях.