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

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

Frontend

(рус. фронтенд)

Frontend-разработка — это процесс создания пользовательского интерфейса, который пользователи видят и взаимодействуют с ним. Frontend-разработчики делают сайты, приложения, в том числе интерактивные элементы на веб-страницах, такие как кнопки, формы, меню, анимации. Они также отвечают за работу и оптимизацию интерфейса в разных браузерах и на разных устройствах, чтобы обеспечить положительный UX[1] от продукта. Грубо говоря, их обязанность — воссоздать макет, который им выдал дизайнер, и наполнить его движением.

Backend

(рус. бэкенд)

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

Разница между frontend и backend

1. Место отработки. Frontend работает на мощности компьютера или смартфона пользователя, a backend — на сервере.
2. Наличие базового стека технологий. Современный frontend чаще всего пишут с помощью HTML, CSS и JavaScript. Backend может быть написан на многих языках программирования.
3. Взаимодействие с пользователем. Frontend взаимодействует с пользователем напрямую, backend — через frontend.
4. Различие в коммуникации. Frontend разработчики больше контактируют с дизайнерами, маркетологами, а backend разработчики с аналитиками, системными администраторами и DevOps-инженерами.

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

Все очень просто — клиентская часть (frontend) отправляет запросы на серверную часть (backend), а сервер обрабатывает эти запросы и отправляет ответы.

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

Общение клиентов и серверов происходит посредством протоколов передачи данных, таких как HTTP, HTTPS, FTP, SMTP. Некоторые особенности:

1. Когда клиент (например, веб-браузер) делает запрос на сервер, он отправляет HTTP-запрос на определенный IP-адрес и порт, на котором запущен сервер.
2. Сервер, в свою очередь, принимает этот запрос и обрабатывает его, выполняя определенные действия, такие как чтение или запись данных в базу данных или отправка ответа клиенту. Сервер также может отправлять запросы на другие серверы, чтобы получить необходимые данные.
3. Клиент и сервер могут обмениваться данными в форматах HTML, XML или JSON. Для обеспечения безопасности передачи данных используются методы шифрования, такие как SSL/TLS.

Frontend-разработчик

(сленг. фронтендер)

В рутинные задачи фронтендеров входит:

1. Создание структуры проекта. Выбор стека технологий для реализации пожеланий заказчика, создание масштабируемую и легко поддерживаемую иерархию папок и файлов.
2. Верстка макетов. С помощью HTML составляется структура документа. Написание CSS отвечает за стилизацию и итоговый внешний вид.
3. Написание логики динамических элементов. Например в слайдере с помощью кода JavaScript отслеживается нажатие по стрелочке и происходит перелистывание на следующий элемент.
4. Кроссбраузерность. Сайты должны отображаться во всех браузерах одинаково.
5. Налаживание взаимодействия с backend. Например, работа с API — для получения доступа к данным на сервере.

Что должен знать frontend-разработчик, чтобы устроиться на работу

Минимум это:

1. Git & GitHub
2. Уметь пользоваться редакторами кода (Visual Studio Code, WebStorm)
3. HTML
4. СSS + препроцессор SASS
5. JavaScript
6. TypeScript
7. Один из фреймворков на выбор: React, Vue.js, Angular.
8. REST API
9. Основы Figma
10. Один из сборщиков на выбор: Webpack, Grunt или Gulp

Максимума не существует, так как на каждом месте работы будут свои требования и изменения в IT-мире происходят очень быстро.

Кроме технических навыков, придется прокачать гибкие — soft skills:

1. Базовый английский
2. Обучаемость и адаптация
3. Коммуникабельность
4. Креативность
5. Инициативность и любопытство
6. Ответственность и самостоятельность

Карьерный путь frontend-разработчика

1. Стажировка или участие в проектах на волонтерской основе. Такие проекты можно начинать искать после изучения верстки и JS. Этот этап необязателен, но поможет в дальнейшем трудоустройстве: работодателю можно будет показать готовые проекты. Существуют оплачиваемые стажировки, но чаще всего работа строится на энтузиазме. Ориентировочные сроки — три-пять месяцев.
2. Junior позиция. Тут понадобятся более глубокие знания JS, а также фреймворк и дополнительные технологии (например, REST API, Redux). Junior Frontend разработчику, как новичку, обычно назначают наставника — middle и senior разработчика и дают простые задачи, такие как верстка макета, написание простой логики создания форм и слайдеров. На уровне junior люди находятся около года. При достаточном уделении времени обучению переход на middle позицию происходит быстро. Средняя зарплата в России — 120 тыс. рублей по данным Glassdoor.
3. Middle позиция. Добавляется Node.js, работа с SQL, GraphQL, СУБД MySql. Средняя зарплата — 220 тыс. рублей.
4. Senior позиция. Чтобы стать senior нужно иметь много опыта и расширять свои знания в глубину. Средняя зарплата — 300 тыс. рублей.
5. Дальнейший путь. Можно пойти в тимлиды[2], в менеджеры проектов или в преподавание.

Backend разработчик

(сленг. бэкендер)

В рутинные задачи бэкендеров входит:

1. Разработка базовой логики и алгоритмов продукта
2. Работа с базами данных при помощи СУБД
3. Создание интеграций с внешними сервисами
4. Разработка и поддержка API
5. Разработка системы авторизации и безопасности
6. Тестирование и устранение ошибок
7. Оптимизация производительности сервера и баз данных
8. Деплой проекта
9. Работа с системами кэширования и кластеризации для обеспечения масштабируемости
10. Поддержка и сопровождение проекта после его запуска.

Что должен знать backend-разработчик, чтобы устроиться на работу

1. Язык программирования: например, Java, Python, Ruby, PHP, C#. Необходимо знать основы языка, структуры данных, алгоритмы, объектно-ориентированное программирование и/или функциональное программирование.
2. Базы данных и SQL: владение реляционными базами данных и языком SQL для создания, изменения, чтения и удаления данных, а также понимание баз данных NoSQL.
3. API: создание API и работа с существующими API. Знакомство с RESTful API, SOAP, GraphQL.
4. Системы контроля версий: знание Git — ветки, коммиты, пул-реквесты, сливать ветки и решать конфликты.
5. Операционные системы и сервера: знать особенности Windows, macOS, Linux, Apache, Nginx, уметь устанавливать и настраивать серверное ПО, обеспечивать безопасность сервера, мониторить его работу и настраивать сетевые соединения.
6. Тестирование и отладка: писать модульные, интеграционные и функциональные тесты, использовать отладчик и логировать ошибки.
7. Безопасность: основы безопасности и защиты данных. Обеспечение защиты от SQL-инъекций, XSS-атак, CSRF-атак.

Гибкие навыки:

1. Знание Agile-методологии
2. Базовый английский
3. Обучаемость и адаптация
4. Коммуникабельность
5. Креативность
6. Стрессоустойчивость и адаптивность
7. Организованность и ответственность
8. Аналитические способности

Требования к знаниям и навыкам зависят от конкретной вакансии и проекта.

Карьерный путь backend-разработчика

1. Стажировка. Будет полезна тем, кто хочет попасть в крупные компании. Например, вот ссылка на стажировку в Yandex.
2. Junior позиция. Это начальный уровень для новичков в программировании. Junior Backend Developer обычно работает под руководством более опытных разработчиков и выполняет простые задачи, такие как создание баз данных, написание простых запросов и тестирование кода. Средняя зарплата в России — 120 тыс. рублей.
3. Middle позиция. После того как Junior Backend Developer получит достаточный опыт и знания, он может перейти на следующий уровень — Middle Backend Developer. Middle Backend Developer отвечает за более сложные задачи, такие как разработка сложных алгоритмов, создание веб-сервисов и оптимизация баз данных. Средняя зарплата 200 тыс. рублей.
4. Senior позиция. Senior Backend Developer — это высшая ступень карьеры backend разработчика. Он отвечает за разработку сложных систем и архитектур, а также за управление проектами. Senior Backend Developer также может заниматься менторством более молодых разработчиков и помогать им в их профессиональном развитии. Средняя зарплата около 350 тыс. рублей.
5. Дальнейший путь. Вариантов много, можно стать тимлидом, техлидом, проджект менеджером, СТО или уйти в преподавание.

Fullstack-разработчик

(сленг. фулстакер)

Fullstack разработчик — это универсальный специалист, который способен работать как с клиентской, так и с серверной частью приложения. То есть создавать продукт с получения макета от дизайнера и до выпуска в продакшн. Fullstack разработка ценится малым бизнесом и пригодится на фрилансе. В крупных компаниях по факту, начиная с уровня middle, фронтенд специалисты должны владеть Node.js и знать принципы бэкенда, поэтому руководства также с удовольствием берут фулстакеров.

Что fullstack разработчик должен уметь делать:

1. Обладать навыками программирования на языках, используемых в веб-разработке
2. Работать с базами данных
3. Знать основы системного администрирования
4. Иметь опыт работы с фреймворками и библиотеками
5. Создавать пользовательские интерфейсы
6. Работать с API
7. Создавать и настраивать серверную инфраструктуру
8. Обеспечивать безопасность
9. Работать с Git
10. Иметь понимание о тестировании и отладке приложений
11. Создавать продукт от и до

Карьерный путь fullstack-разработчиков похож на путь бэкенд разработчиков. Средние зарплаты несколько выше, например для junior позиции это будет 140 тыс. рублей.

Что выбрать: frontend- или backend-разработку?

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

Рекомендуем пройти бесплатный тест от Профгид.

Если вам трудно сделать выбор, начните с изучения fullstack-разработки, где вы сможете работать с обеими областям. Помните, что любому frontend-разработчику для развития карьеры понадобятся скиллы бэкенда.