Что такое Фронтенд и Бэкенд?

Категория: Что такое?

– Автор: Игорь (Администратор)

Практически каждый слышал такие термины как "фронтенд" и "бэкенд". Просто потому что они используются как альтернатива таких понятий как "пользовательский интерфейс" и "серверная часть", и потому что информационные технологии уже обыденны в нашей жизни. Утрируя, многих ли вы людей видели в очереди за ЖКХ в текущее время? А сами когда в последний раз стояли в очереди за подобными вещами? Собственно, о том, что эти термины значат, как взаимодействуют и прочих нюансах, и пойдет речь в данном обзоре.

Но обо всём по порядку.

Фронтенд и Бэкенд это

Фронтенд (frontend) - это пользовательский интерфейс некой информационной системы или программного обеспечения. К фронтенду относится всё то, что пользователи видят и с чем взаимодействуют (менюшки, картинки, списки, кнопки, красивая анимация и т.д.).

Бэкенд (backend) - это внутренняя часть некой информационной системы или программного обеспечения. К бэкнду относится всё то, что скрыто от пользователя, но что реализует основную логику (различные расчёты, формирование данных и т.д.).

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

Чтобы было ещё понятнее, рассмотрим жизненную аналогию. Скажем, микроволновая печь. Что является её фронтендом? Стильный корпус, панелька с кнопками, разные индикаторы, внутреннее пространство, где размещается еда (пользовательские данные, которые потом бэкендом преобразуются во "вкусняшку"). Что является бэкендом? Магнетрон (СВЧ-излучатель), разные провода, микросхемы и прочее, что не видно пользователю, но без чего нельзя "сварганить кулинарный изыск".

Как взаимодействуют фронтенд и бэкенд?

Разберём взаимодействие фронтенда и бэкенда на примере веб-сайта:

1. Вы открываете браузер и указываете какой-то веб-сайт.

2. Браузер обращается к бэкенду сайта (серверной части).

3. Бэкенд сайта формирует некие данные и фронтенд (интерфейс).

4. Браузер отображает фронтенд пользователю.

5. Вы что-то делаете в веб-страничке, наслаждаетесь красивой анимацией и так далее.

6. Захотели что-то найти. Вводите поисковую фразу в поле веб-страницы и нажимаете кнопку "Искать".

7. Фронтенд через браузер отсылает запрос бэкенду "Найти то, что соответствует поисковой фразе".

8. Бэкенд находит что-то и отправляет пользователю фронтенд с результатами.

И так далее.

Т.е. иными словами, пользователь сам напрямую не взаимодействует с бэкендом (серверная часть), он осуществляет это через фронтенд (интерфейс). При этом стоит понимать, что технологии уже давно стали более развитыми и фронтенд не всегда нужно формировать при каждом действий. Скажем, в интернете веб-сайты часто используют технологию AJAX, которая позволяет посылать запросы только для получения данных от бэкенда.

Какие языки программирования используются во фронтенде и бэкенде веб-сайтов?

Начну с фронтенда веб-сайтов. По большому счёту, это связка из HTML, CSS и JavaScript.

HTML - это специальный язык разметки, который используется для определения расположения и наполнения частей веб-страницы (документа). Т.е. из чего интерфейс складывается. Абстрактно, 5 кнопок и 10 выпадающих списков в такой-то последовательности.

CSS - это специальный язык стилей, который задает отображение и вид отдельных частей веб-страницы. Т.е. как наполнение интерфейса должно отображаться. Абстрактно, как каждая кнопка должна выглядеть и тому подобное.

JavaScript - это скриптовый язык программирования, который позволяет браузеру действовать в соответствии с той логикой, которая предусмотрена в сайте. Абстрактно, как должна происходить анимация, что и как нужно делать браузеру, когда пользователь нажал кнопку, и т.п.

Если же касаться бэкенда, то тут достаточно большой спектр языков программирования, так как это серверная часть. Утрируя, что там внутри "шайтан-машинки" пользователям и не нужно знать. Это PHP, Java, Ruby, Go, C#, Python, JavaScript (Node.js - серверный вариант языка) и так далее. Так же бэкенд часто подразумевает базы данных, такие как MySQL, PostgreSQL и так далее.

Несколько нюансов фронтенда и бэкенда

Хоть фронтенд и бэкенд, в общем-то, различаются, вычисления могут производиться как в одном, так и в другом. Например, нередко часть расчётов табличных данных выполняется с помощью JavaScript во фронтенде, особенно если таблица редактируема. Т.е. бэкенд выполняет расчёт каких-то предварительных данных, остальное же делает фронтенд. Может быть и такое, что серверная часть вообще только исходные данные возвращает, а интерфейс выполняет все расчёты.

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

Верно и аналогичное. Скажем, онлайн сервис может быть без фронтенда и только предоставлять данные пользователям через API. В данном случае фронтенд и не нужен. Интерфейс же реализуется другими, теми, кто будет подключаться к бэкенду (онлайн-сервису).

Ещё один интересный момент, связанный с веб-сайтами. Нередко под фронтендом подразумевают только клиентскую часть (то, что видит обычный пользователь), админскую же часть так и называют админкой, хотя, чисто технически, интерфейс админки так же является фронтендом.

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

Понравилась заметка? Тогда время подписываться в социальных сетях и делать репосты!