Встречают по одежке, провожают по уму: Back vs Front

Встречают по одежке, провожают по уму:
Back vs Front

IT, IT, IT — слышится со всех сторон. В интернете всплывают шутки про противостояние фронта и бэка, разные всякие HTML, Python, CSS. Мы расскажем, что это такое и как научиться понимать шутки.

ВСТРЕЧАЮТ ПО ОДЕЖКЕ
FRONTEND

Читатель

Окей Спутник, что такое фронтенд?

Спутник AI

Фронтенд – это разработка пользовательского интерфейса и функций, которые работают на клиентской стороне веб-сайта или приложения…

Читатель

Окей Спутник, а можно простыми словами?

Спутник AI

Хорошо, сейчас объясню!

Ты открываешь браузер и сразу видишь… Да все, что ты видишь — это работа фронтенд-разработчика. То, где располагается поисковая строка, какой она длины на ноутбуке, телефоне, планшете. Запуск поиска через нажатие Enter или стрелочки. Создание всплывающих окон с подсказками. Анимация постепенного появления текста на странице. Все это — работа фронтендщика. Но давайте немного углубимся в то, как это создается. В этом направлении разработки есть три уровня.

HTML

Начнем с первого: текст, картинки, аудио, видео, ссылки. Для того, чтобы все это появилось на странице, нам нужно разметить ее — через особые слова-теги указать, что мы хотим увидеть. Например, через <h1>Текст</h1> можно создать заголовок, а через <i>текст</i> задать курсив. Как вы могли заметить, многие теги открываются и закрываются. Таким образом создается наполнение страницы.

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


<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок страницы</title>
  </head>
  <body>
    <h1>Заголовок первого уровня</h1>
    <p>Абзац текста</p>
    <ul>
      <li>Элемент списка 1</li>
      <li>Элемент списка 2</li>
      <li>Элемент списка 3</li>
    </ul>
  </body>
</html>

Как исполняется код

CSS

Начнем с первого: текст, картинки, аудио, видео, ссылки. Для того, чтобы все это появилось на странице, нам нужно разметить ее — через особые слова-теги указать, что мы хотим увидеть. Например, через <h1>Текст</h1> можно создать заголовок, а через <i>текст</i> задать курсив. Как вы могли заметить, многие теги открываются и закрываются. Таким образом создается наполнение страницы.


<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок страницы</title>
    <style>
      .red {
        color: red;
      }
      .green {
        color: green;
      }
      .blue {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>Заголовок первого уровня</h1>
    <p>Абзац текста</p>
    <ul>
      <li class="red">Элемент списка 1</li>
      <li class="green">Элемент списка 2</li>
      <li class="blue">Элемент списка 3</li>
    </ul>
  </body>
</html>

Как исполняется код

JavaScript

Здесь чуть сложнее, это полноценный язык программирования, который нужно хорошо знать, чтобы оперировать всеми возможными инструментами: анимация, запуск аудио, запуск сторонних скриптов (мини-программ), которые выполняют важные функции (операции) и получают информации от них. Этот язык реагирует, когда пользователь кликает на что-то, пролистывает страницу, наводит курсор, заполняет форму.


<html>
  <head>
    <title>Увеличение элементов списка</title>
    <style>
    /* Настройка цвета надписи */
      .red {
        color: red;
      }
      .green {
        color: green;
      }
      .blue {
        color: blue;
      }
      /* Настройка исходного размера надписи */
      li {
        font-size: 16px;
      }
      /* Настройка размера надписи при наведении */
      li:hover {
        font-size: 24px;
      }
    </style>
  </head>
  <body>
    <h1>Заголовок первого уровня</h1>
    <p>Абзац текста</p>
    <ul>
      <li class="red">Элемент списка 1</li>
      <li class="green">Элемент списка 2</li>
      <li class="blue">Элемент списка 3</li>
    </ul>
  </body>
</html>

Как исполняется код

Ctrl+Shift+I

Это волшебное сочетание клавиш, которое открывает для пользователей режим разработчика, где можно увидеть, как взаимодействуют друг с другом CSS, HTML и JavaScript. Там же можно изменять заголовки и стили, ссылки на элементы. Однако, это все исчезнет с перезапуском. Хотя вы всегда можете написать код в Блокноте, а затем переименовать документ, изменив формат с .txt на .html, что позволит вам создавать свои страницы.

ПРОВОЖАЮТ ПО УМУ
BACKEND

Читатель

Окей Спутник, с фронтендом разобрался, а что такое бэкенд?

Спутник AI

Бэкенд – это компонент программного обеспечения, который отвечает за обработку и хранение данных, обеспечивает бизнес-логику, и… Да шучу я, сейчас все объясню.

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

Если фронтенд чаще всего ограничивается перечисленными инструментами, а также фреймворками — упрощающими работу дополнениями, то бэкенд может использовать огромное разнообразие языков. Сейчас наиболее востребованы Python, Java, Go, все еще популярен PHP. Иногда бэкенд пишут на C# и Ruby. JavaScript тоже подходит для бэкенда — его часто выбирают для изучения те, кто перешел из фронтенда. Давайте рассмотрим некоторые языки.

Python

Python является одним из самых легких языков программирования. Если ты знаешь английский язык хотя бы на базовом уровне, то интуитивно будешь понимать функции find (), sorted (), print (). Но в то же время, этот язык уступает в скорости другим популярным языкам.

Язык очень простой и многие программисты относятся к питонистам достаточно скептически. Ещё одно особенностью языка являются пробелы — они неотъемлемое составляющее кода. Другие же языки часто не обращают внимания на пробелы и их ставят исключительно для лёгкости чтения.

Для примера мы покажем, как вывести фразу «Привет от Спутника студента!» на разных языках.


print("Привет от Спутника студента!")

Java

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


public class Main {
  public static void main(String[] args) {
    System.out.println("Привет от Спутника студента!");
  }
}

Ruby

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


puts "Привет от Спутника студента!"

ПОДВОДИМ ИТОГИ

FRONT
BACK
Основная задача
Фронтенд отвечает за то, как пользователи видят и взаимодействуют с сайтом или приложением. К этому относится отображение текста, изображений, форм, кнопок и других элементов интерфейса, а также обработку действий пользователя, таких как нажатие кнопок.
Основная задача
Бэкенд занимается логическими функциями и обработкой данных, что невидимо для пользователя. Это может включать в себя управление базами данных, процесс авторизации пользователя и многое другое.
Технологии
Фронтенд-разработчики работают с технологиями, такими как HTML (для структуры страницы), CSS (для визуального стиля) и JavaScript (для интерактивности).
Технологии
Бэкенд-разработчики могут выбирать из множества языков программирования, их выбор зависит от требований проекта. Это может включать в себя языки, такие как Python, Java, Ruby, и другие.
Изменчивость
Мир фронтенда постоянно меняется, и разработчики должны следить за новыми технологиями и трендами. Это включает в себя изучение новых библиотек и фреймворков.
Стабильность
Бэкенд-разработка обычно менее подвержена радикальным изменениям, и разработчики могут работать по привычным схемам долгое время.
Низкий порог входа
Начать работать в фронтенде довольно просто, и для этого не требуется глубоких знаний программирования.
Высокий порог входа
Для того чтобы начать работать в бэкенде, разработчики должны освоить больше информации, включая математику, базы данных и алгоритмы.
Контакт с другими специалистами
Фронтенд-разработчики часто сотрудничают с дизайнерами, маркетологами и менеджерами продукта для создания пользовательских интерфейсов.
Контакт с другими специалистами
Бэкенд-разработчики часто взаимодействуют с аналитиками, продакт-менеджерами и фронтенд-разработчиками для обеспечения работоспособности всего приложения.

ДЛЯ КОГО ЧТО

FRONT

• Готов много общаться о продукте с людьми, которые плохо знают, как устроено программирование;

• Хочет видеть результаты своей работы сразу: реализация задумки дизайна или анимации;

• Готов постоянно и много учиться.

BACK

• Предпочитает более «техническое», математически сложное программирование, готов разбираться в алгоритмах;

• Не хочет объяснять работу своих программ не программистам;

• Готов «быть в тени» фронтендщика;

• Готов потратить много времени на изучения разных языков программирования перед стартом карьеры;

• Хочет иметь выбор между разными языками программирования для реализации разных задач;

• Хочет работать с более стабильными технологиями, которые не меняются по несколько раз в год.

Текст: Дутов Дмитрий
Верстка: Дутов Дмитрий
Октябрь 2023