Привет! Сегодня мы поговорим о том что такое Фронтенд и Бекенд, а также попробуем определится, что же из этого учить нам с вами?!
Для любителей видеоуроков, вот он! Для читателей, скрольте ниже )
Что такое Front-End (frontend или фронтенд) или просто Фронт…
Как можно в принципе догадаться из названия, фронтенд это то, что на «фронте» то есть спереди, то есть видимо! По факту, это именно то что мы видим в своем браузере загружая любой сайт. То с чем мы как юзер взаимодействуем (ссылки, картинки, кнопки, видосики и т.д.)
Если мы возьмем к примеру какой-нибудь простой сайт, лендинг, или сайт визитку например, которые призваны просто показать нам продукт и которые не работают с данными пользователя (поиск, логин, сохранение и обработка данных юзера и т.д) то они могут и не иметь Бэкенд части (обсудим дальше), а состоять просто из Фронтенд части.
Технологии которые используют форнтенд разработчики:
- HTML — это текст, описывающий структуру страницы, его блоки (это кости нашего UI юзер интерфейса), тут мы описываем мол, этот блок вложен в этот, а в этом блоке будет картинка
- CSS — это текстовый файл который описывает, где будут размещается на экране HTML блоки, какими свойствами обладать, и как будут выглядеть. Размер блока, шрифт, цвет и т.д. задается в стилях CSS (каскадные таблицы стилей). Это кожа и одежда нашего сайта.
- JS (JavaScript) — это текстовые файлы, которые заставляют наш сайт делать хоть что то. Заставляют кнопочки реагировать на нажатия и еще черта лысого… Без этого, наш сайт просто «Кожа на костях» вид имеет, но ничего не может сделать.
Если в 2ух словах, то фронтенд — это все с чем может взаимодействовать пользователь напрямую. Это наш юзер интерфейс.
Что такое Back-End (Backend, бэкенд или просто Бэк)
Если с фронтом, мы можем взаимодействовать напрямую (нажимая на ссылки и кликая на кнопушки) то Бэк, это то, что обрабатывает наши данные, то что работает на серверах, и то о существовании чего мы можем даже не догадыватся)))
Например, вам надо зайти по ссылке на сайт Вконтакте, то что делает ваш браузер общаясь с сервером выглядит так.
- Ваш браузер, принял ссылку, и шлет на сервер запрос с просьбой показать страницу, к запросу прикрепляет специальную строку cookie (пиченьки)
- Сервер (Бэкенд), получив запрос, изучает «Пиченьку» на то, были ли вы авторизованы на этом сайте ранее, и как давно
- Если вы небыли авторизованы или «время жизни» cookies закончилось, Бэкенд поймет, что пускать вас по ссылке нельзя, и отправит браузер ответ — «покажи страницу логина для авторизации, вот ее адрес»
- Браузер переведет вас на страницу ввода логина и пароля, где вы, взаимодействуя с Фронтом (кнопкой отправить и текстовыми полями) вновь отправите данные на сервер к бэкенду
- Бэкенд запросит у базы данных есть ли совпадения логина и пароля, если есть, перенаправит на нужную вам страницу сохранив новую куку (именно благодаря им сервер понимает кто прислал запрос)
- Бэкенд заполнит запрошенную страницу данными по шаблону и отдаст вашему браузеру.
В двух словах, Бэкенд это «Бизнес логика». Он занимается обработкой информации, фильтрацией, хранением информации в базах данных и в файловой системе сервера, обменом информацией с другими сайтами и много много другое.
Технологии которые используют Back-End разработчики
- PHP, NodeJs, .Net, Python или Ruby — или любой другой серверный язык программирования (Один из) мы будем изучать именно PHP как самый легкий
- sql — Это язык для общения вашей программы с базами данных, например MySql или SqLite
- Docker, nginx, apache — эти технологии просто помогают нам запустить сервер на нашем компьютере или любом другом компьютере в сети.
Выводы
Бэкенд и Фронтенд — это две стороны одной медали. Они вместе, дают нам не ограниченные возможности по работе с данными и обработке любой информации.
Как выбрать что больше нравится? Спешу огорчить, хоть немного знать придется и то и то, что то в большей степени, что то в меньшей.
Что делает Front-End Developer — он принимает у дизайнера картинку сайта, и делает из картинки полностью работоспособный Юзер Интерфейс UI который готов слать информацию на сервер.
Back-End Developer — пишет программы принимающие запросы, обрабатывающие инфу, хранящие ее, а так же, которые наполняют Frontend шаблоны информацией и еще многое много другое.
Надеюсь хоть что то объяснил нормально))) Пишите ваши комментарии, мы обязательно их разберем в следующих уроках.