Профессия «веб-разработчик» становится популярнее. Ведь бизнес все больше уходит в онлайн, а это стимулирует развитие облачных сервисов, появление новых функциональных сайтов. И заодно приводит к появлению отдельных специализаций внутри единой системы программирования. Так, веб-разработчики стали делиться по языкам, с которыми они работают. Плюс появились «ветки» — Frontend Developer и Backend Developer, о которых мы поговорим дальше.
Что такое Frontend-разработка?
Первая категория специалистов полностью отвечает за разработку пользовательского интерфейса сайта или приложения. В сферу ответственности Frontend’а входит адаптивная, отзывчивая верстка и шрифты, читаемые на любом разрешении. Также поддержка всех современных версий браузеров, мобильных устройств, функций оптимизации SEO. Кодеры этого уровня преимущественно обычно ограничиваются языком разметки HTML, каскадными таблицами CSS и скриптами на JavaScript.
Примерный алгоритм работы (обобщенно):
- Разметкой задается структура страницы, расположение графических элементов, сочетание других блоков, для текстового контента, рекламы, меню и т.д.
- Стили придают страницам привлекательный внешний вид, позволяют оформить их с учетом фирменного брендбука.
- Скрипты отвечают за оживление статичных страниц, подключение плагинов, выполнение несложных операций вроде «формы захвата контактов.
Язык JavaScript способен и на большее. Например, динамически генерировать страницы. Но объем кода будет значительным, тем более, «чистые» скрипты исполняются браузером и сильно зависят от производительности компьютера пользователя. Частично такая проблема решается переходом на фреймворк Node.js, который предназначен для исполнения приложений на стороне сервера. Базой же остается язык программирования JavaScript.
Frontend-разработчики непосредственно взаимодействуют с дизайнерами, UX-аналитиками, чтобы продукт получался красивым, удобным и соответствовал маркетинговым задачам. Это относится и к сайтам, и к онлайн-играм, и к мобильным приложениям. Веб-технологии остаются актуальными за счет совместимости практически с любой настольной платформой (Windows, MacOS, Android, iOS или Windows Mobile), удобства обновления и обслуживания.
Что такое Backend-разработка?
В отличие от фронтэнда разработчики в направлении бэкэнда имеют дело с серверной частью сайта или облачного продукта. И первое, чем они занимаются – это организация работы с базой данных, в которых хранится весь контент, от шаблона до картинок и текстов на всех внутренних страницах и подключенных плагинов, интегрированных через API внешних сервисов. То же относится к форме регистрации, покупкам товара из «корзины», приему платежей.
Направления, по которым часто работают Backend-разработчики:
- Механизмы регистрации, аутентификации.
- Функционал личных кабинетов клиентов в B2B и B2C.
- Распределение ролей, выдача разрешений, контроль доступа.
- Совместной работы над проектами (чтение, редактирование, удаление).
- Прием запросов от пользователей, их обработка (скачивание файлов и т.п.).
- Интерактивные формы для заказа товаров, услуг, расчета параметров (калькуляторы).
- Интеграция с внешними приложениями, другими сайтами, оборудованием.
В сферу ответственности специалиста по Backend’у также входит организация отправки различных уведомлений. Например, с подтверждением действий в виде всплывающих сообщений в браузере, электронных писем на Email, СМС на мобильный телефон. То же относится к подписке на новости, управлению тарифными планами, приему платежей, загрузке пользовательских файлов. Все будет работать только за счет специальных программ, размещенных на сервере.
Сходства и отличия
Напрямую сравнивать Frontend и Backend практически бессмысленно. Да, это совершенно разные направления программирования, но работать друг без друга отдельные модули не смогут. Толку от вычисляющего кода калькулятора, если нет соответствующих кнопок в интерфейсе? И наоборот, их нажатие ни к чему не приведет, если на сервере отсутствует или «сломалась» соответствующая программа. Поэтому команда разработчиков включает специалистов обеих категорий.
Варианты взаимодействия интерфейса и сервера:
- Браузер пользователя отправляет HTTP-запрос, после обработки возвращается ответ в виде HTML-страницы.
- Скрипт на JavaScript аналогичным образом отправляет запрос по технологии AJAX, ответ приходит в виде XML или JSON, его обрабатывает тот же или иной скрипт.
- Страницы на фреймворках Angular и Ember обмениваются информацией с серверной частью без обновления неизменяемого содержимого.
- Библиотеки Ember и React разделяют исполнение приложения между сервером и клиентской частью для оптимизации скорости.
Выбор решения зависит от задач. Одно дело разработать одностраничник под рекламные кампании, и совершенно другое, когда программист работает с интернет-магазином, напичканным функциями «под завязку». И даже корпоративный сайт с внутренним порталом будет отличаться от каталога с товарами или от сайта-визитки. Проще всего сотрудничать со специалистами Fullstack, для которых одинаково легко программировать интерфейс и модули, спрятанные «под капотом».
Но тогда придется ждать результата дольше, чем это возможно при параллельной разработке двух «независимых» блоков. Правда, командная работа требует привлечения минимум третьего человека для составления схемы с логикой функционирования сайта, выбора языка программирования. Плюс координации сотрудников, чтобы уложиться в запланированные сроки, своевременно обнаружить ошибки и устранить их еще на этапе тестирования прототипа.
Чем занимаются Frontend- и Backend-разработчики?
Координатору нужно четко понимать, какие задачи кому поручать, иначе проект «зависнет» еще сильнее, чем при сотрудничестве с Fullstack-разработчиком. Поэтому новичкам в веб-индустрии сложно работать PM (Project Manager, менеджером проектов). Прежде чем выйдет зарабатывать в этой сфере придется получить массу теоретических знаний. То же относится к специалистам QA Manual или тестировщикам, им нужно понимать, какие баги к чьей части кода относятся.
Frontend
Но вернемся к разработчикам. Так, фронтэнд относится исключительно к реализации визуальной части приложения или сайта. В его обязанности входит разработка нового функционала, улучшение старого, рефакторинг кода для улучшения производительности, читаемости, расширяемости, чтобы легко добавлять новые «фишки». Плюс за ним остается обзор кода, отправляемого на сервер, баги в «чужом» коде, если разработкой ранее занимался другой специалист.
Основные инструменты фронтэнда:
- HTML – язык разметки для составления структуры страницы, ее разбивки на блоки.
- CSS – стили отображения заголовков, текста, включая цвета, кегли, другие настройки.
- Препроцессоры – инструменты вроде SASS, LESS, расширяющие возможности CSS.
- JavaScript – язык программирования для «оживления» интерфейса, общения с сервером.
- React – популярная JS-библиотека, особо интересна для разработки простых SPA.
- Angular – фреймворк с большой коллекцией готовых к применению модулей.
- Vue – еще один фреймворк, подходит для создания высокопроизводительных приложений.
Последние 3 пункта относятся к трендам последних нескольких лет. Если раньше от разработчика ждали лишь хорошего знания связки HTML+CSS+JS, теперь обойтись таким простейшим набором инструментов не выйдет. Плюс к перечисленному фронтэнду приходится работать с графическими редакторами, сервисами контроля версий (Git, GitHub, CVS и др.). Помогает разобраться в массе нового хорошее знание английского языка, потому что книги в основном иностранные.
Backend
Обязанности бэкэнда при поверхностной оценке «те же». К ним относится разработка, рефакторинг кода, инспектирование «чужих» блоков и написание документации. Последняя понадобится, когда придет время дорабатывать проект, чтобы было проще понять логику приложения (сайта). Сюда же относится исправление багов, модульное и интеграционное тестирование, в том числе в команде с фронтэндом для проверки обмена данными между интерфейсом и исполняемыми блоками.
Основные инструменты бэкэнда:
- Базы данных – в основном используются реляционные MySQL или PostgreSQL.
- Языки программирования – здесь понадобится JavaScript, плюс PHP, Go, Java и Python.
- Git – системы контроля версий, позволяющие быстро вернуться к любой из предыдущих.
- API – интерфейс для интеграции внешних сервисов, программ и даже оборудования.
- Node.js – инструмент для переноса исполняемой части JS-скриптов на сервер.
- Symphony и Laravel – фреймворки, дополняющие и расширяющие функционал PHP.
- Django – аналогично для языка программирования Python.
- Spring – то же, только для платформы Java.
Фреймворки стоит осваивать в зависимости от того, на каком языке разработчик преимущественно работает, а не «все подряд». Технологии постоянно меняются, поэтому по мере востребованности может понадобится развитие в других инструментах. Ведь всего 2-3 года назад базой считался PHP и 99% проектов создавались на нем. Сейчас сохраняется «обратная совместимость» и специалисты с навыками программирования на нем еще актуальный. Но приходится расширять знания.
К тому же переход на фреймворки упрощает разработку, в них имеется масса готовых блоков кода, которые остается лишь включить в собственный. Например, нет смысла писать отдельный модуль для формы подписки на новости, когда проще вставить обращение к «стандартному», проверенному на стабильность, блоку. То же относится к другим типовым функциям сайтов – приему платежей, корзине в интернет-магазине, фильтрам, сортировке и т.д.
Карьерный путь и зарплата разработчиков
Разница в квалификационных требованиях влияет и на карьерный путь, зарплату специалистов. При оценке уровня знаний и практических навыков существует формальное деление на Junior, Middle и Senior, но в зависимости от работодателя цифры меняются в широких пределах. Отчасти на оценку влияет размер проекта, количество сотрудников в отделе разработки. Одно дело заниматься всем в одиночку и совсем другое, когда на специалиста взваливается лишь небольшая часть задач.
Frontend
По данным сайта hh.ru зарплаты в секторе Frontend колеблются от 20 тыс. до 70 тыс. рублей для тех, кто достиг уровня Junior. При росте квалификации можно рассчитывать на увеличение среднего заработка. Так, для Middle диапазон растет до 50-300 тыс. рублей, а для Senior – уже до 100-550 тыс. рублей. Очевидно, что есть куда расти, если однажды получить хотя бы базовые знания в HTML и CSS, плюс немного JavaScript. Главное, получить возможность практиковаться.
Перспектива вырасти в:
- tech lead – технический специалист в области Frontend уровня «гуру»;
- team lead – руководитель команды разработки (оперативное управление);
- full-stack developer – универсал, одинаково владеющий фронтэндом и бэкэндом;
- solution architect – разработчик архитектуры внутреннего устройства и интерфейсов;
- tech consultant – консультант по «узким» вопросам, касающимся направления.
Специалисты в фронтэнд’е работают в студиях веб-разработки, IT-департаментах компаний вроде маркетплейсов, ритейлов, социальных сетей, стриминговых платформ. Также услуги востребованы в среде разработчиков корпоративного софта, например, CRM, складских, бухгалтерских программ с веб-интерфейсом. Отдельное направление – государственные услуги, ведь в онлайн переводятся многие сервисы (сайты Госуслуги, Налоги.ру, городские, ведомственные порталы).
Backend
Программисты в направлении Backend’а имеют более высокую зарплату даже на начальном уровне – от 40 тыс. до 100 тыс. рублей. Хотя при росте квалификации речь идет в основном о минимальных доходах: Middle – 60-350 тыс. рублей, Senior – 120-600 тыс. рублей. Здесь также влияет количество сотрудников в отделе разработки и сложности проекта. Отчасти на уровень оплаты влияет тип языка программирования, на котором предстоит писать код.
Перспективы бэкэнд-разработчика:
- Fullstack – освоить HTML c CSS после Python или Ruby просто, главное, понять идеологию построения интерфейсов, разобраться с юзабилити.
- Руководители проектов – навыки программирования помогут делегировать задачи внутри команды, включая отдельных специалистов на аутсорсинге.
- Технические консультанты – например, в организованных курсах обучения веб-разработке, занимаясь практической частью (постановка заданий, проверка, помощь в корректировке).
Направление, куда развиваться, зависит исключительно от желания специалиста. Потому что оба, и Frontend, и Backend, позволяют работать удаленно. Это означает независимость от места жительства и возможность сотрудничать одновременно с несколькими работодателями. Хоть по трудовой, хоть по разовым заказам. Но остаться востребованным получится только при знании нескольких языков программирования, уверенном владении английским,
Как стать специалистом?
Есть еще одно преимущество веб-разработки – можно стать специалистом в этой области без вуза и помощи профи. В сети достаточно профессиональных сообществ, где делятся наработками все «кому не лень». Многие разработчики в процессе обучения обзаводятся собственными подборками готовых модулей, за счет которых заметно ускоряют сборку типовых проектов. Им остается лишь адаптировать «куски кода» к новым переменным и проверить работоспособность.
Популярны варианты:
- Бесплатные курсы – чаще они выглядят как серия вебинаров, где рассказывают основы, как подготовить компьютер к разработке (например, установить спец. софт), объясняют, какая последовательность изучения быстрее даст эффект.
- Платный курсы – в дополнение к возможностям бесплатных позволяют получить «диплом» или сертификат об окончании обучения. В процессе присутствует практическая часть вместе с проверкой заданий, комментариями профи.
Оба способа обучения желательно совмещать с самостоятельной практикой. Будет полезным брать реальные разовые задачи на фрилансе, благо существует масса бирж вроде Upwork или Kwork, где предлагают работу веб-разработчикам. Это поможет познакомиться с разными направлениями – от простейших одностраничников до интернет-магазинов, CRM, других облачных сервисов.
