Стать web программистом (урок 1) — Front-End и Back-End. Что учить?

Привет! Сегодня мы поговорим о том что такое Фронтенд и Бекенд, а также попробуем определится, что же из этого учить нам с вами?!

Для любителей видеоуроков, вот он! Для читателей, скрольте ниже )

Видеоурок с шуточками и водичкой)

Что такое 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 шаблоны информацией и еще многое много другое.

Надеюсь хоть что то объяснил нормально))) Пишите ваши комментарии, мы обязательно их разберем в следующих уроках.

Добавить комментарий