Frontend или backend: чем отличаются и какой вид разработки выбрать

Направления разработки — frontend и backend — подойдут тем, кому интересно создавать сайты и приложения. Средняя зарплата таких специалистов больше 100 000 ₽ в месяц, при этом она продолжает расти. Поможем разобраться в их задачах, профессиональных компетенциях и определиться с выбором направления.

Что такое frontend- и backend-разработка

На любом сайте есть разные блоки, окна и элементы — видимая часть. За нее отвечает фронтендер. Кликните в любом месте правой кнопкой мыши и выберите «Посмотреть код». Код описывает цвета, шрифты, расположение графических элементов и прочее. Его и пишет фронтендер.

Код главной страницы Skypro

Если вы заполните и отправите заявку, запустите поиск по каталогу или скачаете файл, сработают внутренние процессы. За них отвечает бэкендер. Например, вы зарегистрируетесь в личном кабинете: введете данные и нажмете Enter. Данные полетят‎ на сервер, где хранится сайт и все его файлы. Там их обработают автоматически — благодаря коду, который написал backend-разработчик.

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

Как пользователи взаимодействуют с обеими типами разработки

Frontend отправляет пользовательскую информацию в backend,

↓

backend обрабатывает информацию,

↓

информация возвращается на frontend в виде обычной веб-страницы.

Схема взаимодействия между бэкендом и фронтендом

Внешние и внутренние стороны сайта связывают:

• HTTP-запрос. Он поступает прямо на сервер. Тот ищет данные, которые соответствуют этому запросу. Когда находит, встраивает в шаблон и возвращает в виде HTML-страницы.
• Инструменты AJAX — Asynchronous JavaScript and XML. Запрос на сервер поступает с помощью JavaScript. Ответ приходит в формате JSON или XML. После ответа страница обновляется, но не полностью — только в той части, на которой надо показать новые данные.

Задачи специалистов

👨‍💻 Frontend-разработчик:

💪 создает и верстает динамические интерфейсы, пишет скрипты;

💪 оптимизирует и расширяет функции кода — например, чтобы страницы загружались быстрее;

💪 передает готовый проект в backend для реализации серверной стороны.

👨‍💻 Backend-разработчик:

💪 работает с разными базами данных (SQLite, MySQL, MongoDB) и разными серверами (Nginx, IIS и Apache);

💪 программирует на Java, PHP, Python или другом языке;

💪 создает API, через которые программы взаимодействуют друг с другом.

Требования к специалистам

👨‍💻 Frontend. Разработчик пользовательских интерфейсов должен знать:

👉 функции клиентской стороны веб-приложений, работу браузера, протокол передачи данных HTTP, сбор cookie-файлов;

👉 HTML, основы тегов и элементов;

👉 язык стилей CSS и его основные свойства — классы, идентификаторы, селекторы, псевдоклассы, позиционирование содержимого, медиазапросы;

👉 CSS-препроцессоры — SASS, SCSS, LESS;

👉 технологии адаптивной верстки страниц, например CSS FlexBox, CSS Grid, float, кроссбраузерной и семантической верстки;

👉 JavaScript, разбираться во взаимодействии JS с DOM, в версиях JS — ES5 и ES6, использовать fetch или другие инструменты для AJAX-запросов;

👉 один или несколько фреймворков — Vue.js, Angular, React, использовать менеджеры пакетов (npm, yarn).

И еще:

👉 работать с системой контроля версий Git и сервисом для хостинга типа GitHub, GitLab, Bitbucket;

👉 работать со сборщиками модулей, например Webpack, Gulp, Grunt;

👉 соблюдать чистоту кода: использовать линтеры для анализа качества;

👉 уметь тестировать приложение: разбираться в нескольких инструментах для тестирования (Jest/Cypress/Enzyme).

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

👨‍💻 Backend. Разработчик серверной части должен знать:

👉 один или несколько серверных языков;

👉 как организовать базу данных MySQL, NoSQL или Postgres и обращаться к ней через запросы;

👉 работу протоколов передачи данных HTTP и HTTPS;

👉 как настраивать веб-серверы, например Apache или Nginx;

👉 как работать с API, как устроены JSON, REST, XML и как с их помощью передавать информацию;

👉 как организовать сессии, хранить cookie-файлы, заводить токены и ключи, как работает Oauth — открытый протокол авторизации;

👉 как устроены асинхронные запросы и кеширование.

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

Карьерный рост и зарплата

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

Но до этого фронтендер и бэкендер проходят стандартный путь от джуна до сеньора.

Источник: zarplan.com, январь 2022 г.

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

Источник: habr.com

При выборе направления разработки не стоит ориентироваться на оклад. Backend-разработчики получают на 20 000 ₽ больше, но зарплата frontend-разработчиков активнее растет.

Сравним уровень конкуренции. В апреле 2021-го в hh.ru рассчитали соотношение количества активных резюме к вакансиям и получили такие результаты:

• 1,4 — для бэкендеров;
• 4,0 — для фронтендеров.

Чем выше показатель, тем больше конкуренция. У backend-разработчиков она ниже.

Источник: hh.ru, апрель 2021 г.

Как освоить с нуля

‍🎓 Где учиться

Первый путь — университет. Например, получить IT-специальность, окончить математический или физический факультет.

➕ Высшее образование дает теоретическую базу и развивает аналитические способности.

➖ На разработчиков не учат в вузах, вы получите только фундаментальные знания.

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

➕ Экономия денег, возможность выбирать, что и как быстро изучать.

➖ Много сложной информации, в которой легко запутаться.

В этом случае помогут дорожные карты изучения профессий. Например, карты бэкендера и фронтендера предлагает tproger.ru.

Третий путь — курсы. Освоить специальность в течение года под руководством наставников.

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

➖ Нужно уделять время домашним заданиям и теории, совмещать с работой.

В онлайн-университете профессий Skypro вы освоите навыки frontend-разработчика за 12 месяцев: изучите JavaScript, инструменты разработки, фреймворк React, типовые задачи разработки систем администрирования. В программе — только востребованные навыки и никакой лишней информации.

После учебы вам помогут получить работу: научат составлять резюме и портфолио, проведут три тестовых собеседования.

📚 Что читать

Книги:

• «HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств», Бен Фрэйн.
• «Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5», Робин Никсон.
• «Изучаем РНР 7. Руководство по созданию интерактивных веб-сайтов», Дэвид Скляр.
• «JavaScript для детей. Самоучитель по программированию», Ник Морган.
• «HTML и CSS. Разработка и дизайн веб-сайтов», Джон Дакетт.

Телеграм-каналы:

• «Frontend backend разработчик».
• Frontender’s notes.
• «Библиотека фронтендера».
• «Новичок в Back-end».

👨‍💻 Где искать работу

Создайте резюме и портфолио с учебными или рабочими проектами. Ищите вакансии и откликайтесь:

• на Хабр Карьере;
• хедхантере;
• гикджобе;
• ви-си;
• Работа.ру.

Что же выбрать

Главное о frontend- и backend-разработчиках

• Фронтендер создает видимую часть ресурса — пользовательский интерфейс. Бэкендер — невидимую, серверную.
• Фронтендер должен знать HTML, CSS, JavaScript. Бэкендер — один или несколько языков программирования, MySQL и другие системы управления базами данных, протоколы передачи данных HTTP и HTTPS. Оба направления требуют аналитических способностей.
• Джуны, мидлы и сеньоры в обоих направлениях получают примерно одинаково. Но конкуренция выше во фронтенде.
• Фронтендеры следят за выходом новых фреймворков и библиотек. Бэкендерам нужно знать математику. Еще одно отличие — результат труда. Фронтендер всегда видит, что он только что закодил. Бэкендер — нет.
• На разработчиков не учат в университете, вы получите только фундаментальные знания. Освоить практические навыки с нуля, создать проекты для портфолио и найти работу помогут на онлайн-курсах.