img
img
15 марта 2022
18 апреля 2022
7 мин
151

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

Фронтендер создает интерфейс продукта, бэкендер работает с серверной частью.

img
Автор статьи
Виктория Дербенченко
Редактор
img

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

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

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

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

Код главной страницы 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-разработчик проектирует и серверную логику, и пользовательский интерфейс.

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

Опыт

Оклад фронтендера

Оклад бэкендера

Джун (младший специалист)

78 594 ₽

77 780 ₽

Мидл (специалист)

214 404 ₽

201 818 ₽

Сеньор (старший специалист)

308 300 ₽

313 029 ₽

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

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

ЗП разработчиков

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

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

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

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

востребованность frontend или backend разработчиков

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

📚 Что читать

Книги:

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

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

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

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

Frontend 

Backend

Нравится работать с версткой

Не любите верстку

Хотите не только кодить, но и сразу видеть результат работы 

Вам интереснее код, а не визуальная составляющая

Готовы кодить на JavaScript и закрывать глаза на неудобства: поменять язык не получится

Хотите кодить на разных языках, например PHP, Ruby, Python

Настроены учиться всё время, ведь инструменты и технологии постоянно меняются — выходят новые фреймворки и библиотеки

Готовы освоить фундаментальные знания программирования и несколько языков, вспомнить университетскую математику, но не хотите постоянно следить за трендами

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

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

 

img
Подпишитесь на рассылку, чтобы Не упустить что-нибудь новое
Просто и понятно о том, как получить новую профессию


    Ещё по теме
    img
    Программирование
    IT-компания — это не только Google

    Рассказываем про «Тинькофф», «Билайн» и другие компании.

    16 мая 2022
    2 мин
    карьера
    img
    Программирование
    Как составить и оформить баг-репорт

    Указывайте в отчете только одну ошибку, прикладывайте скрины, сообщения и коды.

    04 мая 2022
    6 мин
    баг-репорт
    img
    Программирование
    Как работать со списками в Python

    Учимся добавлять и изменять элементы, объединять и копировать списки.

    02 мая 2022
    5 мин
    python
    списки
    img
    Программирование
    Цикл for в Java: что это, как с ним работать

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

    25 апреля 2022
    6 мин
    java
    циклы
    языки программирования
    img
    Программирование
    Как работать с модулем JSON в Python

    JSON часто применяют, когда разрабатывают API и веб-приложения.

    25 апреля 2022
    9 мин
    python
    языки программирования
    img
    Программирование
    Как IT-специалисту из России найти работу за рубежом в 2022 году

    Есть сервисы, платформы и телеграм-каналы с вакансиями по всему миру.

    21 апреля 2022
    6 мин
    востребованные профессии
    img
    Программирование
    Что такое HTML: основные теги

    С помощью HTML структурируют страницу на сайте, добавляют картинки, таблицы, списки.

    16 апреля 2022
    6 мин
    html (hypertext markup language)p Language)
    верстка сайтов
    img
    Программирование
    Как работает цикл for в Python

    Цикл for используют, когда количество повторов известно заранее.

    14 апреля 2022
    5 мин
    python
    циклы
    языки программирования
    img
    Программирование
    Комьюнити для разработчика

    Есть комьюнити на платформах, под эгидой компаний или самоорганизующиеся.

    07 апреля 2022
    6 мин
    общение
    сообщество
    img
    Программирование
    Гайд: как определить, какое направление в IT тебе подходит

    Обязанности и зарплата аналитика, Python- и Java-разработчиков и не только.

    01 апреля 2022
    9 мин
    выбор профессии
    гуманитарий в IT
    img
    Программирование
    Правильное питание на удаленке. Почему это важно?

    Правильное питание — это не о жестких диетах и полном отказе от любимых продуктов.

    01 апреля 2022
    7 мин
    удаленная работа
    img
    Программирование
    Как я нашла время на учебу, когда времени не было совсем

    Благодаря методу «круга-пирога» увидите свое время и возьмете его под контроль.

    30 марта 2022
    7 мин
    дистанционное обучение
    домашняя работа
    самоорганизация
    img
    Программирование
    9 причин, почему не получается внедрять полезные привычки

    Ищите мотивацию, хвалите себя, визуализируйте план и результат.

    30 марта 2022
    8 мин
    постановка цели
    самоорганизация
    img
    Программирование
    Как больше успевать: зачем есть по одной лягушке в день и как справиться со слоном

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

    30 марта 2022
    2 мин
    самоорганизация
    эффективность
    img
    Программирование
    Как поставить цель и не бросить на полпути

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

    30 марта 2022
    6 мин
    постановка цели
    самоорганизация
    img
    Программирование
    Кто такой менеджер проектов, чем занимается и как им стать

    Этот специалист контролирует все этапы проекта и приводит его к успеху.

    30 марта 2022
    8 мин
    управление проектами
    img
    Программирование
    Как не угробить здоровье на удаленке

    Советы всем удаленщикам — больше двигаться, делать зарядку, разминку для глаз.

    30 марта 2022
    9 мин
    удаленная работа
    img
    Программирование
    Junior, Middle, Senior в разработке — кто есть кто и как перейти на уровень выше

    Junior зарабатывает от 40 000 ₽, Middle от 100 000 ₽, а Senior от 250 000 ₽ и выше.

    29 марта 2022
    12 мин
    junior
    middle
    senior
    img
    Программирование
    Как банковская служащая в 32 года с нуля перешла в IT и в 40 открыла свою компанию по разработке онлайн-игр

    Совет от героини: сделайте первый шаг, дальше будет проще; учитесь и идите вперед.

    29 марта 2022
    14 мин
    смена профессии
    смена сферы
    img
    Программирование
    Пять приложений, чтобы не отвлекаться от учебы и работы

    Фишки и стоимость Forest, WaterDo, SleepTown, Alarmy, Pomodoro Timer Lite.

    29 марта 2022
    5 мин
    самоорганизация
    img
    Программирование
    Самый краткий гид по специализациям программистов

    Программист fullstack получает до 550 000 ₽, а на тестировщика учатся 4–15 мес.

    29 марта 2022
    3 мин
    backend-разработка
    c++
    frontend-разработчик
    java-разработчик
    востребованные профессии
    инженер по тестированию
    img
    Программирование
    Язык SQL: что это такое и зачем он нужен

    SQL используют в банках, торговле, перевозках: везде, где много информации.

    29 марта 2022
    7 мин
    mysql
    базы данных
    img
    Программирование
    Как освоить c нуля IT-профессию и перейти на новую работу без опыта

    Сначала поставьте цель: выберите сферу и определите, кем видите себя через 10 лет.

    29 марта 2022
    6 мин
    выбор профессии
    смена сферы
    img
    Программирование
    Словарь IT-сленга

    Термины разработки, Scrum, неформального общения, организационных процессов.

    29 марта 2022
    13 мин
    сленг
    словарь
    img
    Программирование
    Подборка: 33 книги и подкаста для начинающих программистов

    Узнаете о работе программиста и поймете, как писать хороший код.

    28 марта 2022
    10 мин
    книга
    подкаст
    img
    Программирование
    Хакнуть мозг: как современные знания помогают мозгу развиваться и учиться

    Мозг меняется всю жизнь. Мы можем на него влиять: изучать новое, развивать навыки.

    28 марта 2022
    8 мин
    развитие мозга
    img
    Программирование
    Как совмещать работу, учебу, семью и быт: рассказ будущего тестировщика

    Помогает планирование, вера в то, что реально изменить жизнь, поддержка семьи.

    28 марта 2022
    8 мин
    курс обучения
    личная история
    онлайн-образование
    смена профессии
    тестирование
    img
    Программирование
    Что такое CSS и как с ним работать

    С помощью CSS задают цвет, размеры, анимацию, адаптируют сайт под устройства.

    16 марта 2022
    9 мин
    css
    img
    Программирование
    Как создать телеграм-бота на Python

    Python — самый популярный язык программирования в феврале 2022 года.

    16 марта 2022
    9 мин
    python
    img
    Программирование
    Какие профессии в IT подойдут гуманитарию

    Гуманитарию подойдут профессии тестировщика, веб-дизайнера и не только.

    15 марта 2022
    9 мин
    выбор профессии
    карьера
    img
    Программирование
    Кто такой Java-разработчик, чем занимается и как им стать

    Обязанности Java-разработчика — писать код, тестировать и улучшать его.

    15 марта 2022
    7 мин
    java
    java-разработчик
    карьера
    img
    Программирование
    Что такое IT-сфера и почему она сейчас так популярна

    IT-отрасль привлекает удаленкой, карьерным ростом, высоким доходом.

    04 марта 2022
    7 мин
    it
    карьера
    img
    Программирование
    Как установить Python на компьютер и начать на нём писать

    Воспользуйтесь Google Colab, онлайн-интерпретаторами или скачайте Python.

    04 марта 2022
    4 мин
    python
    языки программирования
    img
    Программирование
    Как создать приложение для Андроид самостоятельно с нуля: инструкция

    Используйте конструкторы no-code, Java или Kotlin, Android Studio.

    04 марта 2022
    8 мин
    андроид
    разработка
    img
    Программирование
    Postman: как пользоваться программой для тестирования API

    Бесплатный сервис позволяет писать тесты, поддерживает разные типы API.

    04 марта 2022
    6 мин
    api
    postman
    img
    Программирование
    Google Colab: что это такое и как с ним работать

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

    04 марта 2022
    4 мин
    google colab
    img
    Программирование
    Как перейти в разработчики из другой профессии

    Освоить новую профессию реально с нуля в любом возрасте, главное — мотивация.

    03 марта 2022
    8 мин
    карьера
    разработка
    img
    Программирование
    Как помочь ребенку выбрать профессию

    Не выбирайте по принципу «чем проще, тем лучше» и уважайте желания ребенка.

    03 марта 2022
    7 мин
    карьера
    родителям
    img
    Программирование
    Нужно ли высшее образование программисту: сравниваем все «за и «против»

    Важнее опыт и проекты в портфолио, но иногда высшее образование все-таки нужно.

    02 марта 2022
    5 мин
    образование
    img
    Программирование
    Стоит ли переходить на удаленку: плюсы и минусы

    Сегодня удаленка доступна для разных сфер: ИТ, маркетинг, сервис, продажи.

    02 марта 2022
    6 мин
    удаленка
    img
    Программирование
    Какой язык программирования выбрать новичку

    Выбирайте по уровню спроса у работодателей и направлению в программировании.

    24 февраля 2022
    7 мин
    языки программирования
    img
    Программирование
    Фильмы про программистов: лучшие фильмы и сериалы про компьютерных гениев

    20 фильмов и сериалов для тех, кому интересен мир информационных технологий.

    24 февраля 2022
    7 мин
    фильмы
    img
    Программирование
    Фронтенд-разработчик: кто это такой и как им стать с нуля

    Frontend-разработчик создает внешнюю — пользовательскую часть веб-ресурса.

    24 февраля 2022
    8 мин
    frontend
    карьера
    img
    Программирование
    Backend-разработчик: кто это такой и чем он занимается

    Backend-разработчик отвечает за внутреннюю — серверную сторону веб-ресурса.

    24 февраля 2022
    9 мин
    backend
    карьера
    img
    Программирование
    Что такое спринты в программировании и как их выполнять

    Спринты используют в долгих проектах и сложных продуктах.

    24 февраля 2022
    5 мин
    agile
    scrum
    спринты в программировании
    img
    Программирование
    Как начать изучать Python

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

    24 февраля 2022
    9 мин
    python
    языки программирования
    img
    Программирование
    Jupyter Notebook: что это такое и как им пользоваться

    Jupyter-ноутбуки применяют для визуализации данных в big data и data science.

    24 февраля 2022
    7 мин
    jupyter notebook
    python
    разработка
    img
    Программирование
    Как развить soft skills

    Soft skills помогают развивать компетенции, осваивать новые тенденции в работе.

    24 февраля 2022
    11 мин
    soft skills
    саморазвитие
    img
    Программирование
    Как начать изучать Java

    На Java разрабатывают всё: от приложений и ПО до технологий Big Data.

    24 февраля 2022
    7 мин
    java
    java-разработчик
    языки программирования