Фронтенд и бэкенд: в чем разница между ними

Узнаем разницу между термином фронтенд и бэкенд…

Прежде чем приступать к изучению какой-либо технологии, сперва важно разобраться, что именно означает термин «полный стек».

Стек, или stack — это не только абстрактный тип данных или их структура, а еще и набор технологий, инструментов, языков программирования, которым владеет специалист

И если вы хотите стать full-stack разработчиком, необходимо изначально знать отличия фронтэнда от бэкэнда. Разберем их на примере сайта.

Любой сайт состоит из двух частей:

  • Front-end (клиентская часть). Это внешний вид приложения, вы его видите.
  • Back-end (серверная часть). Это внутренняя часть приложения. Она не видна пользователю.

Сначала поговорим о фронтенде.

Frontend

Вы посещаете сайт. Все, что видно в окне браузера, на странице сайта — это front-end, будь то веб-страница, ее макет, различные стили, изображения, кнопки, текст и так далее.

Внешний интерфейс веб-приложения (в нашем случае это сайт), обычно, разрабатывается с использованием следующих технологий: HTML, CSS, JS.

Поговорим о каждой из этих и других технологиях подробнее.

HTML

Язык разметки гипертекста позволяет добавлять текст, заголовки, абзацы и т.д. Используя HTML можно создать простую страницу, которая будет выглядеть примерно так:

Специально для Вас:  Частота 5g в России: мысли вслух
Сайт без стилей
Сайт без стилей

CSS

Страница выше выглядит по-спартански просто и нет никаких шансов, что сайт кому-то понравится. Но есть CSS.

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

Вот как выглядит веб-страница, стилизованная с помощью CSS:

Десктопный дизайн веб-страницы
Десктопный дизайн веб-страницы

Но эта же страница, при загрузке в браузере смартфона, будет выглядеть ужасно. Здесь на помощь и приходит фреймворк bootstrap.

Bootstrap

Позволяет создавать отзывчивые сайты, которые корректно выводятся на всех размерах экрана.

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

Отзывчивый дизайн сайта решает все проблемы
Отзывчивый дизайн сайта решает все проблемы

Сайт с отзывчивым дизайном красив и читаем на любом устройстве. 

Хорошо, сайт выглядит потрясающе. Но это еще не все. Ему не хватает интерактивности. Кнопки есть, но пока — они ничего не делают.

JavaScript

Для добавления интерактивности на фронт-энде мы используем язык программирования на стороне клиента — JavaScript.

С помощью JavaScript можно взаимодействовать с сайтом с помощью клавиатуры или мыши

Именно JS делает сайт живым, интерактивным. Изучив JavaScript, вы сможете создавать простые внешние приложения, например, калькулятор:

Специально для Вас:  Лучшие IT-вакансии 2024 года: профессии, которые будут востребованы в этом году
Простейший калькулятор, созданный на JS
Простейший калькулятор, созданный на JS

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

Back-end (серверная часть)

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

Чтобы создать такой сайт, можно использовать уже знакомую нам троицу (HTML, CSS и JS) — для внешнего интерфейса

Но вот как именно хранить данные пользователей? Здесь-то и понадобятся базы данных — для записи всех этих транзакций. Это как центральное место, где хранятся все данные сайта.

Как работает бэкенд

Внутренняя часть веб-приложения (или бэкенд) не только отвечает за хранение данных о пользователях и транзакциях, но и должна быть способна обслуживать веб-страницы — по запросу. Например, когда пользователь хочет просмотреть свою транзакцию, он может посетить URL-адрес типа: «https://www.sberbabka.ru/mytransactions»

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

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

Специально для Вас:  Топ-3 расширения ВКонтакте для анализа сообщений: обзор лучших

Зачем и для чего нужны языки программирования в бэкенде

Ка же запрограммировать сервер, чтобы он мог обрабатывать запросы пользователей и обслуживать их? Именно здесь в игру вступают языки программирования: Python, PHP, C#, Ruby, Perl, Java.

Можно использовать любой из языков программирования сервера. Чаще всего языки задействуют для обработки и обслуживания входящих запросов

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

Зачем нужны фреймворки

Однако, есть одна проблема: программирование сервера с нуля — это сложно, долго и неудобно. Вот тут-то в игру и вступают фреймворки back-end. О

Фреймворки позволяют создать веб-приложение гораздо быстрее

И каждый язык программирования имеет соответствующие фреймворки.

  • В Python — есть Django, Flask и т.д.
  • PHP — это CodeIgniter, cakePHP, Aura и т.д.
  • C# — .NET
  • Ruby — Rails.
  • Java — Spring.

Эти фреймворки позволяют не только создавать веб-приложения, ориентированные на работу с БД, но и обрабатывать сложные вещи (например, аутентификацию).

Leave a Comment

Ваш e-mail не будет опубликован. Обязательные поля помечены *

МирДоступа Яндекс.Метрика