Считается, будто порог входа во фронтенд-разработку невысок. Этот стереотип испортил репутацию профессии, приведя в нее немало готовых работать за еду новичков. Рассказываем, как не пополнить их ряды. Обсудить

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

Обязанности фронтенд-разработчика

Список задач, которые решает Front-end developer, меняется в зависимости от специфики проекта и уровня подготовки разработчика. В него могут входить следующие позиции:

• кросс-платформенная и адаптивная верстка сайтов;
• работа со стеком Redux/React;
• сопровождение и доработка проектов;
• написание скриптов и создание реактивных компонентов;
• поддержка проектов ES5;
• развитие и поддержка архитектуры, основанной на виджетах и компонентах;
• выполнение рефакторинга проектов;
• разработка новых npm-модулей в существующих приложениях;
• автоматизация тестирования и устранение багов, иногда с фрейморком JUnit;
• разработка сайтов на Angular;
• сопровождение и разработка сервисов, направленных на распознавание лиц и обработку видео;
• разработка компонетов на Vue.

Развитие профессии привело к увеличению требований к начинающим фронтенд-разработчикам. На 2021 год Roadmap состоит из многих пунктов, разобраться с которыми поможет подборка на GitHub. Мы попробуем свести данные из разных источников воедино и на их основе составим свой план.

1. Изучите HTML, JavaScript и CSS

Веб-разработчикам никуда не деться от изучения трех «китов»: разметки (HTML), каскадной таблицы стилей (CSS) и языка программирования JavaScript. С этим помогут материалы на CodeAcademy и YouTube: HTML Full Course, CSS Tutorial и CSS Crash Course for Absolute Beginners, Object-oriented Programming in JavaScript.

Дополнительные материалы • ТОП-5 популярных технологий для создания сайтов: просто и понятно для новичков • Кто такой Web Developer: гайд по профессии • Что ждет профессию веб-разработчика в 2021 году: мнения экспертов • Как стать веб-разработчиком в 2021 году •

2. Изучите несколько фреймворков

Для работы потребуется использовать один/несколько фреймворков: ReactJS, AngularJS, VueJS, Bootstrap. Разобраться с React JS поможет ролик freeCodeCamp на YouTube, там же можно найти курс по VeuJS.

Дополнительные материалы • Vue vs React vs Angular: какой фронтенд-фреймворк выбрать? • Альтернативные фреймворки JavaScript: есть ли жизнь за пределами большой тройки? • 7 советов изучающему Vue.js новичку • Как изучить React в 2021 году: 7 навыков, которыми вам нужно овладеть • 8 мощных библиотек React, которые стоит попробовать в 2021 году • 12 бесплатных ресурсов для изучения React •

3. Освойте работу с генераторами статических сайтов

Примеры статических сайтов: визитки, лендинги, справочники, каталоги продукции. Упростить их создание помогут: Next (React-based), Nuxt (Vue-based), Gatsby (React-based), Gridsome (Vue-based).

4. Научитесь работать с JAMstack

Расшифровка акронима JAM: JavaScript, API and Markup. Архитектура JAMStack основана на клиентском JavaScript, повторно используемых API и предварительно созданной разметке. Что такое JAMStack и как с ним работать можно почитать здесь и на snipcard. Дополнительно в стеке используют CDN и Git.

5. Освойте Progressive web apps (PWA)

Знания PWA (англ. progressive web app или мобильное приложение в браузере) потребуются опытным разработчикам. Прогрессивные приложения направлены на надежность и быстроту работы с технологиями Push Notifications, Service Worker, Web App manifest, App shell, HTTPS.

Дополнительные материалы • 3 простых шага, чтобы сделать Progressive Web App из вашего сайта •

6. Освойте GraphQL

Этот язык запросов и манипулирования данными для API (а также среда выполнения запросов) является основным для каждого фронтендера, который не хочет работать за еду. Обрабатывающий запросы сервер GraphQL находится между клиентом и источниками данных.

На платформе Apollo реализация GraphQL направлена на транспортировку данных из облачного хранилища к пользовательскому приложению, а поклонники фреймворка Relay Modern использует GraphQL с приложениями data-driven.

Ресурсы для изучения GraphQL:

• The Fullstack Tutorial for GraphQL.
• Getting Started with GraphQL Content API.
• GraphQL: A data query language.

Дополнительные материалы • Полный фуллстек: пишем сайт на Django, Vue и GraphQL •

7. Научитесь выполнять тестирование и чистить код

Веб-программисту на коммерческом или корпоративном проекте стоит уметь выполнять:

• Unit tests – проверку отдельных компонентов или функций.
• Integration tests – тестирование корректности взаимодействия компонентов.
• End-to-end test – тестирование пользовательских потоков в браузере.
• Другие виды тестирование, которые нужны для старших разработчиков: manual testing, snapshot testing и т.д.

Front-end developer должен писать чистый код: читаемый, без дубликатов, с минимальным использованием методов, классов и функций.

Основы чистого кода:

• Осмысленные и логичные имена переменных, методов, функций и классов.
• Функции стоит делать небольшими, с минимальным набором аргументов.
• Понятный код, который не требует комментариев (в случае сложной реализации стоит прописать, что и как было сделано).

8. Запаситесь книгами по основам фронтенда

Дэвид Флэнаган, «JavaScript. Подробное руководство».

Кайл Симпсон: cерия книг «Вы не знаете Javascript».

Натан Розенталс, «Изучаем TypeScript 3».

Доминик Майерс, «Front-End Developer».

Карлос Сантана Рольдан, «React Cookbook: Create Dynamic Web Apps with React».

Крис Акино и Тодд Ганди, «Front-End Web Development: The Big Nerd Ranch Guide».

Джон Дакетт, «HTML & CSS: Design and Build Web Sites».

Дополнительные материалы • Настольные книги по фреймворкам JavaScript на русском языке • ТОП-15 книг по JavaScript: от новичка до профессионала • 16 бесплатных книг по JavaScript • Самоучитель для начинающих: как освоить TypeScript с нуля за 30 минут? •

9. Просмотрите туториалы на YouTube

• Введение во Frontend.
• Web Development Full Course.
• Learn HTML5 and CSS3 From Scratch.

Дополнительные материалы • Блоги и комьюнити по веб-разработке в России и за рубежом: 43 ресурса, актуальные в 2021 году • Обучение веб-разработке: сайты, блоги и комьюнити •

10. Изучите работу с командной строкой

Если вы используете Windows, не стоит полагаться только на графический интерфейс. Чтобы упростить работу с файлами и каталогами (найти, открыть, закрыть, удалить и пр.), а также использовать неочевидные возможности ОС, потребуется знание базовых команд. Кроме старого доброго CMD рекомендуется освоить более прогрессивный PowerShell, а использующим один из дистрибутивов GNU/Linux разработчикам стоит изучить bash.

11. Изучите систему контроля версий Git и хостинг GitHub

Онлайн-хостинг для контроля версий GitHub позволяет людям по всему миру совместно работать над проектами. К тому же в репозиториях можно найти много бесплатных решений для собственных разработок.

Команды Git, которые стоит изучить git config, git init, git commit, git clone, git status, git add, git pull, git push, git branch. Дополнительные материалы • Основы Git: контроль версий для самых маленьких • Git за полчаса: руководство для начинающих • Про Git, Github и Gitflow простыми словами • Шпаргалка по Git, в которой представлены основные команды • 7 проектов на GitHub, которые необходимы каждому JavaScript-разработчику • Обучение веб-разработке: 20 репозиториев GitHub, о которых должен знать каждый •

12. Следите за событиями кибербезопасности

Открытый проект OWASP собирает статистику, необходимую для обеспечения безопасности веб-приложения. Для изучения основ необходимо понимать отличия HTTPS и HTTP, какова политика защиты контента (CSP) и принципы работы с CORS.

13. Практикуйтесь как можно больше

В процессе изучения теории важно сразу применять знания на практике. Писать фрагменты кода, собирать их в единый проект (можно в выдуманный) – это поможет при трудоустройстве после обучения. Если вы создадите что-то полезное и выложите это на GitHub, всегда можно показать свои наработки потенциальному работодателю. Даже если сразу не получится пойти на позицию джуниора, не пренебрегайте бесплатной стажировкой. Начинающих специалистов на рынке труда более чем достаточно, так что стоит пользоваться любым шансом.

Дополнительные материалы • История одного разработчика: талантливый джун или как научиться программировать без наставника • Собираем портфолио начинающему веб-разработчику • Составляем идеальное портфолио программиста • Сколько получает веб-разработчик после обучения •

14. Постоянно повышайте уровень знаний

Оставаться востребованным фронтенд-разработчиком можно только если вы все время учитесь. В этом вам помогут freeCodeCamp, Codecademy.

Перечень недостающих знаний можно проверить по чек-листам:

• The Front-End Checklist.
• Front-End-Checklist на GitHub.

15. Нарабатывайте софт-скилы

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

• навыки коммуникации помогут наладить общение с коллегами, заказчиками и деловыми партнерами;
• работа в команде – фронтендер плотно сотрудничает с разработчиками серверной части, дизайнерами и менеджерами проекта, а значит без навыков коллективной работы он не сможет обойтись;
• навыки сочувствия и эмпатии: общая атмосфера в коллективе важна для успеха компании;
• готовность помогать коллегам и готовность самому просить о помощи;
• навыки самостоятельного решения проблем;
• навыки ведения отчетности;
• тайм-менеджмент и самодисциплина особенно помогут при удаленной работе (фрилансе).

17. Пройдите курсы

Если вы знаете английский, можно пройти курс w3wschhools по HTML, CSS и JavaScript, или по программе Мичиганского университета заняться на coursera веб-дизайном и программированием. Популярная международная платформа предлагает множество аналогичных позиций, включая курс Duke university по основам JavaScript, HTML и CSS.

***

Если вас больше привлекает обучение на русском языке, обратите внимание на факультет frontend-разработки GeekBrains. В программе российской образовательной онлайн-платформы есть все необходимое:

• Изучение основ программирования.
• Базовый курс Git.
• Верстка (HTML/CSS), в том числе библиотека Bootstrap и препроцессоры SASS/LESS.
• Принципы ООП, JavaScript, работа с Veu.js, API Webpack, Parcel, с различным окружением, подключение библиотек.
• Работа с ReactJS и база backend-разработки с применением ECMAScript 6, Flux, Node.js, REST API.
• Разработка проекта с нуля до релиза. Разъяснение методологий Kanban, Scrum, Agile, принципов Countinuous Delivery и Continuous Integration.
• Дополнительно: подготовка к техническому собеседованию, базы данных, как заняться фрилансом и искать работу.
• Практика: создание посадочных страниц, верстка страниц и сайтов, учитывая валидность, кросплатформенность и адаптивную верстку, создание приложения для учета расходов.

Интересно, хочу попробовать