Третья статья нашего цикла о языках программирования посвящена JavaScript. Фронтенд-разработчик «Криптонита» Антон Воронков рассказал об особенностях, применении, плюсах и минусах языка, а также поделился полезными обучающими ресурсами и идеями для pet-проекта.

Ранее наши разработчики рассказывали о Scala и Rust.

1. Особенности

Если вы никогда раньше не работали с JavaScript и читаете этот текст из десктопной версии одного из современных браузеров, то вы можете прямо сейчас написать свой первый HelloWorld-скрипт. Нужно нажать клавишу F12 (открыть инспектор), перейти на вкладку «Console», ввести alert("Hello, World!"); и нажать клавишу «Enter».

Можно назвать JS особенным: будучи самым распространённым языком для браузеров, он также является одним из самых популярных языков программирования в мире.

Главная сила JS — это работа с пользовательскими интерфейсами, поэтому он практически неотделим от прочих составляющих веб-разработки: HTML, CSS и браузерного окружения. ДИСКЛЕЙМЕР: если вы хотите изучать и JavaScript, и фронтенд в целом, нужны хотя бы минимальные навыки вёрстки. Без знания HTML и CSS далеко не уедешь.

Конечно, есть проекты, где JS используется только для описания сложной логики и работы с данными, при этом никак не затрагивая интерфейсы. Но это небольшая часть индустрии. Если искать вакансии по этому признаку, то таких почти не встретится: для сложных и объёмных вычислений JavaScript — не самый лучший выбор в плане производительности, многопоточности и т.д. 

2. Где используется

JavaScript создавался как язык для веба, буквально «чтобы сделать веб-страницы живыми», поэтому все свои прелести он раскрывает в веб-разработке.

При этом среда его выполнения не ограничивается браузером. Сейчас он используется для разработки интерфейсов десктопных и мобильных приложений, а также для описания логики бэкенд-части, то есть на сервере. Всё благодаря программной платформе Node.js, которая дарит языку широкую специализацию. Есть и другие инструменты, но «нода» — самая популярная на данный момент.

Конкретно в нашей компании JavaScript используется для разработки интерфейсов веб-приложений и для создания middleware-сервисов — легковесной прослойки логики между клиентской и серверной частями.

Моя работа не исключение: я веду разработку фронта на Vue.js для проекта-интегратора различных сервисов, в котором из-за специфики задач приходится использовать не совсем стандартные подходы. Например, выносить большую часть логики авторизации в middleware-сервис на Node.js, или использовать Vue-компоненты + JSX для реактивной генерации системы SVG-изображений с привязкой к глобальному хранилищу приложения.

3. Плюсы и минусы языка

Про плюсы можно говорить долго.

• JavaScript — язык, в котором «простые вещи делаются просто»: он обладает несложным синтаксисом и высокой читабельностью кода, что может быть особенно важно для новичков.

• Кроссплатформенность: исполняемая среда находится практически на любом смартфоне или ПК. В браузере можно получить HTML любого сайта, в котором, в большинстве случаев, будет подключён JS-код.

• Асинхронность и гибкие инструменты работы с ней: они позволяют писать асинхронный код и дают возможность запуска параллельных вычислений.

• Большая экосистема языка:

- развитое браузерное и платформенное окружение, предоставляющее самые разнообразные интерфейсы: от DOM API, который позволяет гибко работать с HTML/CSS, до Web Workers, помогающих оптимизировать ваше приложение;

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

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

 Скажу и про минусы.

• JavaScript неотделим от фронтенд-разработки и наоборот. Поэтому, скорее всего, вам придётся писать не только на «чистом» JS. Сейчас знание библиотек/фреймворков типа React, Vue.js, Nest.js является практически обязательным. При этом они, как правило, обладают своей собственной мини-экосистемой.

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

• Также стоит упомянуть, что невероятное количество фреймворков и библиотек порождает возможность занести в проект сногсшибательное количество зависимостей: 

- будьте готовы к конфликтам версий и необходимости следить за их актуальностью. Впрочем, если не злоупотреблять количеством зависимостей, то очень вероятно, что вас выручит документация и встроенные возможности платформы, например — команда npm audit;

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

4. Комьюнити

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

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

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

5. Обучение

JavaScript сам по себе очень дружелюбный к новичкам язык. У него довольно простой синтаксис, и на базовом уровне тебе не нужно думать, что происходит «под капотом». Он легко простит тебе пропущенную точку с запятой и подробно расскажет о сделанных синтаксических ошибках. Каких-то специальных знаний для него тоже не нужно. Поэтому, если не рассматривать разработку, где желательно знать HTML и CSS, то можно просто сесть, открыть учебник и начать прогать. 

В своё время мне очень помог сайт learn.javascript. Также я постоянно использую MDN Web Docs. Это открытые онлайн-справочники, которые регулярно обновляются. К ним я рекомендую обращаться почаще.

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

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

Для базового уровня мне подошёл курс HTML Academy. За 2-3 месяца обучения я получил понятный вектор развития и смог разбираться в сложных вещах, типа фреймворков. Второй раз я воспользовался платными курсами, когда упёрся в потолок своего понимания языка, а точнее — самого программирования. Курс от Яндекс.Практикума помог мне понять, что такое правильная архитектура веб-приложения, как делать проект удобным и легко поддерживаемым. Это уже чуть более продвинутый уровень изучения.

6. Pet-проекты

Самое распространённое, что можно сделать — это сайт-портфолио. Попробуйте завести репозиторий на GitHub и запилить страничку о себе. Дальше можно вывести этот сайт через веб-хуки на какой-нибудь хостинг, например, Netlify. Энтузиасты могут усложнить себе задачу: поработать с Docker и использовать сервис типа Heroku, чтобы можно было обновлять сайт через консоль.

Сайт-портфолио можно наполнить самым разным контентом. Попробуйте сделать идеальную семантическую вёрстку, CSS- или JS-анимации, пляшущие графы или какую-нибудь абстракцию. Примеров в интернете миллион, их можно объединять между собой, делать что-то новое.

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

Полезные ссылки

• https://learn.javascript.ru/ — учебник по JS, с которого можно начать свой путь;

• https://developer.mozilla.org/ru/ — ресурс для разработчиков с актуальной информацией про веб-технологии;

• JavaScript: The Definitive Guide, 7th Edition — путеводитель по JS;

• React, Vue.js, Nest.js — библиотеки и фреймворки;

• https://htmlacademy.ru/intensive/javascript — курс HTML Academy;

• https://practicum.yandex.ru/middle-frontend/ — курс от Яндекс.Практикума;

• https://discord.com/invite/X8yWNWpTQs — дискорд-чат;

• https://t.me/vuejs_ru — сообщество VueJS в телеграме;

• https://t.me/codepen_amazing — телеграм-канал для тех, кто любит вёрстку и анимацию.