Марат Мавлютов - Современный веб как сложная система
DESCRIPTION
TRANSCRIPT
![Page 1: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/1.jpg)
![Page 2: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/2.jpg)
Марат Мавлютов Инженер по автоматизации тестирования
Что такое веб, из чего он сделан, как и почему.
![Page 3: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/3.jpg)
![Page 4: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/4.jpg)
передача и хранение информации
![Page 5: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/5.jpg)
2500000000 – регулярное число пользователей интернета
![Page 6: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/6.jpg)
Современная карта интернета:
![Page 7: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/7.jpg)
Как мы дошли до такой жизни?
(или немного истории)
![Page 8: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/8.jpg)
Военные технологии – двигатель прогресса
![Page 9: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/9.jpg)
ARPANET (Advanced Research Projects Agency Network)
![Page 10: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/10.jpg)
ARPANET (Advanced Research Projects Agency Network)
LOGIN
![Page 11: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/11.jpg)
29 октября 1969 День Рождения Интернета!
![Page 12: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/12.jpg)
70-е
• Электронная почта
![Page 13: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/13.jpg)
70-е
• Электронная почта • Списки рассылки
![Page 14: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/14.jpg)
70-е
• Электронная почта • Списки рассылки • Новостные группы
![Page 15: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/15.jpg)
Карта сети ARPANET
![Page 16: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/16.jpg)
Стандартизация
• Модель OSI/ISO
![Page 17: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/17.jpg)
Стандартизация
• Модель OSI/ISO • Стек протоколов TCP/IP
![Page 18: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/18.jpg)
Канальный Физический
Сетевой
Транспортный
Прикладной
Прикладной
Представления
Сеансовый
Канальный
Транспортный
Сетевой
TCP/IP OSI
![Page 19: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/19.jpg)
80-е
• DNS
![Page 20: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/20.jpg)
80-е
• DNS • IRC
![Page 21: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/21.jpg)
80-е
• DNS • IRC • URI/URL
![Page 22: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/22.jpg)
80-е
• DNS • URI/URL • IRC • HTML => HTTP
![Page 23: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/23.jpg)
DNS – domain name system
![Page 24: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/24.jpg)
Схема работы DNS
![Page 25: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/25.jpg)
Язык разметки HTML
![Page 26: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/26.jpg)
Статический HTML
![Page 27: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/27.jpg)
Pros & Cons
Преимущества: • не нужно знать языки веб-программирования • хорошая кешируемость • минимальная нагрузка на сервер • простота переноса
Недостатки • невозможность генерации • трудная поддержка
![Page 28: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/28.jpg)
Динамический HTML
![Page 29: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/29.jpg)
Этапы формирования
• генерация на стороне сервера • передача клиенту • генерация на стороне клиента
![Page 30: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/30.jpg)
Протокол HTTP
![Page 31: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/31.jpg)
95:~ mavlyutov$ telnet mavlyutov.people.yandex.net 80 Trying 37.9.65.57... Connected to mavlyutov.people.yandex.net. Escape character is '^]'. GET /index.htm HTTP/1.1 <html> <body> <h1>Hello!</h1> <p>This is the simple web page for apache server</p> </body> </html> Connection closed by foreign host.
HTTP запрос
![Page 32: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/32.jpg)
90-е
• Браузеры
![Page 33: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/33.jpg)
90-е
• Браузеры • Клиент-серверная модель
![Page 34: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/34.jpg)
90-е
• Браузеры • Клиент-серверная модель • Многоуровневая архитектура
![Page 35: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/35.jpg)
90-е
• Браузеры • Клиент-серверная модель • Многоуровневая архитектура • Одноранговые сети
![Page 36: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/36.jpg)
Браузер
![Page 37: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/37.jpg)
Букет браузеров
![Page 38: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/38.jpg)
Клиент-серверная модель
![Page 39: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/39.jpg)
Pros & Cons
Преимущества: • отсутствие дублирования кода • все вычисления выполняются на сервере • все данные хранятся на сервере
Недостатки • single point of failure • высокая стоимость оборудования.
![Page 40: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/40.jpg)
Что такое сервер?
![Page 41: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/41.jpg)
Сервер
Программное обеспечение
Аппаратное обеспечение
![Page 42: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/42.jpg)
Программный сервер
![Page 43: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/43.jpg)
Аппаратный сервер
![Page 44: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/44.jpg)
Хостинг:
• выделенный (dedicated)
![Page 45: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/45.jpg)
Хостинг:
• выделенный (dedicated) • виртуальный (virtual private
server)
![Page 46: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/46.jpg)
Хостинг:
• выделенный (dedicated) • виртуальный (virtual private
server) • разделяемый (shared)
![Page 47: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/47.jpg)
LAMP – джентельменский набор
• Linux • Apache • MySQL • Python/PHP/Perl
![Page 48: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/48.jpg)
Операционная система
• Linux • Windows
![Page 49: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/49.jpg)
Веб-сервер
• Apache • nginx
![Page 50: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/50.jpg)
База данных
• MySQL/MariaDB • PostgreSQL • MongoDB
![Page 51: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/51.jpg)
Язык программирования
• Python • PHP • Perl
![Page 52: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/52.jpg)
Балансировка нагрузки
![Page 53: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/53.jpg)
Round Robin
![Page 54: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/54.jpg)
Облака
• Облачное хранилище данных • Облачные вычисления
![Page 55: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/55.jpg)
IaaS Infrastructure as a Service
![Page 56: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/56.jpg)
PaaS Platform as a Service
![Page 57: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/57.jpg)
SaaS Software as a Service
![Page 58: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/58.jpg)
Облака
![Page 59: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/59.jpg)
VPN – virtual private network
![Page 60: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/60.jpg)
VPN в интернете
![Page 61: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/61.jpg)
Интернет – очень большой
![Page 62: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/62.jpg)
Как устроен facebook
![Page 63: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/63.jpg)
Огромные объемы данных
1. 500 000 000 активных пользователей 2. 1 000 000 000 сообщений в чате ежедневно 3. 10 000 пар становятся друзьями каждую минуту
![Page 64: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/64.jpg)
Основные принципы:
1. Простота 2. Масштабируемость 3. Открытость
![Page 65: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/65.jpg)
Технологии:
PHP + HipHop
![Page 66: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/66.jpg)
Технологии:
MySQL + memcached
![Page 67: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/67.jpg)
В итоге:
![Page 68: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/68.jpg)
Про Яндекс
![Page 69: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/69.jpg)
Сервисы Яндекса:
![Page 70: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/70.jpg)
Монетизация
![Page 71: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/71.jpg)
Виды монетизации:
• Подписка
![Page 72: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/72.jpg)
Виды монетизации:
• Разовая покупка услуг
![Page 73: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/73.jpg)
Виды монетизации:
• Продажа виртуальных товаров
![Page 74: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/74.jpg)
Виды монетизации:
• Медийная и контекстная реклама
![Page 75: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/75.jpg)
Медийная реклама в Яндексе
![Page 76: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/76.jpg)
Медийная реклама в Яндексе
![Page 77: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/77.jpg)
Контекстная реклама в Яндексе
![Page 78: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/78.jpg)
Контекстная реклама в Яндексе
![Page 79: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/79.jpg)
РСЯ Рекламная сеть Яндекса
![Page 80: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/80.jpg)
RTB – real time bidding
![Page 81: Марат Мавлютов - Современный веб как сложная система](https://reader030.vdocuments.net/reader030/viewer/2022020217/548d6a9fb47959ea328b48f6/html5/thumbnails/81.jpg)
Мобильное будущее