Кто такой frontend-разработчик и чем он занимается?

Frontend-разработчики создают интерфейс приложений и сайтов — то есть то, что видят конечные пользователи. 

Например, вы, читая эту статью. Предложение начинается в одном месте экрана, заканчивается в другом и не вылазит за пределы вашего монитора. Хотя могло бы… 

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

Сразу обозначим разницу между верстальщиком и фронтенд-разработчиком. 

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

Чтобы страница оживилась, нужно использовать языки программирования. Например, JavaScript. 

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

Правда сразу стоит отметить, что знания верстки считаются базовыми и для разработчика. 

Есть ли место творчеству? 

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

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

 

Что должен знать и уметь Frontend-разработчик в 2023 году

Требования в 2023 стали более жесткими из-за роста конкуренции. 

Хорошо это или плохо? 

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

Вот пример актуальных требований на позиции джуниор-специалиста/стажера:  

• хорошие знания JavaScript/TypeScript и опыт разработки PWA на React.js или Angular/Vue,
• знание HTML5, CSS3, SQL,
• понимания Web технологий,
• опыт работы с Git, Jira, Confluence,
• желание находить новые решения, осваивать новые технологии,
• аналитические способности, коммуникабельность, ответственность.

Разберем подробнее, чего хотят от джунов.

Знание HTML и CSS. Как мы уже говорили выше, это базовые знания для разработчика. HTML — это язык разметки, который структурирует контент на странице (картинки, текст, кнопки, анимация). CSS — это каскадные таблицы стилей, придающие внешний вид всему HTML-документу (шрифты, цвета, размеры отступов). 

SQL — это язык структурированных запросов, который предназначен для работы с базой данных. Такое требование есть не во всех вакансиях, однако на уровне простых операторов разработчики могут сталкиваться с ним в работе. Освоить его на базовом уровне не составит труда и займет всего несколько дней. 

Что такое JavaScript? 

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

На JavaScript вы можете написать веб-сайты и приложения, расширения для браузера, мобильные приложения. 

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

Библиотека представляет собой готовый набор функций и объектов, которые помогают выполнить те или иные задачи — например, создать алгоритм сортировки. React — самая популярная библиотека с открытым исходным кодом для разработки пользовательских интерфейсов.

Framework переводится как «каркас, структура» и является более масштабным инструментом, так как имеет особые требования к архитектуре проекта. Для фронтенд-разработки существует несколько фреймворков, но изучая вакансии вы чаще всего будете видеть Vue.js или Angular. 

Git, Jira, Confluence

Инструменты, предназначенные для совместной работы. 

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

Jira используются для управления проектом, а Confluence для создания единой базы знаний. Все это можно быстро усвоить на практике, поэтому волноваться из-за дополнительного пункта в вакансии не стоит. 

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

Английский язык также будет большим преимуществом. Поэтому не оттягиваете его изучение на потом — это еще один бесконечный (но не менее увлекательный!) процесс.

 

Вопрос ментору Алексею Гуло Front End developer в SKDO Systems, опыт работы 4+ года

  — Какая часть на курсах, по-твоему, сложнее всего дается ребятам? 

— Если рассматривать по модулям, то в каждом можно выделить такие разделы. 

Например, в первом модуле (верстка) сложнее всего ребятам научиться правильно применять БЭМ. Они часто не углубляются в этот вопрос, допускают грубые ошибки. В остальном все более менее.

Во втором модуле (JS) таких проблемных разделов больше: отличие объектов от примитивов, контекст this, работа с асинхронным кодом, серверные запросы, классы. Обычно эти темы вызывают больше всего вопросов. Еще я рекомендую постоянно повторять базу в JS, она часто забывается, что усложняет движение по программе.

 

Востребованность frontend-разработчиков на рынке и карьерный рост 

Где такие специалисты нужны? 

Фактически, везде. Любой современный бизнес есть в интернете, а попадает он туда благодаря IT-специалистам. 

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

Карьерный рост 

Что касается карьерного роста и заработной платы, то для junior-специалистов ситуация сейчас не очень стабильна. Для кого-то и бесплатная стажировка — уже удача. 

Однако многое зависит от ваших навыков и усердия при поиске работы. Именно поэтому в TeachMeSkills действует карьерный центр, который помогает выпускникам с созданием резюме и подготовкой к собеседованиям. В среднем, на старте вы можете получать $500-700. А если у вас хороший английский (например, B2), то и больше. 

После получения первого оффера у вас займет 1-2 года на то, чтобы вырасти до нового уровня — middle. Здесь ваша зарплата будет от $1000 — и по-хорошему ее будут повышать один раз в полгода/год (в соответствии с планом вашего развития как специалиста). 

Далее идет senior с зарплатой от $2400, и еще через несколько лет team lead — от $3000. Главное помнить, что все эти разделения условны и расцениваются в разных компаниях по-разному. 

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

 

Как стать Frontend-разработчиком в 2023 году

Первое, что вы должны принять, выбирая любимое IT-направление, — придется много времени посвящать самостоятельному обучению. Не только в начале своего пути, а всегда. 

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

 

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

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

После мы помогаем нашим выпускникам с поиском работы как на рынке СНГ, так и в ЕС.

— Сколько в среднем нужно времени, чтобы освоить базу, необходимую для первой работы/стажировки? 

— Гораздо эффективнее будет проходить обучение, если каждый день уделять по 2 часа, чем 2 раза в неделю по 8. В таком режиме можно за полгода получить необходимые знания для своей первой работы.