1. Архитектура Web приложений

Web-приложениеклиент-серверное приложение, в котором клиент взаимодействует с веб-сервером при помощи браузера.

1.1. Разделение между Internet и WWW

1.1.1. Что такое Internet?

Internet – глобальная система объединённых компьютерных сетей. Другими словами - сеть сетей.

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

Частичная карта Интернета

Частичная карта Интернета

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

Существует несколько стеков сетевых протоколов, основные: OSI и ICP/IP. Рассмотрим на примере ICP/IP.

Стэк TCP/IP (представлены не все протоколы)

Стэк TCP/IP (представлены не все протоколы)

Из этого множества протоколов и уровней, в Web’e нас больше всего интересуют протоколы прикладного уровня (приложений). В частности: HTTP, FTP, DNS, SSH, P2P. Но для полноты понимания немного затронем и другие уровни.

Примечание

Прикладной уровень:
  • HTTP – протокол передачи гипертекстовых документов.
  • FTP – протокол передачи файлов.
  • DNS – доменная система имён.
  • SSH – защищенное подключение к консоли, удалённое управление операционной системой.
  • P2P (Peer-to-Peer) – каждый узел является как клиентом, так и выполняет функции сервера.
Транспортный уровень:
  • TCP – надежная последовательная передача данных. С подтверждением получения.
  • UDP – не надежная передача данных. Без подтверждения получения.
Сетевой уровень:
  • IP – глобальная адресация, передача в разнородной среде.

1.1.2. Что такое WWW?

World Wide Web – распределённая система взаимосвязанных, посредством гиперссылок, документов и их ресурсов, располагающихся на машинах подключенных к Internet. Эта система посредством протоколов серверного и клиентского ПО обеспечивает доступ к этим вазимосвязанным документам.

Примечание

Распределённая – означает, что физически, документы и их ресурсы могут располагаться на разных серверах.

Связанность документов и ресурсов посредством гиперссылок

Связанность документов и ресурсов посредством гиперссылок

Примечание

Историческая справка – изначально, WWW разрабатывалась как система ссылок в научном сообществе.

1.1.3. Различия

Всё просто.

Internet – это инфраструктура.

WWW – это сервис.

1.2. Клиент-серверная архитектура

Клиент-серверная архитектура – означет, что приложение исполняется одновременно на двух машинах: на клиенте и на сервере.

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

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

Схема клиент-серверной модели

Схема клиент-серверной модели

Преимущества подхода
  • Открытый протокол – очень хорошо документирован и имеет много реализаций.
  • Стандартный клиент – самый распространённый клиен - браузер.
  • Прозрачный способ взаимодействия приложений – один ресурс может ссылаться на другой.
  • Распределенная и масштабируемая система – физически, одно преложение может быть запущенно на нескольких серверах.

1.3. Типы Web-документов (MIME-типы)

MIME-типы – типы данных, которые могут быть переданы, посредством сети Интернет, в Web. Нужны для того, чтобы браузер знал как обрабатывать тот или иной документ.

Расширения файлов играют второстепенную роль.

Документы могут быть:

  • Статические:
    • Это файлы на дисках сервера
    • Как правило, обладают постоянным адресом
  • Динамические:
    • Создаются на каждый запрос
    • Содержимое зависит от параметров запроса. Например, времени и пользователя.
    • Адрес может быть постоянным или меняться

1.3.1. Сокращенный перечень MIME-типов

  • text
    • text/html – основной тип для гипертекстовых документов. Разметка текста, пользовательского интерфейса
    <!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" href="/css/style.css">
            <script src="http://code.jquery.com/jquery-2.1.4.js"></script>
        </head>
        <body>
            <p>
                Some text with <img src="pic/img1.png">
                and <a href="#yes">hyperlinks</a>
            </p>
        </body>
    </html>
    
    • text/css – стили, которые применяются к html-документам. Определяют внешний вид
    body {
        width: 70%;
        margin: auto;
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-family: sans-serif;
        margin-top: 1.5em;
    }
    
    • text/javascript – скрипты для документов
    <script>
        document.write("Hello, world!");
    </script>
    
    • text/xml – для разметки самих данных. Служит для обмена данными между приложениями
    <response status="ok">
        <friends>
            <friend id="1" name="v.pupkin"/>
            <friend id="2" name="a.pushkin"/>
            <friend id="3" name="n.tesla"/>
        </friends>
    </response>
    
  • image и video
    • image/png
    • image/jpeg
    • video/mp4
  • application
    • application/json – для разметки самих данных. Служит для обмена данными между приложениями, более совершенная версия, чем xml
    {
        "status": "ok",
        "friends": [
            { "id": 1, "name": "v.pupkin" },
            { "id": 2, "name": "a.pushkin" },
            { "id": 3, "name": "n.tesla" }
        ]
    }
    
    • application/javascript
    • и многие другие…

Полный список MIME-типов

1.4. URL - Связующие звено

URL (Uniform Resource Locator) – определитель местонахождения ресурса, документа. Другими словами – адрес.

Структура у него следующая:

Структура URL

Структура URL

Примечание

Протокол – с помощью какого протокола загружать.

Параметры – список определённых значений, которые передаются вместе с запросом.

Якорь – определённое место в самом документе (Web-страничке).

1.4.1. Абсолютные и относительные URL

Абсолютный – полный и точный адрес.

Примеры:

  • http://server.org/1.html - абсолютный
  • //server.org/1.html - schemeless, для гибкой подстройки протокола http или https

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

Примеры:

  • /another/page.html?a=1 - путь от корня домена
  • pictures/1.png - от URL текущего документа
  • ?a=1&b=2 - параметры, от URL текущего документа
  • #part2 - якорь, в пределах текущего документа

1.4.2. Правила разрешения URL

Рассмотрим на примере – жирным выделено, какая часть добавляется браузером при обработке относительных адресов:

https://site.com/path/page.html - основной документ

Преобразования относительных URL

Преобразования относительных URL

1.5. Как документы могут ссылаться друг на друга?

1.5.1. HTML - гиперссылки

С помощью специального тега <a> и его атрибута href="URL".

Пример:

Узнать больше о <a href="https://ru.wikipedia.org/wiki/URL">URL</a>
Результат:
Узнать больше о URL

1.5.2. HTML - формы

С помщью тега <form> и его атрибута action="URL" – куда будет отправлен запрос этой формы.

Пример:

<form action="https://duckduckgo.com/">
    <input type="text" name="q" value="">
    <input type="hidden" name="ia" value="images">
    <button type="submit">Найти</a>
</form>

Результат:

1.5.3. HTML - ресурсы

URL-адреса как ссылки на ресурсы документа.

Пример:

<link rel="stylesheet" href="/css/index.css">
<script src="http://code.jquery.com/jquery-2.1.4.js"></script>
<img src="pictures/network.png" width="200">

1.5.4. CSS - ресурсы

Подключение ресурсов через использование URL в CSS файлах.

Пример:

/* Загрузка фонового изображения*/
.slide {
    background-image: url(../pictures/network.png)
}
/* Загрузка шрифта */
@font-face {
    font-family: Terminus;
    src: url(fonts/terminus.ttf);
}

1.5.5. JavaScript - прямое указание URL

Пример:

var saveApiUrl = '/items/save/';
var newTitle = 'Duck tales';
    $.ajax({
    type: 'POST',
    url: saveApiUrl,
    data: { id: 10, title: newTitle }
});