Nuances of programming представил перевод статьи Kevin McGillivray: Introduction to the «Frontend» and «Backend»—Web Development Fundamentals
Хотите создать веб-сайт?
Здорово! Создание веб-сайта — плодотворный творческий проект, увлекательный и полезный как для приобретения востребованных навыков, так и отличный способ попробовать себя в новом деле и поделиться опытом с большим числом людей (ну или просто несколькими знакомыми).
Как правило, приступая к созданию сайта, отправной точкой становится знакомство с HTML и CSS — и это лучшее начало!
Однако вместе с тем давайте разберемся, как устроена работа веб-сайтов изнутри. Системный взгляд поможет глубже разобраться как в конкретных, так и общих вопросах веб-разработки.
Фронтенд и бэкенд
Два слова для понимания работы веб-сайтов, которые возможно вы уже слышали раньше – Фронтенд и бэкенд. Часто они рассматриваются (и преподаются) раздельно — как два направления, но оба важных и тесно связанных друг с другом в большинстве проектов.
Говоря по-простому, фронтенд — это любой код, который выполняется браузером, а бэкенд – любой код, выполняемый сервером.
Сервер
Роль бэкенд-кода для сервера на первый взгляд проста:
- Перехватывать запросы.
- Отвечать на запросы.
Самый распространенный пример — запрос на доступ к домашней странице веб-сайта. Получив такой запрос сервер отправляет в ответ на него 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-файлов наряду с дополнительными данными, которые могут требоваться запрашивающему.
Браузер получает и обрабатывает эти файлы. Программный код этих файлах является фронтендом, поскольку работает на стороне браузера.
Главная роль фронтенда заключается в следующем:
- Запрашивать информацию (данные, файлы и т.д.) бэкенда.
- Отображать или визуализировать эту информацию.
- Перехватывать входные данные пользователя (клики, трафик, скроллинг, наведения курсора, ввод с клавиатуры, голосовые команды и т.д.).
- Отвечать на данные пользователя.
Относительно первого пункта – большинство запросов обрабатываются браузером при нажатии ссылки или вводе нового URL-адреса. Новая информация также может быть запрошена браузером с помощью JavaScript-кода уже после того, как страница будет загружена в браузер.
Отображение определяется обработкой HTML и CSS в браузере. HTML-код сообщает браузеру о структуре и содержимом страницы, а CSS – о том, как отобразить все ее на экране.
И браузер, и JavaScript-код веб-страницы обеспечивают визуальное взаимодействие пользователя с изображением сайта на дисплее и отвечают на его реакции с помощью встроенных функций браузера или посредством пользовательских настроек JavaScript.
Написание HTML, CSS и JavaScript-кода для браузера – это и есть фронтенд-программирование. Написание этого кода часто зависит от методов бэкенд-обработки данных, поэтому оба этих два тесно взаимосвязаны.
Имеется большое количество библиотек, фреймворков и других инструментов для фронтенда, начиная с простого HTML, CSS и JavaScript до таких инструментов, как jQuery, React и Angular, но при этом роль фронтенда не зависит от того, какой инструмент используется. Инструменты – лишь способы решения задач.
Мир веб-разработки – это широчайшее поле для исследований и изучения. Откуда бы вы ни начали путь, имея представление о фронтенде и бэкенде и том, для чего они служат, вы всегда сможете сделать следующий шаг. Не знаете, с чего начать? Рекомендую попробовать и то и другое, и уже исходя из личного опыта, вкусов и предпочтений двигаться дальше!
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]