Логотип компании Goodbit
Евгений

Евгений

Руководитель DevOps Отдела

Простым языком о «фронтенд» и «бэкенд»

Человечек показывает на экран

«Фронтенд» и «бэкенд» неразрывно связаны. Эти направления разработки невозможно использовать по отдельности. Однако по видам выполняемых задач они кардинальным образом различаются. Ниже мы расскажем об отличиях этих направлений разработки, их особенностях и требованиям к программистам.

Девушка держит в руках картинку

«Фронтенд» и «бэкенд» неразрывно связаны. Эти направления разработки невозможно использовать по отдельности. Однако по видам выполняемых задач они кардинальным образом различаются. Ниже мы расскажем об отличиях этих направлений разработки, их особенностях и требованиям к программистам.

«Фронтенд»

Frontend включает разработку пользовательского интерфейса и опций его функционала. Анимация, текст, кнопки и прочие компоненты, присутствующие на каждом web-сайте, реализовываются посредством «фронтенд». Для выполнения этих задач применяется следующий инструментарий:

  • JS;
  • HTML;
  • CSS.

Чтобы увидеть структуру любой веб-страницы, достаточно вызвать консоль разработчика в браузере, нажав на клавиатуре кнопку F12. В открывшемся окне появятся строки кода, формирующие визуальную часть web-сайта. Они включают параметры шрифтов, изображений, размеров компонентов, всплывающих окон, анимации, звуков и все остального, с чем может работать пользователь. За все это отвечает перечисленный выше инструментарий.

Девушка сидит на стуле и смотрит на два монитора
Парень сидит на стуле в наушниках и листает код

HTML

База «фронтенда» — HTML. Эта аббревиатура расшифровывается, как язык гипертекстовой разметки. Его применяют для формирования внешнего вида веб-странички в браузере. Посредством данного инструмента программист создает структуру документа: заголовки, списки и прочие элементы форматирования.

CSS

Чтобы полноценно использовать HTML, программист должен освоить и каскадные таблицы стилей (CSS). Данный инструмент отвечает за формирование внешнего вида веб-страницы. Посредством CSS разработчик взаимодействует со шрифтами, цветом и размещением блоков документа. Каскадные таблицы стилей применяют для гармоничного оформления web-сайта. CSS выступает в качестве дополнения кода, написанного на HTML.

JS

Язык программирования JS используют для выполнения разных действий на веб-странице. Его применяют для добавления анимации и создания откликов на пользовательские запросы. Это может быть реакция на движение курсора, клики мышью, изменение поведения компонентов документа на действия юзеров. JS отвечает за получение и отправку данных на сервер. Реализовать эту опцию можно без перезагрузки страницы. что позволяет упростить решение многих задач. Например, опцию по отправке и получении ответов на сообщения. Освоив все основные инструменты «фронтенда», можно создавать любые визуализированные части интерфейса, а также выполнять другие функции.

«Бэкенд»

Многие уверены в том, что backend — более сложное направление разработки. Это связано с тем, что программист в своей работе не ориентируется на видимые компоненты пользовательского интерфейса. Его действия нацелены на формирование логики web-сайта. Юзеры не видят эту составляющую. Все вычисления происходят вне браузера пользователя. Запросы направляются на сервер. Далее они обрабатываются для последующего вывода данных в окне браузера. Логика web-сайта состоит в следующем:

  • Отправка данных от пользователя.
  • Их обработка на стороне сервера.
  • Передача ответа.

Инструменты backend-разработчика

У frontend-специалиста нет возможности выбирать инструментарий для своей работы. У его коллег из направления backend ситуация иная — выбор языка и прочих инструментов разработки зависит от сервера. Серьезных ограничений в этом плане нет. Backend-разработчики выбирают один из универсальных языков. Backend-разработчику также необходимо освоить один из инструментов управления реляционными базами. Выбрать можно любую из них. Наиболее распространенной считается MySQL. Однако есть и масса других решений: MongoDB, PostgreSQL и SQLite, каждое из них влияет на набор опций, которые нужны разработчику.

У frontend-специалиста нет возможности выбирать инструментарий для своей работы. У его коллег из направления backend ситуация иная — выбор языка и прочих инструментов разработки зависит от сервера. Серьезных ограничений в этом плане нет. Backend-разработчики выбирают один из универсальных языков. В их число входят:


  • Python;
  • Java;
  • PHP;
  • JS;
  • C#;
  • VB;
  • Go;
  • Ruby

Backend-разработчику также необходимо освоить один из инструментов управления реляционными базами. Выбрать можно любую из них. Наиболее распространенной считается MySQL. Однако есть и масса других решений: MongoDB, PostgreSQL и SQLite, каждое из них влияет на набор опций, которые нужны разработчику.

Несколько универсальных языков:

  • Python;
  • C#;
  • Java;
  • VB;
  • PHP;
  • Go;
  • JS;
  • Ruby

Взаимодействие «фронтенд» и «бэкенд»

Есть несколько базовых архитектур, которые определяют модели использования frontend и backend. В их число входят:

  • Универсальные приложения. Программисты используют в работе фреймворки и библиотеки, позволяющие исполнять приложения на клиентской и серверной стороне. Для этих целей применяются такие инструменты: Ember и React. Реализация перечисленных задач производится посредством AJAX и HTML.
  • Клиентские приложения. Для обновления страницы используют AJAX. Механизм часто применяется в фреймворках Ember и Angular. Принцип его работы простой. После сборки приложение направляется в браузер, все последующие изменения производятся на клиентской стороне. Связка выполняется посредством HTTP с применением XML- и JSON-ответами.
  • Применение AJAX. Архитектура, основанная на отправке запроса изнутри веб-странички, получает JSON- или XML-ответ. Для реализации этой структуры у сервера должна быть опция, отвечающая на запросы. Технологии SOAP и REST решают эту задачу.
  • Серверные приложения. На сервер направляются HTTP-запросы, после чего он дает ответ HTML-страничке. Для поиска информации в БД при этом используют такие шаблоны: Blade, Handlebars, ERB и EJS.
Ноутбук и монитор на которых изображён код
Пять кулаков образуют круг
Доска на которой рисуют маркерами

Современные тенденции

Два человека рисуют на доске схемы
Ноутбук за которым работают

В последнее время получили развитие тенденции, которые выходят за рамки традиционного «фронтенда» и «бэкенда». Рассмотрим наиболее интересные из них виды:

  • Размытые границы. Вычисления допустимо перемещать между backend и frontend. Их можно переносить как на серверную, так и на клиентскую сторону. Преимущества и недостатки есть у каждого из этих решений. Сервер считается более надежной средой, поскольку у него меньше число неизвестных. Однако для его стабильной работы необходимо подключение к сети. Юзерам, использующим свежие версии браузеров, удобнее взаимодействовать с клиентскими приложениями, поскольку они быстро выполняют большой объем работы. Кроме того, такие приложения отличаются привлекательным интерфейсом. Однако в этом случае можно оттолкнуть пользователей, не использующих последние версии браузеров и скоростное подключение к сети.
  • Легкий backend. Работать с серверной частью становится проще. Использование хранилищ документов и графовых БД снижает число запросов, необходимых для последующего агрегирования данных. Главная задача клиента заключается в уточнении того, какие конкретно данные запрашивает пользователь (БД графов), а также извлечение фрагментов информации, необходимых ему (REST API). Сейчас есть возможность разрабатывать backend-сервисы, работающие непостоянно. Для этого применяют бессерверные архитектуры. Наиболее наглядным их примером является AWS Lambda.
  • Автономный frontend. Прогрессивным приложениям подключение к интернету будет требоваться все меньше. Они загружаются один раз. В дальнейшем их можно использовать практически без ограничений. При этом БД можно хранить прямо в браузере. Для некоторых прогрессивных приложений загрузка серверной части понадобиться только один раз. В дальнейшем будет лишь возникать необходимость в обеспечении защиты и синхронизации данных. Подход основан на размещении большей части логики web-приложения на клиентской стороне.

Заключение

Frontend и Backend тесно связаны, но имеют и много существенных отличий. Необходимо более глубоко изучить эти направления, чтобы выбрать путь своего развития, как IT-специалиста. Также можно стать Full-stack разработчиком. Это специалист, умеющий одинаково хорошо работать с клиентской и с серверной стороной. Чтобы стать таким разработчиком, нужно потратить значительно больше времени и сил, чем в случае с освоением «фронтенд» или «бэкенд» по отдельности.