23 июля 2021

🕸 16 шагов к профессии: дорожная карта фронтенд-разработчика в 2021 году

Автор статей и контент менеджер со стажем на фрилансе более 7 лет. Есть профильное ИТ образование, в 2014 окончила ДонГТУ по направлению "Специализированные компьютерные системы". Потому пишу технические тексты с кайфом, толком, расстановкой. В настоящее время тружусь контент менеджером в компании представителя брендов Promate и Vertux в Украине.
Считается, будто порог входа во фронтенд-разработку невысок. Этот стереотип испортил репутацию профессии, приведя в нее немало готовых работать за еду новичков. Рассказываем, как не пополнить их ряды.
🕸 16 шагов к профессии: дорожная карта фронтенд-разработчика в 2021 году

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

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

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

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

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

🕸 16 шагов к профессии: дорожная карта фронтенд-разработчика в 2021 году

Веб-разработчикам никуда не деться от изучения трех «китов»: разметки (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

🕸 16 шагов к профессии: дорожная карта фронтенд-разработчика в 2021 году

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

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

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

Дополнительные материалы

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

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

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

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

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

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

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

🕸 16 шагов к профессии: дорожная карта фронтенд-разработчика в 2021 году

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

🕸 16 шагов к профессии: дорожная карта фронтенд-разработчика в 2021 году

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

🕸 16 шагов к профессии: дорожная карта фронтенд-разработчика в 2021 году

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

🕸 16 шагов к профессии: дорожная карта фронтенд-разработчика в 2021 году

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

🕸 16 шагов к профессии: дорожная карта фронтенд-разработчика в 2021 году

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

🕸 16 шагов к профессии: дорожная карта фронтенд-разработчика в 2021 году

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

🕸 16 шагов к профессии: дорожная карта фронтенд-разработчика в 2021 году

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

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

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

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

🕸 16 шагов к профессии: дорожная карта фронтенд-разработчика в 2021 году

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

Команды Git, которые стоит изучить
git config, git init, git commit, git clone, git status, git add, git pull, git push, git branch.

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

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

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

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

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

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

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

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.
  • Дополнительно: подготовка к техническому собеседованию, базы данных, как заняться фрилансом и искать работу.
  • Практика: создание посадочных страниц, верстка страниц и сайтов, учитывая валидность, кросплатформенность и адаптивную верстку, создание приложения для учета расходов.

Источники

МЕРОПРИЯТИЯ

Комментарии

ВАКАНСИИ

Добавить вакансию

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ