frontend developer что это такое

Выбираем профессию frontend- и backend-разработчика: принципы и отличия

Статья о том, что такое frontend- и backend-разработка, чем отличаются и как взаимодействуют между собой. Разбираемся и выбираем себе направление.

Традиционно эти две сферы разработки разделяют на сцену и закулисье. Во frontend вы работаете на глаза пользователя, в backend же — на его опыт и ощущения. В Skillbox мы учим и frontend, и backend. Остается только выбрать направление своей будущей профессии. А теперь подробнее.

Что такое
frontend-разработка?

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

Пишет про дизайн и маркетинг в Skillbox. С 2011 по 2017 год писала про бизнес в деловые СМИ, соучредитель агентства копирайтинга «Абзац».

Frontend-разработчик сотрудничает с дизайнерами, программистами
и UX-аналитиками, чтобы создавать удобный и востребованный продукт.

Чтобы наглядно понять frontend-разработку, откройте страницу любого сайта — перед собой вы увидите интерфейс. Щёлкнув правой кнопкой мыши, откроете код страницы в браузере.

Это и есть пример работы frontend-разработчика, он скачивается в браузер пользователя, и его можно увидеть своими глазами. Код страницы описывает цвета, вёрстку, шрифты, расположение графических элементов и так далее.

Компоненты frontend-разработки

Что такое
backend-разработка?

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

Например, когда вы вводите запрос на странице поисковика и жмёте клавишу Enter, frontend заканчивается и начинается backend. Ваш запрос отправляется на сервер Google или «Яндекса», где расположены алгоритмы поиска. Именно там случается всё «волшебство». Как только на мониторе появилась информация, которую вы искали, — вновь происходит возвращение в зону frontend.

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

Backend — это процесс объединения сервера с пользователем.

Компоненты backend-разработки

Backend-разработчик применяет те инструменты, что доступны на его сервере. Он вправе выбрать любой из универсальных языков программирования, например, Ruby, PHP, Python, Java. Всё зависит от конкретного проекта и задачи заказчика.

Также для backend-разработки используются системы управления базами данных:

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

Как взаимодействуют frontend и backend?

Взаимодействие frontend и backend происходит по кругу:

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

Существует несколько вариантов взаимодействия frontend и backend:

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

Заключение

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

Источник

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

ххх: на чём пишешь фронтенд?
yyy: на костылях и велосипедах
ххх: ммм, хороший фреймворк!
Bash.im

Когда приходит мысль стать программистом, ты вдохновенно открываешь справочник Шилдта по С, заказываешь толстую книгу Страуструпа по С++ и учишься шутить про указатель на указатель на указатель и про рекурсию. Жёсткая романтика первого времени… Но всё меняется, когда в твою жизнь случайно приходит JavaScript. «Какой он простой, понятный, какой классный синтаксис! Всё, решено, буду писать сайты», — думает начинающий программист и решает стать гуру всея веба. Но потом выбранный стек меняет своё дружелюбное лицо, и чем дальше, тем больше. Но ты уже не можешь остановиться, потому что ты один из них — фронтенд-разработчиков. Тех самых, которые «смотрящие за мордой сайта». Ну что, захотелось присоединиться? Тогда для вас 2 серия нашего спецраздела «Профессия:…»

Кто это?

Сперва немного лирики и отступления от темы.

На пороге третьего десятилетия XXI века кажется, что интерес пользователей и разработчиков сместился c веб-интерфейсов в сторону мобильных приложений и IoT. Но это только кажется. Проведём простой мысленный эксперимент. Подумайте, сколько сайтов вы посещаете со всех своих гаджетов в неделю и проанализируйте, какие мобильные приложения у вас установлены. Скорее всего, получится, что все информационные и новостные ресурсы вы просматриваете на полных и мобильных версиях сайтов (в браузере), а мобильные приложения выполняют «специфические» задачи: социальные сети, мессенджеры, планировщики, хобби и т.д. То есть о вымирании веба говорить слишком рано.

Более того, одним из трендов 2019-2020 года (а мне думается, что и до года 2025) стали так называемые PWA (Progressive Web Apps), которые называют будущим мобильного веба. Если говорить максимально просто, то PWA — это не что иное как мобильный сайт здорового человека такой, каким он должен быть. Лучше всего PWA определил один из создателей этой концепции и автор самого термина Алекс Рассел: «Progressive Web Apps are just websites that took all the right vitamins.» («PWA это всего лишь сайт, который принимает все необходимые витамины»).

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

Кстати, если вам интересно познакомиться с PWA поближе, есть классная страница о нём и, конечно, рекомендации Гугла.

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

Что-то меня в бэкенд унесло. Не суть. Суть в том, что при любом бэкенде любого сайта должна быть «морда» сайта и он должен как-то работать. И всё происходит, когда приходят они — фронтенд-разработчики. Они отвечают за разработку внешнего интерфейса сайта, то есть того, как бэкенд и дизайн сайта взаимодействуют с пользователем (если вдруг вы на Хабре случайно, поясню — за каждым сайтом скрывается куча всего: дизайн, различные прослойки и огромный бэкенд, то есть вся логика работы, СУБД и проч). В общем, когда-то истина крылась вот в этой картинке:

Эта эпичная и знакомая всем картинка уже сегодня трансформировалась и действительно, профессия фронтенд-разработчика стала несравнимо сложнее и многокомпонентнее, чем каких-то 7-10 лет назад. Теперь это выглядит так, и 2028 по ощущениям гораздо ближе 🙂

Фронтендеры отвечают за логичную работу всех компонентов сайта, включая контент, кнопки, изображения, навигацию и внутренние ссылки. Нередко именно они проектируют первичную структуру сайта, работают с требованиями пользователей (заказчиков), то есть отвечают за клиентскую сторону пользовательского интерфейса. И если бэкендеры отвечают за программно-аппаратную часть и им скорее важно, как софт взаимодействует с железом, то фронтендеры взаимодействуют с гораздо более сложной «аппаратной частью» — органами зрения, слуха и иногда осязания обычных людей. Задача сделать так, чтобы было удобно, быстро, прозрачно, ожидаемо и т.д. В общем, если косячит фронтендер, это заметят все и сразу.

Вы ещё не напугались от таких перспектив? Тогда едем дальше.

Где нужен?

Если коротко, то везде, где есть веб-разработка, а именно:

Средняя заработная плата

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

Базовые требования к профессионалу

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

Наиболее популярные веб-фреймворки по версии отчёта StackOverflow. Очень рекомендую перейти на страницу отчёта и просмотреть его весь, хотя бы по графикам, попереключать вкладки, — так вы получите целостную картину происходящего в мировом IT. Много инсайтов даже для продвинутого, опытного айтишника.

Важные личные качества

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

Необходимость знания иностранных языков

Для любого программиста крайне желателен английский язык не ниже upper-intermediate с уклоном в технический английский. Так вы сможете читать в оригинале многочисленные рекомендации Google и других компаний для оптимальной разработки (очень много полезной документации!), самообучаться с помощью зарубежных лекций, общаться с коллегами на форумах, задавать вопросы, а также читать книги по юзабилити и дизайну, среди которых очень много крутых англоязычных и пока не переведённых изданий.

Развиваться именно в программировании без знания английского языка крайне затруднительно, особенно в веб-технологиях.

Где учиться

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

Конечно, первое, с чем вы столкнётесь, выбирая профессию фронтенд-разработчика, это онлайн-школы. Пока я писал эту статью, я погуглил несколько картинок и отчёты площадок по теме фронтенда. У меня весь яндекс и гугл теперь в объявлениях, которые обещают меня сделать гуру JavaScript за 2-3-6-12 месяцев. Соблазнился бы, если бы не знал, что такое JavaScript и как его выучить за 21 день.Брать курс для старта или систематизации знаний или не брать — дело вашего желания, времени и дохода. В любом случае, просто прослушать не получится — придётся сидеть и бить по клавишам, делать тестовые сайты или пилить свой пет-сервис (включая бэкенд, кстати).

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

Лучшие книги и средства обучения

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

Будущее фронтендера

У фронтендера три основных пути развития.

Мифы профессии

▍Фронтенд умирает

Главный миф — это то что профессия фронтенд-разработчика умирает. Конечно, нет. Более того, интерфейсы год от года становится всё сложнее, и ИТ-сфера будет нуждаться в продвинутых специалистах, способных разобраться в этих усложнениях. Фронтенд-разработка будет нужна ещё довольно долго, и никакие шаблоны, визивиги, CMS и прочие средства её не заменят. О важности и нужности профессии можно судить по ряду графиков — думаю, всё наглядно и не нужно ещё раз повторяться о том, что не может умереть профессия, которая обеспечивает самое главное — взаимодействие пользователя и интерфейса.

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

Наиболее популярные языки программирования из отчёта StackOverflow. Кстати, JavaScript здесь удерживает лидерство уже седьмой год.

А вот и тренды Гугла.

Динамика запроса «frontend developer» в мире, 5 лет

Динамика запроса «frontend» (красным) и «фронтенд» (синим) в России, 5 лет

▍Работодатели не очень понимают в видах программистов

А вот второй миф нифига не миф, а чистая правда. Работодатели часто не понимают, кого они нанимают на работу и ищут не того, кто готов решать конкретные задачи и брать на себя ответственность за их решение, а того, кто «должен знать» какой-то им одним ведомый стек технологий. Именно поэтому нужно быть готовым к тому, что вакансия фронтендера будет один раз похожа на вакансию верстальщика, а второй — на вакансию фулстека. Если работодатель выучил аббревиатуру TDD (test driven development), то вакансию можно найти и среди тестировщиков 🙂 На самом деле, такой дичи, как в требованиях к фронтенд-программистам не встречается практически нигде (хуже дела обстоят только у пиарщиков и маркетологов, те вообще должны быть МФУ). Если вам очень хочется в компанию и вы понимаете, что собеседование идёт не туда, постарайтесь перевести разговор на задачи и рассказать, как конкретно вы собираетесь их решать и с помощью какого стека. Впрочем, если не туда пошло уже на собеседовании, может, вы слишком хорошо думаете о компании?

Главный совет

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

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

Источник

Как стать программистом с нуля: начните с профессии фронтендера

Чем занимаются фронтенд-разработчики и сколько им платят

Фронтенд-разработчики верстают на HTML и пишут код на JavaScript. Оба навыка востребованы как по отдельности, так и вместе, и относительно просты для изучения.

HTML-верстальщик оформляет внешний вид страницы: он описывает ее структуру и все элементы, которые создали дизайнеры и маркетологи, специальными символами — тегами. Верстка — это набор правил, которые «объясняют» сайту, куда поставить блоки, отступы и какого цвета должна быть, например, кнопка. Верстальщиком легко стать с нуля — нужны только педантичность и любовь к красоте. Почему к красоте? Потому что аккуратный, правильный код — это красиво!

Вот так текст с HTML-кодом выглядит в CMS (админке) сайта

На рынке есть вакансии и для «чистых» верстальщиков, но чаще всего требуются фронтенд-разработчики. А значит, к верстке добавляется разработка на JavaScript.

JavaScript — следующий шаг для веб-разработчика. Если HTML и CSS отвечают за то, как выглядит страница, то код на JavaScript «оживляет» элементы и добавляет им реакцию на действия пользователя. Писать код сложнее, чем верстать, но без этого навыка веб-разработчику не обойтись. JavaScript — язык, который хорошо подходит для изучения тем, кто с кодом ни разу не сталкивался. Для написания кода нужен только текстовый редактор, программы не нужно компилировать (они работают прямо в браузере), а результат работы виден сразу.

Простой пример: знание JavaScript поможет вам сделать таймер, отсчитывающий время до определенного события, или проверить, какие данные пользователи вводят в поля на сайте. Если неправильно заполнить какую-нибудь строчку в форме заказа в интернет-магазине, появляется надпись с подсказкой. Например, «Ваш пароль должен быть от 8 до 30 символов длиной и содержать одну заглавную букву, один спецсимвол и число». Это называется валидацией формы — когда вы вводите данные, программа проверяет, корректно ли они введены. Владея JavaScript, можно написать такую программу.

Ключевые навыки хорошего фронтенд-разработчика (по данным HTML Academy):

Верстка и профессиональная разработка веб-интерфейсов:

Написание кода на JavaScript:

Уровень зарплат фронтенд-разработчиков (по данным hh.ru за 2020 год), в рублях

Уровень конкуренции за рабочее место

Уровень конкуренции за рабочие места среди фронтендеров ниже, чем в среднем по рынку по всем профобластям, и в разы ниже, чем во многих отдельных профобластях. На одну вакансию в среднем приходится по 4 (в Москве), 4,5 (в Санкт-Петербурге) и 4,8 (по России) активных резюме фронтенд-разработчика. Тогда как средний уровень конкуренции по всем профобластям составляет 6 активных резюме на одну вакансию, а в отдельных профобластях (например, у юристов, журналистов, бухгалтеров, секретарей) он выше 7 и даже выше 10 — это уже повышенная конкуренция. То есть найти работу фронтендерам проще, чем представителям других профессий.

Сколько требуется на обучение с нуля

В HTML Academy обучение профессии «Фронтенд-разработчик» занимает 6 месяцев. За это время студент осваивает курс базовой верстки, курс адаптивной верстки и курс по JavaScript. У каждого студента есть личный наставник, вместе с которым он погружается в практику: по каждому из курсов студент выполняет и защищает от 1 до 2 проектов.

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

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

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

Стать фронтендером может и гуманитарий старше 30 лет

Сегодня фронтенд-разработку успешно осваивают с нуля люди всех возрастов. Возраст учеников HTML Academy — от 12 до 65 лет.

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

Стать фронтенд-разработчиком может даже гуманитарий. Конечно, на этапе написания кода будет чуть сложнее, если есть большие пробелы в математике, но «чуть сложнее» не означает «это невозможно». Именно поэтому фронтенд часто выбирают, если хотят сменить профессию на «айтишную». Переход в техническую сферу здесь получается мягче и безболезненнее, чем если начинать с других ИТ-профессий.

Екатерина Матюшкина, одна из выпускниц HTML Academy, до того как стать фронтенд-разработчиком, работала педагогом-психологом. В новую профессию ее привело профессиональное выгорание. Обучение далось нелегко, но она справилась:

После обучения Екатерина устроилась на стажировку в МТС IT, и через 3 месяца ее взяли в штат. Работать программистом ей нравится куда больше, чем педагогом. Уровень стресса гораздо ниже, нет дресс-кода, жесткого графика работы и субординации, команда поддерживает и к ней всегда можно обратиться за помощью.

Как найти первую работу

Есть несколько способов.

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

Другой способ трудоустройства — через «Центр карьеры» HTML Academy.

Третий способ — разместить резюме на hh.ru и откликаться на вакансии.

Для дальнейшей карьеры есть несколько вариантов

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

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

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

Совет: прежде чем менять профессию и тратить на обучение полгода, удостоверьтесь, что это вам интересно. В HTML Academy есть бесплатные тренажеры по верстке и программированию. Это самый базовый уровень, на котором все разложено по полочкам в игровой форме. Если вы открыли занятия, попробовали, у вас разболелась голова и появилось отторжение — наверное, это не ваше. Но если вас затянуло, проснулся интерес, чешутся руки продолжить учебу, значит, стоит присмотреться к новой профессии! Дерзайте!

Источник