Дикий Григорий

Full-stack веб-разработчик

Архитектура веб-приложений

Всемирная паутина (World Wide Web) — распределённая система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключённых к Интернету. Для обозначения Всемирной паутины также используют слово веб (англ. web «паутина») и аббревиатуру WWW.

Файлы (документы)

В web файлы бывают разных типов, которые определяются при помощи MIME-типов.

  • text/html
  • text/css
  • text/javascript
  • text/xml
  • image/png
  • video/mp4
  • application/json
  • и другие.

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

text/html

Это самые важные файлы, так как в основном они содержат "ссылки" на другие файлы.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название страницы</title>
    <link rel="stylesheet" href="/css/master.css">
  </head>
  <body>
    <h1>Привет!</h1>
  </body>
</html>

В этом документе есть теги, у тегов есть атрибуты, которые в свою очередь состоят из имени и значения, к примеру в 4 строчке: charset="utf-8", где charset - имя атрибута, а utf-8 - значение атрибута.

text/css

Эти файлы нужны для стилизации html элементов, к примеру: размеров, фона, цвета.

body{
  font-size: 12px; // Размер шрифта
  color: blue; // Цвет
  font-weight: bold; // Жирный шрифт
  // ...
}

Css файлы можно открывать и править в обычном редакторе. Для CSS файлов существует понятие селекторов - указывают к каким элементам применять стили, т.е как они должны выглядеть.

application/json

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

{
   "firstName": "Иван",
   "lastName": "Иванов",
   "address": {
       "streetAddress": "Московское ш., 101, кв.101",
       "city": "Ленинград",
       "postalCode": 101101
   },
   "phoneNumbers": [
       "812 123-1234",
       "916 123-4567"
   ]
}

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

  1. Файлы на дисках сервера
  2. Как правило обладают постоянным адресом

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

  1. Создаются на каждый запрос - то есть программа при запросе пользователя отдает определенный текст в соответствии с запросом
  2. Адрес может быть постоянным или меняется
  3. Содержимое зависит от пользователя и времени

URL

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

 http://server.com:3000/path/def.html?a=1&b=2#main 

Разберем на части:

  1. http - протокол, в основном он говорит браузеру в какая программа должна работать с сервером.
  2. server.com - DNS имя сервера.
  3. 3000 - TCP порт, на котором открыто соединения (по умолчанию 80). На одной машине может быть открыто много портов для разных приложений и программ.
  4. /path/def.html - путь к файлу.
  5. a=1&b=2 - параметры запроса которые передаются файлу. Он нужен для динамического документа.
  6. #main - положение на странице в пределах документа, которое задается html атрибутом id="main".

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

  1. http://server.com/1.html- абсолютный URL
  2. //server.com/1.html - абсолютный URL (не указана схема, т.к работают с http и https)
  3. /another/page.html - относительный (в пределах текущего документа)
  4. pictures/1.png - относительный (от URL текущего документа)
  5. #part2 - относительный (в пределах текущего документа)

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

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