Узнаем разницу между термином фронтенд и бэкенд…
Прежде чем приступать к изучению какой-либо технологии, сперва важно разобраться, что именно означает термин «полный стек».
Стек, или stack — это не только абстрактный тип данных или их структура, а еще и набор технологий, инструментов, языков программирования, которым владеет специалист
И если вы хотите стать full-stack разработчиком, необходимо изначально знать отличия фронтэнда от бэкэнда. Разберем их на примере сайта.
Любой сайт состоит из двух частей:
- Front-end (клиентская часть). Это внешний вид приложения, вы его видите.
- Back-end (серверная часть). Это внутренняя часть приложения. Она не видна пользователю.
Сначала поговорим о фронтенде.
Frontend
Вы посещаете сайт. Все, что видно в окне браузера, на странице сайта — это front-end, будь то веб-страница, ее макет, различные стили, изображения, кнопки, текст и так далее.
Внешний интерфейс веб-приложения (в нашем случае это сайт), обычно, разрабатывается с использованием следующих технологий: HTML, CSS, JS.
Поговорим о каждой из этих и других технологиях подробнее.
HTML
Язык разметки гипертекста позволяет добавлять текст, заголовки, абзацы и т.д. Используя HTML можно создать простую страницу, которая будет выглядеть примерно так:
CSS
Страница выше выглядит по-спартански просто и нет никаких шансов, что сайт кому-то понравится. Но есть CSS.
Каскадные таблицы стилей позволяют сделать нужное оформление
Вот как выглядит веб-страница, стилизованная с помощью CSS:
Но эта же страница, при загрузке в браузере смартфона, будет выглядеть ужасно. Здесь на помощь и приходит фреймворк bootstrap.
Bootstrap
Позволяет создавать отзывчивые сайты, которые корректно выводятся на всех размерах экрана.
Вот как отзывчивый сайт адаптируется к размерам экрана веб-браузера и экрану мобильного телефона:
Сайт с отзывчивым дизайном красив и читаем на любом устройстве.
Хорошо, сайт выглядит потрясающе. Но это еще не все. Ему не хватает интерактивности. Кнопки есть, но пока — они ничего не делают.
JavaScript
Для добавления интерактивности на фронт-энде мы используем язык программирования на стороне клиента — JavaScript.
С помощью JavaScript можно взаимодействовать с сайтом с помощью клавиатуры или мыши
Именно JS делает сайт живым, интерактивным. Изучив JavaScript, вы сможете создавать простые внешние приложения, например, калькулятор:
Все в порядке, теперь мы закончили говорить об инструментах для создания внешней части сайта. Переходим к бэкенду.
Back-end (серверная часть)
Предположим, нужно создать сложное приложение, например, банковскую систему, в которой необходимо регистрировать и хранить тысячи транзакций каждый день.
Чтобы создать такой сайт, можно использовать уже знакомую нам троицу (HTML, CSS и JS) — для внешнего интерфейса
Но вот как именно хранить данные пользователей? Здесь-то и понадобятся базы данных — для записи всех этих транзакций. Это как центральное место, где хранятся все данные сайта.
Как работает бэкенд
Внутренняя часть веб-приложения (или бэкенд) не только отвечает за хранение данных о пользователях и транзакциях, но и должна быть способна обслуживать веб-страницы — по запросу. Например, когда пользователь хочет просмотреть свою транзакцию, он может посетить URL-адрес типа: «https://www.sberbabka.ru/mytransactions»
Когда пользователь это сделает, сервер должен вернуть веб-страницу — с деталями транзакции этого конкретного человека.
Подобно вышеупомянутому запросу URL, тысячи пользователей могут делать различные запросы к серверу, и сервер отвечает за обслуживание всех этих запросов.
Зачем и для чего нужны языки программирования в бэкенде
Ка же запрограммировать сервер, чтобы он мог обрабатывать запросы пользователей и обслуживать их? Именно здесь в игру вступают языки программирования: Python, PHP, C#, Ruby, Perl, Java.
Можно использовать любой из языков программирования сервера. Чаще всего языки задействуют для обработки и обслуживания входящих запросов
Указанные выше языки позволяют не только обрабатывать запросы, но и делать запросы к базе данных — для получения информации, а также сохранять информацию в такой БД.
Зачем нужны фреймворки
Однако, есть одна проблема: программирование сервера с нуля — это сложно, долго и неудобно. Вот тут-то в игру и вступают фреймворки back-end. О
Фреймворки позволяют создать веб-приложение гораздо быстрее
И каждый язык программирования имеет соответствующие фреймворки.
- В Python — есть Django, Flask и т.д.
- PHP — это CodeIgniter, cakePHP, Aura и т.д.
- C# — .NET
- Ruby — Rails.
- Java — Spring.
Эти фреймворки позволяют не только создавать веб-приложения, ориентированные на работу с БД, но и обрабатывать сложные вещи (например, аутентификацию).