Материал будет интересен начинающим, кто стремится связать свою жизнь с веб-разработкой. Сегодня обучение программированию невероятно просто — любой материал можно загуглить или взглянуть на YouTube. Самое сложное — определить, а что же нужно гуглить. Я уверен, что статья ответит на этот вопрос и сэкономит кому-то много времени.
Список сформирован для освоения только направления Front-end разработки и конкретно для работы в Украине. Я не буду давать советы, что нужно учить, чтобы попасть в международные компании или компании из списка FAANG. И так, каждый Front-end разработчик должен знать Back-end, поэтому в этом списке будут разнообразные технологии. Наша цель – действительно высококвалифицированный Front-end разработчик.
Важно заметить, что темы из этого списка не нужно учить все сразу. Это путь, который растянется на годы. Освоив один пункт, можно переходить к следующему. Вместе с тем, даже для junior-специалистов важно знать о существовании всех технологий из этого списка, поверхностного ознакомления будет достаточно. С ростом вашей экспертизы в веб-разработке будут и углубляться знания в каждом из этих пунктов.
Ставим цель
Все начинается с цели. Чего мы хотим добиться? Прежде чем забираться в кипы учебных материалов и разбираться с языками программирования, убедитесь, что программирование это то, что вам нравится. Любите ли вы решать задачи и можете сидеть часами над монотонными задачами? Только недавно узнали, что веб-разработкой можно неплохо зарабатывать? От этого зависит, как быстро и эффективно вы будете учиться и превратится ли этот процесс в каторгу.
Чтобы пройти путь от точки А до точки Б, было бы прекрасно понимать, где находится эта точка Б. Вы хотите работать разработчиком senior в Украине и получать свои $5000 или планируете переезд за границу и работу в международных компаниях?
Базовый Computer Science
Нужно получить базовые знания о работе компьютера, браузера, веб-сайта. Что такое программа и как она работает? Можно пройти какой-нибудь базовый курс информатики, то, что изучают в школе. Освоить азы любого языка программирования (С, С++, Python) для того, чтобы было понимание, что такое переменная, конструкции языка, функции.
Полезно будет прохождение популярного курса CS50. Перевод на русский язык доступен на Прометеусе — Основы программирования CS50 2019 .
Command line (Терминаль)
Работа с консолью или терминалом – неотъемлемая часть обыденности программиста. Осваиваем базовые команды: навигации по каталогам, создание файлов и папок, изменения прав, запуск других программ через консоль. Чем раньше освоим этот инструмент, тем легче будет в будущем. Можно пройти любой курс по Linux и работе с консолью. На Udemy легко найти очень популярные предложения, например, Linux Basics: All You Need To Know To Start .
HTML
HTML – язык разметки (не программирование). С нее мы приступаем к изучению вебразработки. Осваиваем теги и построение страницы – каркас вебсайта. Доступных материалов много, к примеру, тот же CS50 от Гарвардского института, но уже специально для вебпрограммирования. Перевод на русский также доступен на Прометеус . Хотя HTML и не обновляется часто, удобнее учиться по курсам или туториалам на веб-сайтах, чем по книгам – нагляднее будет.
CSS
CSS – каскадные таблицы стилей. Если HTML это голый и скучный каркас, то с CSS наши страницы начинают выглядеть красиво и стильно. Освоив эти две технологии, мы можем уже создавать первые проекты. Простые «лендинги» или сайты-визитки. Надо набивать руку. Можно копировать другие сайты, главное сделать как можно больше страниц, чтобы запомнить названия тегов и правил.
Система контроля версий Git
Созданные нами проекты нужно где хранить, чтобы можно было делиться исходным кодом, смотреть, когда мы это создавали и как меняли. Git – идеальное решение, ведь это самая популярная система контроля версий. Весь код комитим и публикуем на GitHub.
Лучшее в Git – то, что его используют абсолютно все. Независимо от того, вы Back-end, Front-end, mobile-разработчик или вообще DevOPS, без Git просто некуда.
Дополнительно к CS50 курсу, где также упоминается GIT, могу порекомендовать свой бесплатный курс Git for beginenrs на YouTube. Скоро будет еще перевод на украинский. Также на официальном сайте можно совершенно бесплатно использовать учебник Pro Git от Scott Chacon и Ben Straub.
JavaScript
JS – основной язык программирования в интернете и для front-end разработчиков в целом. Ее изучение и практика займет больше времени. И вместе с этим, освоив JS core, изучение любых библиотек и фреймворков не составит существенных проблем. Освоив JS мы можем добавить интерактивность к нашим сайтам: валидации форм, сложные анимации и эффекты.
Материалов из JS невероятно много. Также есть несколько книг, которые обязательны для прочтения, но не сразу, только когда поймете суть языка JavaScript и немного набьете руку. Книги:
- «JavaScript: The Definitive Guide» David Flanagan.
- «JavaScript: The Good Parts» by Douglas Crockford .
- «You Don’t Know JS» by Kyle Simpson (Бесплатно на GitHub).
jQuery (для старых проектов)
Одной из самых популярных библиотек для JS была jQuery . Сейчас она менее популярна, но это не значит, что мы можем упустить ознакомление с ней. Не всем нам работать с современными и топовыми технологиями, кому-то и поддерживать старый (legacy) код нужно.
Значительное преимущество этой библиотеки – наличие тысяч плагинов и дополнений. Можно произвести любой слайдер, галерею или сложный анимационный эффект.
Ajax / Fetch API
Ценность нашим проектам предоставляют актуальные данные и своевременное обновление. С помощью Ajax мы можем производить асинхронные запросы на сервер для получения или отправки данных. Fetch API – новая реализация этого подхода.
CSS-препроцессоры
Поскольку CSS — это только таблицы стилей, то ни о каких переменных, циклах или функциях мы говорить не можем. Для этого можно использовать препроцессор: Sass, Less или PostCSS. Они дают нам возможность использовать переменные и mixins (нечто вроде функций). Затем этот код «компилируется» в обычный CSS.
CSS-методологии
Кто хоть чуть-чуть работал с CSS, знает, насколько может быть сложно поддерживать его организацию. Правильное формирование селекторов и стилей является сложной задачей. Весь этот код нужно поддерживать и модифицировать. Чтобы упростить жизнь, придумали разные методологии: BEM, Atomic CSS, OOCSS и многие другие. Это, по сути, набор правил, описывающий, как мы называем классы и используем селекторы.
CSS-фреймворки
К счастью, нам не нужно все писать самому или реализовывать какую-либо из методологий на проекте. Можно пользоваться готовыми решениями. Здесь приходит время для использования CSS-фреймворка. Выбор велик: Bootstrap , Material , Tailwind , Compass и множество других. Готовы к использованию наборы компонов, глобальные стили и возможность кастомизации под любой проект.
Данных знаний и технологий уже достаточно для создания полноценных сайтов-визиток, лендингов и других простых сайтов на несколько страниц. Конечно, это при условии, что мы не пишем Back-end, все данные уже для нас подготовлены.
Регулярные выражения
С регулярными выражениями всегда проблемы. Сколько бы мы их не учили, все равно толком не знаем. Чем раньше познакомимся, тем быстрее узнаем, как их использовать. Чаще всего используются в Front-end для валидации форм.
Project deploy
Когда мы создали первые проекты, пришло время показать их миру. Здесь мы начинаем осваивать самые простые подходы к развертыванию проектов и их доступу в интернете. Необходимо купить доменное имя и хостинг. Стоят они не очень дорого, но пользы принесут вам многое. На собеседованиях будет что показать, ведь свое портфолио нужно куда-то скачать.
Самый простой способ – загрузка исходных файлов через FTP на сервер хостинга.
PHP
Да, вам не показалось. В 2022 году я до сих пор советую изучить PHP фронтенд-разработчику. Почему? С помощью jQuery или даже React (Angular, Vue) построение действительно сложного сайта займет месяцы, если не годы. А вам нужен опыт работы с блогами, интернет-магазинами, содержащим админ-панель и возможность настройки виджетов и плагинов. Об этом мы поговорим в главе 17 CMS.
MySQL
Язык запросов SQL и базы данных MySQL пригодятся в любом случае. Если мы уже работаем с PHP, то без них никуда, а если нет, то не проблема. Даже сейчас я иногда использую SQL, например, проверяю аналитику в BigQuery.
CMS (WordPress, Joomla, Drupal)
Основная причина, по которой следует изучить PHP – это WordPress (или любая другая CMS). Ни в одном другом языке нет такого количества простых и функциональных систем управления контентом. Блог или интернет-магазин можно сделать через час. А функционала там будет столько, что самому за всю жизнь столько не написать. Нужно уметь использовать готовые решения.
Эти инструменты позволяют создавать коммерческие проекты, находить своих первых клиентов и продавать им готовые сайты. Работа с клиентами – бесценный опыт. Когда клиенты начинают жаловаться на проданные им сайты, скорость обучения по поиску багов растет в разы.
Nginx
Удобный и популярный веб-сервер. Здесь нам понадобятся наши знания по работе с консолью, ведь это сервер на Linux. Мы не часто с ним работаем, но понимание, как он обрабатывает запросы и возвращает файлы, важно.
SEO
Нам не нужно выводить сайты в ТОП-10 поисковой выдачи, но понимать, что такое оптимизация сайта под поисковые сервисы необходимо. Сюда входит семантическая верстка, оптимизация производительности страниц, работа с Lighthouse, Google PageSpeed, WebPageTest и другими сервисами. От того, как вы оптимизируете сайт (понимаете, что это такое и зачем) зависит, сколько денег заработает ваш клиент.
Аналитика (Google Analytics)
Когда наши сайты уже доступны миру, я хотел бы узнать, кто на них заходит, какие страницы просматривает и какое поведение пользователей в целом. Здесь нам помогут разные аналитики. Самый простой является Google Analytics. Устанавливаем с помощью Google Tag Manager и собираем информацию. На всех проектах и компаниях, где я работал, мы использовали этот сервис, и я занимался его настройкой.
Архитектура patterns (MVC, MVVM)
Поигравшись с разными CMS, пора продолжать прокачивать свои Hard Skills. Архитектурные паттерны MVC, MVVM помогут понять принципы построения сложных приложений. Как разделить логику, данные и представления данных.
ООП
Объектно ориентированное программирование – классика. Если упустите понимание принципов подражания, полиморфизма и инкапсуляции, создайте себе множество проблем при работе с TypeScript или более сложными программами на JS.
JS-фреймворки и библиотеки
React, Vue, Angular являются сейчас самыми популярными JS-фреймворками. В большинстве вакансий требуется их знание. Именно их используют большинство outsource и продуктовых компаний. Выберите один из них и копайте в этом направлении.
Стейт менеджер
В дополнение к фреймворкам – стейт менеджеры. Их сейчас много, но самые популярные – это Redux , MobX . Упростят (или наоборот) жизнь при работе над сложными проектами, где много данных, они часто обновляются, и все эти изменения нужно показывать пользователю.
Webpack
Самый популярный бандлер . Что он делает? Для упрощения работы мы используем разные библиотеки, языки программирования (например, TypeScript), множество ресурсов (изображения, шрифты). Чтобы все это оптимально собрать и создать оптимизированный билд проекта, мы и используем Webpack.
NodeJS
Лучшее в JavaScript — то, что этот язык можно использовать и на серверах. Серверная версия JS называется NodeJS – это программная платформа, которая компилирует JS в машинный код. Без нее Front-end разработчикам некуда. Хотите или нет, но какие-нибудь основы нужно знать.
Express
Самый популярный фреймворк для NodeJS. Упрощает жизнь во многих случаях. Даже если вам нужно просто создать простой вебсервер, он пригодится.
Package managers (npm, yarn)
Поскольку большинство библиотек упакованы в пакеты и хранятся в специальных репозиториях, знания npm или yarn будут обязательными. Там ничего сложного, просто нужно знать, как установить нужный пакет из npm.
Build tools
К этой категории я отнес дополнительные инструменты, без которых нам будет сложно сделать качественный продукт, например, линтеры или раннеры. Код должен быть чистым и, как минимум, в одном стиле. К счастью это можно автоматизировать с помощью EsLint или Prettier. Также нам нужно запускать наши приложения из консоли одной командой. Здесь на помощь приходят npm script, Grunt, Gulp или тот же Webpack.
RESTful
Реализация протоколов обмена данными между клиентом и сервером. Даже если вы не пишете Back-end сторону, понимать. какие методы могут делать запросы к серверу (GET, POST, DELETE…) и какие статусы могут возвращаться (200, 301, 404…), следует понимать. Каждый из них имеет свои ограничения, которые мы должны помнить.
MongoDB
Популярная документно-ориентированная база данных. При работе с NodeJS пригодится. К счастью, очень сильно разбираться с ней не нужно.
Имея базовые знания по Back-end (NodeJS, Express, MongoDB), мы можем уже создать полноценный сложный проект с помощью одного JavaScript. Опыт показывает, что такие знания любому высококвалифицированному Front-end разработчику особенно важны.
Performance (оптимизация)
Настало время улучшать качество наших проектов. При работе с SEO мы уже немного затронули тему производительности наших приложений. Пора копнуть поглубже. Оптимизация кода, скорость загрузки страниц, скорость отображения контента. Здесь пригодятся знания Webpack, Nginx. Профайлинг – совокупность методов и техник поиска самых медленных мест ваших приложений.
Логирование
Не важно, работает ли ваше приложение, или обрушилось по какой-то причине — все это должно быть записано в логах. Они пригодятся при поиске ошибок. Можно настроить уведомления, чтобы узнать о неполадках работы от специальных систем мониторинга, а не от ваших клиентов.
ElasticSearch
ElasticSearch может быть отличным выбором для хранения логов и последующей их визуализации. Можно посмотреть на весь ELK стек . Инструменты полезны и интересны.
Практики чистого кода
Прочтите Роберта Мартина и его книгу « Чистый код ». Эта книга ответит на большинство вопросов по написанию чистого кода. Вы из будущего и ваши коллеги будут невероятно благодарны вам.
Тестирование
Есть много видов тестирования, например e2e, unit testing, функциональное, мануальное. Важнейшим для программиста является unit-testing (модульное тестирование). Без него код нельзя назвать чистым. Написание тестов уменьшает количество ошибок, упрощает модификацию кода, создает дополнительную документацию вашего кода. Самыми популярными фреймворками для модульного тестирования JS являются Jest, Jasmine.
Безопасность
Кроме чистоты, ваш код должен обеспечивать требования безопасности. Взгляните на ТОП-10 правил OWASP . Ну и не забудьте настроить протокол HTTPS и проверить CORS.
Code review процесс
Поскольку работа программиста — это преимущественно командная работа, умение проводить code review необходимо. GitHub дает отличные возможности и инструментарий для проведения code review. Каковы цели и предназначение этого процесса? Что такое collective code ownership и как он достигается review?
Design and Development принципы
Есть несколько принципов написания кода, которые нужно освоить: KISS, SOLID, YAGNI, DRY. Эти принципы часто спрашивают на собеседованиях – покажите себя с лучшей стороны. Каждый из этих принципов также реализует практики чистого кода.
CI/CD
Continuous integration – регулярно меряем наш код в репозиторий, после чего автоматически прогоняются тесты, линтинг, билд и любые дополнительные шаги. Мы уверены, что наши изменения не сломали проект.
Continuous delivery (deployment) — максимально часто деплоим код в продакшине.
Самыми популярными инструментами являются Jenkins и CircleCI. Вам, как Front-end разработчику, не нужно уметь настраивать их с нуля, но уметь запустить джоб или просмотреть логи – просто необходимо.
Agile
Работа в команде требует знания некоторых техник и практик. Здесь на помощь приходят Scrum, Kanban и XP.
Cloud
Так случилось, что сейчас все переносят в облака. Ознакомьтесь с самыми популярными решениями: AWS, GCP или Azure.
Docker
Часть работы Front-end разработчик передали дизайнеру, а именно часть верстки. Инструменты Figma и ей подобные генерируют CSS компоненты. С одной стороны, стало легче, но с другой – на свободное место добавили другую технологию – Docker. Фронт мы пишем в связке с беком, и чтобы его приподнять, нужно запускать Docker.
TypeScript
Прекрасный язык, который расширяет возможности JS для разработчиков, например, добавив типизацию или интерфейсы. Активно сейчас используется как на back-end, так и на front-end.
GraphQL
Язык запросов, альтернатива REST. Позволяет получать только данные, необходимые для клиента. Такие реализации как Apollo добавляют множество дополнительных возможностей, например менеджмент стейта. Мы заменили Redux на Apollo, и все работает отлично. Как бонус всегда актуальна документация для ваших запросов.
Кайдзе́н — «непрерывное усовершенствование»
Программирование – путь с началом, но без конца. Чтобы оставаться квалифицированным специалистом, нужно каждый день учиться и понимать, что происходит в мире Front-end разработки. Каждый день выходят новые библиотеки или фреймворки и нужно успевать за обновлением информации. Упустив этот процесс хотя бы на год, можно быстро потерять квалификацию.
Итоги
В этом плане и списке технологий я полностью упустил такие вещи как английский язык и soft skills. Они не менее важны, но не являются темой этой статьи.
На первый взгляд, список технологий может показаться длинным, но ведь вы не думали, что программистам платят большие деньги просто так? Это сложная работа, требующая постоянного обучения. И как я уже писал в начале, эти темы и технологии изучаются годами постепенно.
Надеюсь, что этот материал дал вам ответы на ваши вопросы и сделал путь обучения программированию более понятным.