HTTP и современный Web

Григорий
Вахмистров
 Григорий Вахмистров
Backend Developer в Tennisi.bet

2
План занятия
1. Введение
2. Web & HTTP
3. Веб-технологии
4. Гиперссылки и формы
5. Frontend
6. Итоги
7. Домашнее задание

3
Введение

4
Введение

Мы приступаем к изучению самого популярного фреймворка

для Java - Spring Framework (Spring).

Наша задача - научиться им пользоваться и понять, как он

устроен внутри. Именно это будет определять то, насколько
профессионально вы сможете использовать фреймворк.

5
Введение

Начиная с первого релиза (24 марта 2004), Spring неразрывно

связан с созданием веб-приложений.

Мы поговорим и в целом о web, и о frontend в частности, чтобы

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

6
Замечание о стиле кодирования

Классы и интерфейсы из Spring и многие другие, которые мы

будем использовать, имеют зачастую очень длинные имена,
например, AnnotationConfigApplicationContext (и это ещё
"средних" размеров). Поэтому мы активно в лекциях будем
использовать var из Java 11, чтобы код помещался на слайдах.

В реальной жизни вам нужно исходить из Code Conventions,

принятых на проекте.

7
Web & HTTP

8
Клиент-серверная модель

Общая схема работы выглядит следующим образом:

клиент сервер
на компьютере / смартфоне на сервере* в дата-центре
пользователя

*Под сервером понимается как приложение, так и виртуальная / физическая машина

9
HTTP

Мы будем рассматривать взаимодействие по протоколу HTTP.

В качестве формата обмена данными могут служить HTML, CSS,
изображения, аудио, видео и другие (JSON/XML).

запрос

сеть Интернет

ответ

10
Web

Web (World Wide Web) - система связанных веб-страниц

(посредством гиперссылок), доступных через сеть Интернет.

Ключевые вещи:

● HTTP используется для передачи данных между сервером

и клиентом;
● Клиент указывает URL* для доступа к конкретному
компоненту системы (например, странице);
● HTML - один из форматов представления документов.

*URL - uniform resource location

11
Общая схема

Браузер и сервер могут быть написаны на разных языках и

работать на разных платформах.

Поэтому:

● нужен транспорт для доставки информации (набора байт) от

одного приложения к другому;

● нужны правила интерпретации этих байт — приложения

должны понимать друг друга.

12
Протокол
Протокол – это “правила общения” двух сторон.

Пример: приезжая в аэропорт, вы проходите фиксированную

процедуру перед посадкой в самолёт:

● проверка документов;

● контроль безопасности;

● проверка билета перед посадкой.

Если вы вдруг приедете без документов, то вы не выполните условия

протокола, и сотрудники аэропорта — сторона, с которой вы
взаимодействуете, вас не поймёт и не пропустит.

13
Протокол

В мире приложений всё так же: договорённости устанавливаются

на множестве уровней:

● от физического — какие электромагнитные сигналы

пересылаются;
● до уровня приложений — в каком формате и какие данные
передаются.

14
OSI vs TCP/IP

Про TCP/IP вы
HTTP уже знаете, нас
интересует HTTP.

TCP

IP

Иллюстрация взята с сайта: wikipedia.org 15

RFC

RFC (Request For Comments) – специальный тип документов,

которые описывают стандарты, протоколы, форматы и т.д. Он
используется в качестве транспорта для данных уровня
приложения.

HTTP 1.1: https://tools.ietf.org/html/rfc2616

HTTP 2.0: https://tools.ietf.org/html/rfc7540

*RFC читать достаточно полезно, поскольку это первоисточник.

16
RFC
The Hypertext Transfer Protocol (HTTP) is an application-level
protocol for distributed, collaborative, hypermedia information
systems. It is a generic, stateless, protocol which can be used for
many tasks beyond its use for hypertext.

Вольный перевод: HTTP - протокол прикладного уровня для

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

17
HTTP - место в стеке протоколов

18
HTTP
На сегодняшний день есть две версии протокола:

● HTTP 1.1 – текстовая. Значит запросы и ответы можно

интерпретировать как строки в "человекопонятном" формате

● HTTP 2 – бинарная. Значит запросы и ответы нельзя

интерпретировать как строки

Рассмотрим пока версию 1.1.

19
HTTP
В рамках протокола определяется понятие «сообщения» (message) -
единица передачи информации.

Сообщение может быть либо запросом, либо ответом:

20
 \r\n

\r\n
21
\r\n

Напоминаем, что \r - это возврат каретки (Carriage Return - CR),

а \n - это перенос строки (Line Feed - LF).

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

индикации окончания строки (line) используют либо CRLF, либо LF. В
HTTP выбран именно CRLF.

22
 demo + debugger

HTTP Server (пробуем написать свой сервер)

бесконечный
цикл
обработки
запросов

Мы специально захардкодили некоторые значения, чтобы "уместить" код на слайде.

В реальности, их, конечно же, нужно выносить.
23
HTTP
В рамках HTTP определяются:

● Методы GET, POST, PUT, DELETE (и т.д.) определяют логическое

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

● Статус-коды ответов:

— 1xx — информационные;
— 2xx — успешно;
— 3xx — перенаправление;
— 4xx — ошибки клиента;
— 5xx — ошибки сервера.

24
Код обработки подключения
(внутри while)

25
HTTP
Так устроены почти все сервера - бесконечный цикл, в котором
обслуживаются запросы клиентов.

Конечно, в других серверах "навешено" дополнительной

функциональности, но в HTTP-серверах суть та же:
● на входе:
○ request line
○ headers
○ body

● на выходе:
○ status line
○ headers
○ body

26
интерпретируется
как HTML
документ

именно благодаря этому

заголовки запроса

заголовки запроса

27
Developer Tools
Developer Tools - это инструмент, который встроен в Chrome, позволяющий
в том числе просматривать отправляемые запросы.

Открывается по нажатию клавиши F12.

Мы будем активно им пользоваться.

28
 именно благодаря этому
интерпретируется
как изображение

29
HTTP
Меняем Content-Type:

30
не интерпретируется
как HTML документ

именно благодаря этому

31
 почему?
интерпретируется
как изображение

32
Content-Type

Заголовок Content-Type определяет тип содержимого в соответствии

с реестром IANA. Исходя из значения этого заголовка, браузер решает,
как отображать содержимое.

Q: но с изображением не сработало. Почему?

A: браузеры сейчас достаточно умные и включают процесс сниффинга:

браузер по первым байтам файла видит, что это PNG (Magic Numbers) и
игнорирует значение Content-Type.

33
Веб-технологии

34
Веб-технологии
В рамках курса нас будут интересовать три ключевых веб-технологии:

● HTML — язык, определяющий правила по формированию веб-

документов;

● CSS — язык, определяющий правила по стилевому оформлению веб-

документов;

● JS — язык, использующий API браузера для добавления поведения к

элементам или переопределения их поведения по умолчанию.

35
HTML
HTML (HyperText Markup Language) - предоставляет для создания
документов, состоящих из структурированных элементов.

HTML и XML, который мы использовали

в pom.xml - родственные языки,
поэтому правила похожи (за
исключением нижних двух строк)

36
DOM

HTML-документ - это просто текст. Чтобы он превратился в визуальный

интерфейс, необходимо этот документ обработать.

В процесс обработки браузер строит объектную модель документа (DOM -

Document Object Model) - т.е. каждый элемент превращается в объект во
внутреннем представлении браузера.

Поскольку HTML - иерархическая структура, то и DOM - это дерево

элементов, где у каждого элемента (кроме корневого) есть только один
родитель и сколько угодно детей (от 0).

37
Синтаксис HTML-элементов
Перечень элементов определяется спецификацией HTML, 4-ый раздел:

*HTML допускает создание собственных (кастомных) элементов, но это находится

за рамками наших интересов.
38
Категории элементов
Выделяются следующие категории
(нас будут интересовать выделенные зелёным):

39
Категории элементов

Q: чем они интересны?

A: они позволяют осуществить взаимодействие с сервером путём отправки

HTTP-запросов.

Мы их условно разделим на две категории:

1. Ресурсы (изображения, аудио, видео, CSS, JS)

2. Гиперссылки и формы

40
 demo + debugger
Ресурсы (см. /resources.html)
время

41
Ресурсы

42
Гиперссылки и Формы

43
 demo + debugger

Гиперссылки

Гиперссылки - это элементы вида:

<a href="путь">Текст</a>

Переход по гиперссылкам (по обычным, а не по тем, что только

выглядят, как гиперссылки) приводит к запросу на сервер
с соответствующим URL (см. links.html).

44
Формы

С формами всё гораздо интереснее:

<form>
внутри элементы ввода:
● input (21 тип)
● select
● textarea
</form>

45
 demo + debugger

Формы

По умолчанию форма отправляется на тот же адрес,

с которого была загружена с помощью метода GET.

Все элементы ввода, имеющие атрибут name, передаются через

параметры запроса (см. forms.html).

46
Общая схема
Соберём всё в одну картинку:

1. Пользователь вводит URL веб-страницы или переходит по ссылке

2. Сервер отдаёт новый документ, соответствующий этому URL'у

3. Браузер пользователя обрабатывает документ, загружает все ресурсы

4. Пользователь взаимодействует с документом (формами и

гиперссылками), что приводит к новым запросам на сервер (по
определённому URL'у)

5. Всё повторяется, начиная с шага 2.

47
Классические веб-приложения

Со статичными файлами (как мы сделали) - всё понятно. Но ведь

пользователю на странице может выводиться имя, есть возможность
авторизации и т.д. Как это работает?

На самом деле, сервер может просто менять часть контента (тот же

String.replace прекрасно справится) в зависимости от данных запроса.

Такие приложения раньше называли классическими веб-приложениями,

сейчас же их всё чаще неформально называют "олдскульными".

48
 demo

Классические веб-приложения

сами придумали "метку" для замены

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

Равно как отсюда же вытекают все оптимизации и расширенные

возможности, которые можно применить:

● заранее читать файлы в память с диска;

● реализовать поддержку "включения" одних файлов в другие (т.е.
вынести общие куски HTML в отдельные файлы);
● реализовать поддержку синтаксических конструкций вроде if'ов и
циклов в HTML

50
Классические веб-приложения

Ключевой минус классических веб-приложений - backend-

разработчик должен заниматься HTML.
Т.е. именно вы, помимо написания кода на Java и работы с БД,
должны ещё формировать эти самые HTML-странички.

51
Frontend

52
JS

В современном мире всё немного поменялось. JS (JavaScript) стал

полноценным языком, который позволяет писать приложения,
работающие в браузере*.

*На самом деле, JS можно запускать уже везде.

53
JS

В чём суть:

● браузер содержит реализацию движка JS (как JVM для Java);

● браузер предоставляет Web API - набор интерфейсов,

позволяющих создавать полноценные приложения

54
Web API

1. DOM API - взаимодействие с UI (создание/изменение

элементов, реагирование на события)
2. XMLHTTPRequest/fetch - отправка HTTP-запросов
3. FileReader API - работа с файлами
4. Media Capture and Streams (запись аудио/видео)
5. и др.

55
JS

Таким образом, становится возможным сделать главное - разделить

разработку, определив чёткий интерфейс взаимодействия:

запрос API

json

json

ответ
Пользователь
Frontend App Backend App

56
Общая схема

Теперь frontend-программисты пишут свою часть приложения, а

backend-программисты - свою.

Поскольку между сторонами (за исключением первой загрузки

документа и загрузки файлов) происходит посредством JSON*, то
backend-программисту уже не нужно заниматься вопросами
отображения информации.

*На самом деле, можно не только JSON, а что угодно.

57
Sandbox

Поскольку документы (HTML) и ресурсы (JS, CSS) загружаются из

сети Интернет, они априори не могут считаться доверенными.

Поэтому браузер ограничивает JS с точки зрения

предоставляемых возможностей: например, из JS можно
прочитать только те файлы, которые пользователь сам выбрал с
помощью элемента выбора файлов или перенёс (Drag & Drop) в
окно браузера.

58
Sandbox

Это ключевая вещь, из-за которой мы рассматриваем эти темы -

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

Ведь какой смысл писать API, которое не смогут использовать

frontend-разработчики из-за ограничений браузера?

Разбору возможных форматов передачи данных и ограничений

клиента и будет посвящены несколько наших следующих лекций.

59
Итоги

60
Итоги

Сегодня мы кратко "прошлись" по основам веб-технологий, для

того, чтобы вынести две ключевых мысли:

1. Современная разработка делится на frontend и backend

2. Frontend часто ограничен в доступных инструментах

В связи с этим, мы будем концентрироваться именно на

разработке API (которое также учитывает ограничения
frontend'а), а не классических приложений.

61
Домашнее задание

Давайте посмотрим ваше домашнее задание.

● Вопросы по домашней работе задавайте в чате
мессенджера .

● Задачи можно сдавать по частям.

● Зачёт по домашней работе проставляется после того, как
приняты все задачи.

62
 Задавайте вопросы и
пишите отзыв о лекции!

Григорий Вахмистров