Введение в серверную часть

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

Перед стартом: Базовая компьютерная грамотность. Базовое понимание, что такое веб-сервер.
Цель: Приобрести уверенные знания о том, что такое программирование серверной части, на что оно способно и чем отличается от программирования клиентской части.

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

В современном мире веб-разработки знания о программировании серверной части настоятельно рекомендуемы.

Что такое программирование серверной части сайта?

Веб браузеры взаимодействуют с веб-серверами при помощи гипертекстового транспортного протокола (HTTP). Когда вы нажимаете на ссылку на веб-странице,  заполняете форму или запускаете поиск,  HTTP запрос  отправляется из вашего браузера на целевой сервер. Запрос включает в себя URL, определяющий  затронутый ресурс, метод, определяющий требуемое действие (например, получить, удалить или опубликовать ресурс) и может включать дополнительную информацию, закодированную в параметрах URL (пары поле-значение, оправленные как строка запроса), как POST запрос (данные, отправленные в формате HTTP POST), или в  куки-файлах.

Веб серверы ожидают сообщений с клиентскими запросами, обрабатывают их по прибытию и отвечают веб=браузеру при помощи ответного HTTP сообщения. Ответ содержит строку состояния, показывающую, был ли запрос успешным, или нет (например, "HTTP/1.1 200 OK" в случае успеха. Тело успешного ответ на запрос может содержать запрашиваемые данные (например, новую HTML страницу, или изображение, и т.п), который может отображаться через веб-браузер.

Статические сайты

Схема ниже показывает базовую архитектуру веб-сервера для статического сайта (статический сайт – это такой сайт, который возвращает один и тот же жестко запрограммированный контент с сервера всякий раз, когда определенный запрос поступает). Когда пользователь хочет зайти на страницу, браузер посылает HTTP-запрос “GET”, указывая ее путь. Сервер извлекает запрошенный документ из своей файловой системы и возвращает HTTP-ответ, содержащий документ и успешный статус (обычно 200 OK). Если файл не может быть извлечен по каким-либо причинам, возвращается статус ошибки (смотри ошибки клиента и ошибки сервера).

A simplified diagram of a static web server.

Динамические сайты

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

Большая часть кода для поддержки динамического веб-сайта должна запускаться на сервере. Создание этого кода известно, как «программирование серверной части» (или иногда «программирование бэкенда»).

Схема ниже показывает простую архитектуру динамического сайта. Как и на предыдущей схеме, браузеры отправляют HTTP-запросы на сервер, затем сервер обрабатывает запросы и возвращает соответствующие HTTP-ответы. Запросы статических данных обрабатываются так же, как и для статических сайтов (статические данные – это любые файлы, которые не изменяются, обычно это: CSS, JavaScript, изображения, заранее созданные PDF-файлы и прочее).

A simplified diagram of a web server that uses server-side programming to get information from a database and construct HTML from templates. This is the same diagram as is in the Client-Server overview.

Запросы динамических данных отправляются (2) в код серверной части (показано на диаграмме какВеб-приложение). Для «динамических запросов» сервер интерпретирует запрос, читает необходимую информацию из базы данных (3), комбинирует извлеченные данные с шаблонами HTML и возвращает отве, содержащий сгенерированный HTML (5,6).

Одинаково ли программирование серверной части и клиентской?

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

  • Они имеют различные цели и назначение.
  • Они обычно не используют один язык программирования (исключение составляет , который может быть использован и в клиентской ив серверной частях).
  • Они выполняются в разных средах операционной системы.

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

Код клиентской части написан с использованием HTML, CSS и JavaScript выполняется внутри веб-браузера и имеет ограниченный доступ, или вообще никакого к операционной системе (включая ограниченный доступ к файловой системе). Веб-разработчики не могут контролировать, какой браузер использует каждый пользователь для просмотра сайта: браузеры предоставляют противоречивые уровни совместимости с особенностями кода клиентской части и часть вызова программирования клиентской части – это изящное обращение с различиями в поддержке браузеров.

Код серверной части может быть написан на любом количестве языков программирования – примеры популярных языков серверной части включают в себя PHP, Python, Ruby и C#. Код серверной части имеет полный доступ к операционной системе сервера, и разработчик может выбрать какой язык программирования (и какую версию) он хотел бы использовать.

Разработчики обычно пишут свой код используя веб-фреймворки. Веб-фреймворки –это набор функций, объектов, правил и других конструкций кода, спроектированных для решения типичных задач, ускорить разработку и упростить разные типы задач, возникающих в конкретной области. И снова, поскольку и клиентская и серверная части используют фреймворки, области очень разные и, следовательно, фреймворки тоже разные. Фреймворки клиентской части упрощают вёрстку и представление данных, тогда как фреймворки серверной части обеспечивают много «обычного» функционала веб-сервера, который вы возможно в противном случае должны были осуществлять самостоятельно (например, поддержка сессий, поддержка пользователей и аутентификация, простой доступ к базе данных, шаблонам библиотек, и т.д.).

Внимание: Фреймворки клиентской части часто используются для ускорения написания кода клиентской части, но вы также можете решить писать весь код руками; на самом деле, написание кода руками может быть более быстрым и эффективным, если вам нужен маленький простой веб-сайт UI. И наоборот, вы практически никогда не посмотрите в сторону написания кода без фреймворка: осуществление жизненно важной функции, такой как HTTP сервер действительно сложно сделать с нуля скажем на Python, но веб-фреймворки для Python, такие как Django обеспечивают это из коробки вместе с другими полезными инструментами.

Что можно сделать в серверной части?

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

Компании, такие как Amazon, используют программирование серверной части для построения исследовательских результатов для товаров, формирования целевого предложения, основанного на предпочтениях клиента и предыдущих покупках, упрощения заказов и т.д. Банки используют программирование серверной части, чтобы хранить учетную информацию и позволять только авторизованным пользователям просматривать и совершать транзакции. Другие сервисы, такие как Facebook, Twitter, Instagram и Wikipedia используют бэкэнд, чтобы выделять, распространять и контролировать доступ к интересному контенту.

Некоторые типичные применения и выгоды бэкэнда перечислены ниже. Вы заметите, что есть некоторое пересечение!

Эффективное хранение и доставка информации

Представьте, сколько товаров доступно на Amazon и представьте, сколько постов было написано на Facebook? Создание статической страницы для каждого товара или поста было бы абсолютно неэффективным.

Программирование серверной части позволяет вместо этого хранить информацию в базе данных и динамически создавать, и возвращать HTML и другие типы файлов (например, PDF, изображения, и т.д.). Также есть возможность просто вернуть данные (JSON, XML, и т.д.) для отображения используя подходящий фреймворк клиентской части (это уменьшает загрузку процессора на сервере и количество передаваемых данных.

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

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

Внимание: Вам не нужно сильно напрягать свое воображение, чтобы увидеть достоинства кода серверной части для эффективного хранения и передачи информации:

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

Для обычного поиска (например, «рыба») вы можете увидеть буквально миллионы найденных значений. Использование базы данных позволяет этому храниться и передаваться эффективно позволяет контролировать представление информации всего в одном месте.

Настраиваемый пользовательский опыт взаимодействия

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

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

 

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

Контролируемый доступ к контенту

Программирование серверной части позволяет сайтам ограничивать доступ авторизованным пользователям и предоставлять только ту информацию, которую пользователю разрешено видеть.

Реальные примеры:

  • Социальные сети, такие как позволяют пользователям полностью контролировать свои данные, но только разрешать своим друзьям просматривать и комментировать их. Пользователь определяет, кто может просматривать его данные и более того, чьи данные появляются на их стене. Авторизация –центральная часть опыта взаимодействия.
  • Сайт, на котором вы находитесь прямо сейчас контролирует доступ к контенту: статьи видны всем, но только авторизованные пользователи могут редактировать контент. Чтобы попробовать это, нажмите на кнопку «Редактировать» вверху страницы, и, если вы авторизованы, вы увидите редакторский интерфейс, если нет – вас отправит на страницу авторизации.

Внимание: Рассмотрим другие реальные примеры, где доступ к контенту контролируется. Например, что вы можете увидеть, если зайдете на сайт вашего банка? Авторизуйтесь через вашу учетную запись и какую дополнительную информацию вы можете просматривать и редактировать? Что за информацию вы можете увидеть, которую может редактировать только банк?

Хранение информации о сессии/состоянии

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

Внимание: Посетите новостной сайт, у которого есть подписка и откройте ветку тегов (например, The Age). Продолжайте посещать сайт в течении нескольких часов/дней. В итоге вас начнет перенаправлять на страницы, объясняющие, как подписаться и статьи станут вам недоступны. Эта информация является примером сессии, сохраненной в куки-файлах.

Уведомления и средства связи

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

Вот несколько примеров:

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

Внимание: Самый распространенный вид уведомлений – это «подтверждение регистрации». Возьмите почти любой интересующий вас большой сайт (Google, Amazon, Instagram, и т.д.) и создайте новую учетную запись используя ваш адрес электронной почты. Вы вскоре получите письмо, подтверждающую вашу регистрацию или с необходимой информацией для активации вашей учетной записи.

Анализ данных

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

Например, и Amazon и Google рекламируют товары на основании предыдущих поисков (и покупок).

Внимание: Если вы пользуетесь Facebook, зайдите на вашу стену и посмотрите на ряд постов. Заметьте, что некоторые посты не идут по порядку: в частности, посты с большим количеством «лайков» часто находятся выше по списку, чем остальные посты. Также взгляните на рекламу, которую вам показывают, вы вероятно увидите рекламу товаров, которые искали на других сайтах. Алгоритм Facebook’а для выделения контента и рекламы может казаться мистикой, но очевидно, что он зависит от ваших лайков и запросов поиска!

Подведение итогов

Поздравляем, вы дошли до конца первой статьи о программировании серверной части.

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

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

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

Метки документа и участники

 Внесли вклад в эту страницу: Khulagen
 Обновлялась последний раз: Khulagen,