Третья статья нашего цикла о языках программирования посвящена 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;
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 — телеграм-канал для тех, кто любит вёрстку и анимацию.