Как стать фронтенд-разработчиком в 2022 году?

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

Мы уже упоминали об одной важной причине, по которой стоит обратить внимание на фронтенд-разработку: растущий спрос на этих специалистов. Кроме того, фронтенд-разработчики могут:

• Зарабатывайте большие деньги
• Работайте с развивающимися передовыми технологиями для решения проблем и создания отличных веб-сайтов.

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

• Раскройте основные вопросы, которые могут возникнуть у вас об этой карьере
• Обеспечьте структуру, которая проведет вас через процесс, который может быть наполнен неопределенностью
• Делитесь дополнительными ресурсами, связанными с фронтенд-разработкой

Независимо от того, как вы представляете себе развитие своей карьеры, эта новая дорожная карта должна предложить что-то, что найдет отклик. Мы надеемся, что к моменту, когда вы закончите читать, у вас будет лучшее представление о том, как стать фронтенд-разработчиком.

Шаги, чтобы стать фронтенд-разработчиком

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

Шаг 1: Понимание фронтенд-разработки

Мы хотим, чтобы вы были уверены, что роль фронтенд-разработчика вам действительно подходит. С этой целью мы сейчас рассмотрим различия между фронтенд и бэкэнд разработкой.

Как разработчик интерфейса, вы будете специализироваться на создании пользовательских интерфейсов (UI), интерактивных функций и всего остального, что делают ваши веб-приложения на виду. Это называется разработкой на стороне клиента, поскольку касается того, что пользователи видят и делают на своих устройствах, известных как клиент. С другой стороны, бэкенд-разработчики специализируются на таких вещах, как динамическое отображение информации на этих устройствах, что предполагает передачу данных из баз данных на удаленные серверы. Так что эта работа известна как разработка на стороне сервера. Конечно, работающие веб-сайты требуют качественного кода и компетентных программистов по обе стороны этого подразделения, и некоторые люди становятся разработчиками полного стека, чтобы взять на себя ответственность за все, что связано.

Сравнение front end vs back end

	Внешний интерфейс	Задний конец
Сторона приложения	Сторона клиента (браузер)	Серверная часть (сервер)
Аспект веб-сайта/веб-приложения	визуальный	Функциональность
Главные проблемы	Доступность, пользовательский интерфейс, изображения, контент, функциональность в разных браузерах	Масштабируемость, безопасность, управление базой данных, аутентификация пользователей, бизнес-логика
Примеры языков	Интернет и разметка (например, HTML, CSS, JavaScript)	Программирование и сценарии (например, PHP, Python, Ruby, Java)
Примеры фреймворков и инструментов	Фреймворки: React, Angular Инструменты дизайна: Figma, Photoshop	Фреймворки: Django, Flask, Vue.js, jQuery Базы данных: SQL, MongoDB

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

Шаг 2: Составьте план

Становление фронтенд-разработчиком начинается с составления плана, и одно из самых важных решений, с которым вам придется столкнуться, — это то, как вы приобретете навыки и знания, необходимые для достижения успеха в этой области.

В отличие от многих должностей back-end и full-stack разработчиков, front-end разработчикам не обязательно иметь степень в области компьютерных наук или смежных областях. Большая часть работы, которую вы будете выполнять, зависит от навыков, которые вы можете освоить и попрактиковать в учебных курсах по программированию, на курсах для получения сертификата в колледже или самостоятельно. Если у вас уже есть степень в области, отличной от CS, или у вас есть другие причины не получать степень, альтернативный вариант может иметь наибольший смысл. Тем не менее, получение степени CS, безусловно, обеспечит хорошее образование и надежную подготовку к будущей карьере.

Общий совет : если у вас нет степени в области компьютерных наук, вы можете искать менее высокие должности, когда впервые приходите в отрасль. У них могут быть такие должности, как младший или младший разработчик.

Хронология : не торопитесь с этим шагом. Мы не можем указать, сколько времени вы должны потратить на это, но учтите, что все, что вы решите сейчас, определит курс и продолжительность вашего путешествия.

Шаг 3: Получите образование

Как упоминалось ранее, ваш выбор образования в основном сводится к получению степени CS или поиску альтернативного варианта.

Оценка времени : планируйте потратить от 12 недель до шести лет на получение образования, которое не включает процесс подачи заявления.

Шаг 4. Получите реальный опыт

Понятно, хотя и прискорбно, что работодатели не решаются нанимать разработчиков без большого послужного списка. Если вы ищете свою первую роль разработчика, вам может не хватать такого опыта. Что вы можете сделать, чтобы зарекомендовать себя на пути к своей первой работе? Для начала вы можете:

• Пройдите стажировку (и отнеситесь к этому серьезно!)
• Ищите хакатоны, чтобы соревноваться с друзьями или в одиночку
• Выполняйте свои собственные проекты кодирования и участвуйте в работе с открытым исходным кодом.

Воспользуйтесь преимуществами любых ресурсов, предоставляемых вашей программой, если вы учитесь в университете или в учебном лагере. В противном случае проявите инициативу, чтобы найти эти возможности, изучая:

• Как создать свой бренд
• Как отполировать свое резюме
• Как планировать проекты кодирования
• Как сделать вклад в открытый исходный код

Работая над этим шагом, начните создавать портфолио своего кода и готовых проектов. Вы можете показать их позже во время поиска работы.

Оценка времени : вы можете попробовать жонглировать этими видами деятельности во время получения образования или запланировать потратить на них несколько месяцев после этого.

Шаг 5. Получите сертификат (необязательно)

Получение профессиональной сертификации редко бывает пустой тратой времени. Тем не менее, некоторые поставщики сертификации хотят видеть опыт работы потенциальных кандидатов. Таким образом, вам, возможно, придется подождать, пока вы не поработаете какое-то время, чтобы сделать это.

Хотя существует не так много сертификатов, предназначенных для разработчиков интерфейса, по сравнению с другими специализациями, вы всегда можете получить общие учетные данные по разработке программного обеспечения. Некоторые из них включают:

• Сертифицированный GIAC защитник веб-приложений (GWEB)
• CIW Специалист по веб-разработке
• Сертифицированный специалист по безопасному жизненному циклу программного обеспечения

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

Шаг 6: Подготовьтесь к поиску работы

Не откликайтесь на списки вакансий импульсивно только потому, что их легко найти в Интернете. Если вы сначала потратите некоторое время на организацию, вы проведете более продуктивный поиск.

• Создайте портфолио проектов. Помните те личные проекты и проекты с открытым исходным кодом, которые мы предлагали? Пришло время подготовить свои достижения, чтобы поделиться ими. Хранение вашего кода в репозиториях GitHub по мере его написания упростит этот процесс, и доступны бесплатные учетные записи GitHub. (Использование этой платформы также даст вам возможность попрактиковаться в управлении версиями!)
• Подготовьтесь к собеседованию : вы можете найти и изучить ресурсы по популярным проблемам кодирования, подготовке к техническим собеседованиям, а также поведенческим вопросам и вопросам, связанным с программными навыками.
• Сеть. Установление связей с профессионалами и компаниями может помочь вам понять, как подать заявку на работу, пройти собеседование, принять на работу и продвинуться по карьерной лестнице.

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

Шаг 7: Поиск вакансий разработчика интерфейса

Начало поиска работы — важный шаг. Подумайте, как далеко вы продвинулись, чтобы достичь этой точки.

Интернет ваш друг здесь. Действительно, Glassdoor, Dice и Zip Recruiter — авторитетные сайты, на которых можно искать работу. Следить за статусом отправленных вами заявок будет проще, если вы будете отслеживать их в документе.

Оценка времени : поскольку во многих технологических компаниях действует мораторий на прием на работу, ваши поиски могут длиться несколько месяцев. Когда вы получите ответ от рекрутера, подготовьтесь к собеседованию, которое может длиться несколько раундов и до шести недель. Если вы не услышите ответа сразу или вам сразу откажут, постарайтесь сохранять некоторую перспективу. Многие успешные поиски работы начинаются с отказа. Неоднократное присутствие на собеседованиях обеспечит ценную практику в тот день, когда вы получите предложение о работе.

Сколько времени нужно, чтобы стать фронтенд-разработчиком?

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

• Существующие навыки и знания
• Предыдущее место работы и другой практический опыт
• Образование
• Целевой уровень старшинства
• Здоровье рынка труда

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

Мы отметили, что то, как вы получите техническое образование, сильно повлияет на ваш график. Мы также указывали, что работодатели могут меньше заботиться о степенях CS при найме кандидатов на фронтенд, чем на разработчиков бэкенда или full-stack разработчиков. Вы можете воспользоваться этим и посетить буткемп по кодированию или научиться самостоятельно, чтобы сократить свой график. Тем не менее, мы не хотим отговаривать вас от получения степени CS, если это соответствует вашим интересам, бюджету, графику и обязательствам!

Имейте в виду еще одну вещь при рассмотрении этого вопроса о времени: вам нужно будет учитывать подготовку к поиску работы, сам поиск и убедиться, что вы проверили требования, чтобы стать фронтенд-разработчиком. Мы обсудим эти требования далее.

Требования, чтобы стать фронтенд-разработчиком

Чтобы стать фронтенд-разработчиком, вам потребуется соответствующее образование и обучение, практический опыт и навыки работы с интерфейсом. Ваши конкретные карьерные устремления и ваш опыт будут диктовать, что вам нужно сделать, чтобы удовлетворить эти требования.

Образование

Возможно, вы уже знакомы с вариантами получения образования. Помните: инвестируете ли вы в степень CS или выбираете другой путь, менее важно, чем накопление и демонстрация мастерства знаний, которые вам понадобятся на работе.

Практический опыт

Отсутствие предыдущего опыта в веб-разработке может замедлить вас, но, как мы уже отмечали, есть способы добавить опыт в ваше резюме помимо традиционной работы:

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

Технические навыки

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

Вы должны попытаться ознакомиться со следующими технологиями и навыками, перечисленными в приблизительной последовательности, по мере продвижения в вашем путешествии по интерфейсу. Не перегружайтесь! Этот список длинный, но вам не нужно изучать все, что он содержит, прежде чем найти свою первую работу. Кроме того, многие из этих навыков и технологий включают несколько примеров в скобках, и вам не нужно осваивать их все. Например, если вы сосредоточились на платформе React из-за технического стека вашего работодателя, вам не следует отдавать приоритет изучению серверных инструментов рендеринга для Vue.js или Angular (Nuxt.js и Universal соответственно).

• Логическое объяснение
• Как работает Интернет (например, клиенты, серверы, сети, веб-страницы)
• HTML, базовый CSS и основы веб-разработки
• JavaScript
• Графический дизайн (например, Figma, Photoshop)
• Системы контроля версий (Git + службы репозитория, такие как GitHub)
• Стандарты веб-безопасности
• RESTful API и сервисы
• Менеджеры пакетов (например, npm, yarn)
• Концепции тестирования и отладки (например, модульное тестирование, функциональное тестирование, тестирование удобства использования, тестирование производительности, регрессионное тестирование)
• Инструменты тестирования (например, Jest, библиотека реактивного тестирования, Cypress, Enzyme)
• Фронтенд -фреймворки и библиотеки (например, React, Angular, Vue.js, jQuery, Svelte, Ember)
• CSS-архитектура (например, БЭМ)
• Препроцессоры CSS (например, SASS, PostCSS)
• Исполнители задач (например, сценарии npm)
• Сборщики модулей (например, Webpack, esbuild, Rollup, Parcel, Vite)
• Современный CSS (например, компоненты Styled, модули CSS, Styled JSX, Emotion)
• Веб-компоненты (например, HTML-шаблоны, пользовательские элементы, Shadow DOM)
• CSS-фреймворки (например, Tailwind CSS, Chakra UI, Material UI, Radix UI, Bootstrap, Bulma)
• Прогрессивные веб-приложения (например, хранилище, веб-сокеты, сервис-воркеры, шаблон PRPL, модель RAIL, показатели производительности, использование Lighthouse, использование DevTools и т. д.)
• Средства проверки типов (например, Typescript)
• Рендеринг на стороне сервера (SSR) (например, React + Next.js, Angular + Universal, Vue.js + Nuxt.js)
• GraphQL (например, Apollo, Relay Modern)
• Генераторы статических сайтов (например, Gatsby, Next.js, Nuxt.js, Vuepress, Jekyll, Hugo, Gridsome, Eleventy)
• Мобильные приложения (например, React Native, NativeScript, Flutter, Ionic )
• Настольные приложения (например, Electron, Tauri)
• Веб-сборка

Качества и мягкие навыки

Одни только технические навыки не обеспечат вам успеха. Чтобы по-настоящему проявить себя на рабочем месте, вам также нужно улучшить свои социальные навыки. Один из способов сделать это — развивать следующие шесть качеств выдающихся разработчиков :

• Желание строить и создавать
• Командное мышление
• Навыки творческого решения проблем
• Сочувствие
• Определение
• Любовь к обучению

Работодатели будут оценивать ваше развитие этих качеств по тому, как вы общаетесь на собеседованиях. Но даже после предложения о работе стоит обратить внимание на эти навыки. Их дальнейшее развитие может помочь только в том случае, если вы хотите продвинуться по карьерной лестнице.

Сколько зарабатывает фронтенд-разработчик?

Фронтенд-разработчики имеют одну из самых высокооплачиваемых профессий в сфере технологий. По данным Бюро статистики труда, в 2020 году средняя заработная плата всех веб-разработчиков составляла 77 200 долларов в год (37,12 доллара в час).

Но эти правительственные данные двухлетней давности могут не рассказать всей истории о компенсации разработчикам интерфейсов. Веб-сайт Glassdoor, который предоставляет информацию о вакансиях и зарплатах, оценивает общую заработную плату веб-разработчиков в Соединенных Штатах в 110 356 долларов в год, включая среднюю зарплату в 72 495 долларов. Денежные бонусы, комиссионные и участие в прибыли могут составлять оставшуюся часть общей суммы вознаграждения.

Помимо компенсации, что, безусловно, важно, спрос на разработчиков интерфейсов высок, и ожидается, что он будет продолжать расти. BLS прогнозирует, что с 2020 по 2030 год количество рабочих мест веб-разработчиков в Соединенных Штатах должно увеличиться на 13 процентов, быстрее, чем в среднем по всем профессиям. Вы также можете поискать вакансию разработчика внешнего интерфейса в Интернете, чтобы получить представление о том, сколько вакансий существует (например, попробуйте Indeed, Glassdoor, Dice и Zip Recruiter). Ваши запросы не будут такими полными или перспективными, как правительственные прогнозы, но в процессе вы сможете бегло ознакомиться с реальными должностными инструкциями.

И последнее замечание о заработной плате: Glassdoor может предоставить вам оценки заработной платы в конкретных компаниях, используя анонимные данные нынешних и бывших сотрудников.

Заключение

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

Когда у вас есть план, вы можете сразу начать развивать свои технические навыки с помощью образовательных курсов и путей обучения. Завершение интерактивных уроков со встроенными средами кодирования, которые обеспечивают практический опыт во время обучения, будет продуктивным, независимо от того, идете ли вы на получение степени CS, посещаете буткемп или учитесь самостоятельно.