Чтобы стать классным специалистом и начать хорошо зарабатывать, вам придется постараться и потратить немало времени. Создавать визуальную часть сайта ничуть не проще чем серверную, а знать для этого нужно очень много. Предлагаем вашему вниманию актуальную в 2021 году дорожную карту фронтендера. Следуйте этому плану, и вы сможете освоить популярную профессию, не пополнив ряды программистов за еду.
Обязанности фронтенд-разработчика
Список задач, которые решает Front-end developer, меняется в зависимости от специфики проекта и уровня подготовки разработчика. В него могут входить следующие позиции:
- кросс-платформенная и адаптивная верстка сайтов;
- работа со стеком Redux/React;
- сопровождение и доработка проектов;
- написание скриптов и создание реактивных компонентов;
- поддержка проектов ES5;
- развитие и поддержка архитектуры, основанной на виджетах и компонентах;
- выполнение рефакторинга проектов;
- разработка новых npm-модулей в существующих приложениях;
- автоматизация тестирования и устранение багов, иногда с фрейморком JUnit;
- разработка сайтов на Angular;
- сопровождение и разработка сервисов, направленных на распознавание лиц и обработку видео;
- разработка компонетов на Vue.
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.
2. Изучите несколько фреймворков
Для работы потребуется использовать один/несколько фреймворков: ReactJS, AngularJS, VueJS, Bootstrap. Разобраться с React JS поможет ролик freeCodeCamp на YouTube, там же можно найти курс по VeuJS.
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.
6. Освойте GraphQL
Этот язык запросов и манипулирования данными для API (а также среда выполнения запросов) является основным для каждого фронтендера, который не хочет работать за еду. Обрабатывающий запросы сервер GraphQL находится между клиентом и источниками данных.
Ресурсы для изучения GraphQL:
- The Fullstack Tutorial for GraphQL.
- Getting Started with GraphQL Content API.
- GraphQL: A data query language.
7. Научитесь выполнять тестирование и чистить код
Веб-программисту на коммерческом или корпоративном проекте стоит уметь выполнять:
- Unit tests – проверку отдельных компонентов или функций.
- Integration tests – тестирование корректности взаимодействия компонентов.
- End-to-end test – тестирование пользовательских потоков в браузере.
- Другие виды тестирование, которые нужны для старших разработчиков: manual testing, snapshot testing и т.д.
Основы чистого кода:
- Осмысленные и логичные имена переменных, методов, функций и классов.
- Функции стоит делать небольшими, с минимальным набором аргументов.
- Понятный код, который не требует комментариев (в случае сложной реализации стоит прописать, что и как было сделано).
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».
9. Просмотрите туториалы на YouTube
10. Изучите работу с командной строкой
Если вы используете Windows, не стоит полагаться только на графический интерфейс. Чтобы упростить работу с файлами и каталогами (найти, открыть, закрыть, удалить и пр.), а также использовать неочевидные возможности ОС, потребуется знание базовых команд. Кроме старого доброго CMD рекомендуется освоить более прогрессивный PowerShell, а использующим один из дистрибутивов GNU/Linux разработчикам стоит изучить bash.
11. Изучите систему контроля версий Git и хостинг GitHub
Онлайн-хостинг для контроля версий 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.
Мне нужно оперативно погрузиться во фронтенд. Какой вариант самый быстрый и качественный?
Если 15 лет назад для того, чтобы называть себя фронтенд-разработчиком достаточно было знать HTML, CSS и JavaScript, то сейчас фронтенд-разработка почти не отстает от бэкенд-разработки по количеству фреймворков и сложности стеков. Самый быстрый и качественный вариант — получить знания из первых рук от преподавателей со стажем. Поэтому мы запустили курс «Frontend Basic: принцип работы современного веба», на котором вы:
- освоите стек технологий, который позволит начать работать в любой компании на любом проекте;
- сверстаете свой первый адаптивный макет с учетом семантики и множества декоративных элементов на HTML и CSS;
- поймете, как с помощью JavaScript разрабатывать пользовательские интерфейсы;
- разберетесь, как JavaScript используется в работе с backend и создадите свой первый обмен данными сервером;
- углубитесь в более сложную разработку на React.js и напишете свой интернет-магазин;
- изучите основные команды для работы с GIT, важнейшего инструмента для работы в любой команде.
Комментарии