Введение в фронтенд и бэкенд – основы веб-разработки

0
2403
views

Nuances of programming представил перевод статьи Kevin McGillivray: Introduction to the «Frontend» and «Backend»—Web Development Fundamentals

Основы веб-разработки

Хотите создать веб-сайт?

Здорово! Создание веб-сайта — плодотворный творческий проект, увлекательный и полезный как для приобретения востребованных навыков, так и отличный способ попробовать себя в новом деле и поделиться опытом с большим числом людей (ну или просто несколькими знакомыми).

Как правило, приступая к созданию сайта, отправной точкой становится знакомство с HTML и CSS — и это лучшее начало!

Однако вместе с тем давайте разберемся, как устроена работа веб-сайтов изнутри. Системный взгляд поможет глубже разобраться как в конкретных, так и общих вопросах веб-разработки.

Фронтенд и бэкенд

Два слова для понимания работы веб-сайтов, которые возможно вы уже слышали раньше – Фронтенд и бэкенд. Часто они рассматриваются (и преподаются) раздельно — как два направления, но оба важных и тесно связанных друг с другом в большинстве проектов.

Говоря по-простому, фронтенд — это любой код, который выполняется браузером, а бэкенд – любой код, выполняемый сервером.

Сервер

Роль бэкенд-кода для сервера на первый взгляд проста:

  1. Перехватывать запросы.
  2. Отвечать на запросы.

Самый распространенный пример — запрос на доступ к домашней странице веб-сайта. Получив такой запрос сервер отправляет в ответ на него HTML, CSS, JavaScript, изображения и другие файлы, связанные с этой страницей.

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

Сформированные ответы также могут принимать различные формы. Быть простыми, как старые-добрые HTML и CSS-файлы или же файлы изображений и аудиозаписи, или файлы данных, например, JSON.

Бэкенд-код пишется на разных языках программирования. Ruby, PHP, Python, Java и JavaScript — самые распространенные. бэкенд, помимо написания кода, на котором сайт работает, часто включает в себя и то, что принято назвать задачами «системного администратора», к которым относятся установка серверных инструментов, настройка баз данных и т.д.

Изучение языков программирования для бэкенда открывает доступ к функциональным возможностям дальнейшего применения веб-сайта. Например, взяв статическую страницу, вы сможете добавить различные способы взаимодействия с сайтом. Кратчайшим путем в бэкенд-разработку сначала будет изучение одного из перечисленных языков программирования, а в дальнейшем — изучение бэкенд-фреймворков или систем управления контентом на одном из языков программирования, например, Ruby on Rails (Ruby), Express (JavaScript), WordPress (PHP), Laravel (PHP), Django (Python) и так далее.

Браузер

Хотя ответ с сервера может принимать различные формы, давайте вернемся к нашему примеру с обобщенным запросом веб-страницы. После обработки запроса сервер выдает ответ в виде набора HTML, CSS и JavaScript-файлов наряду с дополнительными данными, которые могут требоваться запрашивающему.

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

Главная роль фронтенда заключается в следующем:

  1. Запрашивать информацию (данные, файлы и т.д.) бэкенда.
  2. Отображать или визуализировать эту информацию.
  3. Перехватывать входные данные пользователя (клики, трафик, скроллинг, наведения курсора, ввод с клавиатуры, голосовые команды и т.д.).
  4. Отвечать на данные пользователя.

Относительно первого пункта – большинство запросов обрабатываются браузером при нажатии ссылки или вводе нового URL-адреса. Новая информация также может быть запрошена браузером с помощью JavaScript-кода уже после того, как страница будет загружена в браузер.

Отображение определяется обработкой HTML и CSS в браузере. HTML-код сообщает браузеру о структуре и содержимом страницы, а CSS – о том, как отобразить все ее на экране.

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

Написание HTML, CSS и JavaScript-кода для браузера – это и есть фронтенд-программирование. Написание этого кода часто зависит от методов бэкенд-обработки данных, поэтому оба этих два тесно взаимосвязаны.

Имеется большое количество библиотек, фреймворков и других инструментов для фронтенда, начиная с простого HTML, CSS и JavaScript до таких инструментов, как jQuery, React и Angular, но при этом роль фронтенда не зависит от того, какой инструмент используется. Инструменты – лишь способы решения задач.


Мир веб-разработки – это широчайшее поле для исследований и изучения. Откуда бы вы ни начали путь, имея представление о фронтенде и бэкенде и том, для чего они служат, вы всегда сможете сделать следующий шаг. Не знаете, с чего начать? Рекомендую попробовать и то и другое, и уже исходя из личного опыта, вкусов и предпочтений двигаться дальше!



ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here