JavaScript — один из тех языков программирования, которые можно просто освоить без опыта. Он используется для веб-разработки, на нем можно создавать серверные приложения, 3D-игры и даже программировать робототехнику. Автор блога SkillFactory Максим Рудик рассказывает, с чего начать изучение JavaScript.
Заложите основы
Основы любого языка программирования — это типы данных, переменные, операторы, циклы, функции. Знаний в этих областях будет достаточно, чтобы научиться писать код на JavaScript.
Одновременно с этим или раньше нужно освоить основы HTML и CSS — это язык разметки и каскадные таблицы стилей, с помощью которых создаются статичные веб-страницы. Чаще всего JavaScript используется именно для работы с элементами веб-страниц. Без знания их устройства будет сложно перейти от теории к практике.
Новичкам советуем почитать:
- JavaScript for Beginners — бесплатный онлайн-курс на Coursera.
- Базовый курс по JavaScript от MDN Web Docks, крупнейшего ресурса, посвященного веб-разработке. Полностью переведен на русский язык.
- Основы языка с TutorialsPoint — отличный способ параллельно подтянуть профильный английский.
- «Программирование на JavaScript» — книга Эрика Фримена и Элизабет Робсон, подойдет для тех, кто еще не имел дела с программированием.
Освойте JQuery и популярные плагины
Чтобы понять, как работает JavaScript, проще всего начать с веб-разработки. Тут стоит освоить библиотеку JQuery. В ней та же логика, что и в чистом JavaScript, но она позволяет писать код кратко за счет более лаконичного синтаксиса. JQuery долго была самой популярной JavaScript-библиотекой для работы с веб-сайтами. В 2010-х появились новые фреймворки — Angular, React и Vue.js, а популярность JQuery стала снижаться.
Но ей не стоит пренебрегать хотя бы потому, что на ней написано огромное количество веб-сайтов, которые нужно поддерживать и развивать. Нередко работа начинающего программиста заключается в обслуживании кода, который достался ему «в наследство» от предшественников.
Материалов для изучения в сети достаточно: от официальной документации до подробнейших справочных и обучающих ресурсов и бесплатных видеоуроков.
Научитесь искать плагины и работать с ними. Они нужны, чтобы упростить работу с популярными элементами интерфейса. Они написаны на чистом JavaScript, практика их подключения и настройки не требует глубоких знаний, но хорошо тренирует владение языком. Это могут быть плагины для создания модальных окон (Tingle), галерей (lightgallery.js), встроенных объектов (SuperEmbed.js) и многих других элементов веб-страницы.
Разберитесь с Node.js
Дальше нужно разобраться, что происходит на сервере: что такое базы данных и как они взаимодействуют с клиентской частью веб-приложения.
Для этого можно изучить Node.js. Это серверная платформа, где выполняется JavaScript. C ее помощью можно полностью реализовать backend веб-приложения. Для полноценного освоения клиентской части будет достаточно базовых знаний Node.js.
- Официальная документация с короткими и понятными примерами на английском.
- Быстрый старт с express.js. Express — это фреймворк, с которым проще всего начать применять Node.js на практике.
Выберите: Angular, React или Vue.js
Дальнейшие шаги зависят от того, чем вы хотите заниматься. Самый популярный путь дальнейшего изучения JavaScript — освоение инструментов для веб-разработки.
Пользователям важно, чтобы страницы интернет-магазина, сайта соцсети или новостного портала загружались быстро, а владельцам в свою очередь важно, чтоб пользователи не покидали сайты из-за медленного интерфейса. Именно в результате погони за скоростью и производительностью появились такие JavaScript-фреймворки, как Angular и Vue.js и библиотека React.
С их помощью разработчики смогли перейти от формирования страницы на стороне сервера (Server Side Rendering) к формированию страницы на клиентской стороне (Client Side Rendering), то есть в браузере. В рамках этого перехода появилось понятие одностраничных или изоморфных приложений (Single Page Application).
Такие приложения загружают разметку с сервера только один раз, после чего при переходе на новые страницы запрошенная с сервера информация приходит в специальном формате, без HTML-тегов. Это работает намного быстрее, чем передача каждой запрошенной страницы с сервера в браузер.
Начать изучать фреймворки стоит с Vue.js. Он основан на тех же концепциях, что React и Angular, но появился позже них, организован более стройно и логично, поэтому в нем проще разобраться новичкам.
Начните осваивать инструменты разработчика
Уже в процессе изучения JavaScript начинайте осваивать инструменты экосистемы веб-разработки на Javascript, необходимые для работы в команде:
- инструменты отладки кода (JavaScript Debugger, Chrome Dev Tools);
- менеджер пакетов npm, который позволяет одной командой в терминале скачивать и устанавливать любые плагины, библиотеки и фреймворки;
- система контроля версий Git. С ее помощью несколько разработчиков могут одновременно работать над проектом без риска запутаться в обновлениях;
- таск-менеджер Gulp. Это программа, написанная на JavaScript, позволяющая автоматизировать рутинные задачи веб-разработки, например объединение файлов, работу с CSS-препроцессорами и многое другое. На официальной странице сайта Gulp в разделе Plugins есть множество плагинов и модулей для решения большинства типовых задач;
- модульный упаковщик Webpack. Собирает все исходные файлы (картинки, шрифты, таблицы стилей, JS-файлы и т.д.) в единый граф зависимостей и упаковывает модули в один компактный пакет для загрузки браузером. Особенно полезен в организации работы с приложениями на React, но считается слишком громоздким для небольших и несложных проектов;
- фреймворки для тестирования JavaScript-кода (Jasmine, Mocha, PhantomJS);
- платформы кибербезопасности (Snyk, Node Security Project, Retire.js), с помощью которых разработчики находят уязвимости и критические ошибки в своем коде.
Когда освоите главные инструменты — можно смело выбирать специализацию. JavaScript используется не только во frontend-разработке, но и для создания мобильных, десктопных приложений и игр и даже для программирования бытовой техники и оборудования.
