SlideShare a Scribd company logo
Как устроен Web
изнутри
Анна Тарасенко, 7bits,
генеральный директор
Что за паутина?
Web (World Wide Web, WWW) —
всемирная “паутина”, состоящая
из сотен миллионов серверов,
хранящих и обрабатывающих
документы
А что еще?
Пользовательские устройства
1. Персональные компьютеры и
ноутбуки
2. Планшеты и смартфоны
3. GSM-телефоны и навигаторы
4. Шлемы виртуальной реальности
Пользовательские устройства
5. Бытовая техника, автомобили,
медицинская техника
6. Банкоматы, кассы, POS-терминалы
7. Носимая электроника: умные часы,
фитнес-браслеты
8. …
Интернет вещей (Internet of Things)
Устройства могут:
1. Запускать программное
обеспечение (ПО)
○ с интерфейсом пользователя
■ графическим
■ консольным
■ сенсорным, кнопочным и т.д.
○ без интерфейса пользователя
Устройства могут:
2. Принимать и передавать данные по
сети
○ проводной
○ беспроводной (например, WiFi,
Bluetooth)
Устройства могут:
3. Обмениваться данными со спутниками
для позиционирования в пространстве
○ GPS
○ ГЛОНАСС
4. Обмениваться данными с сотовыми
вышками
○ GSM, CDMA (2G)
○ 3G, 4G
Устройства могут:
5. Собирать и хранить данные с датчиков
○ движения и углов наклона
○ температуры
○ света
○ прикосновения
○ давления
○ …
Устройства могут:
6. Взаимодействовать с контроллерами
аналоговых устройств:
○ моторов
○ светодиодов и лампочек
○ аудио и видео устройств
○ …
Клиент и сервер
Это деление очень условно
Роли могут меняться для каждого
взаимодействия
Мы рассмотрим таких клиентов
Они взаимодействуют с Интернет
1. Через браузер
2. Через мобильное приложение
3. Через десктопное приложение (иногда
это тоже браузер)
Адреса в сети
IP-address (Internet Protocol Address):
● Внешний: 93.158.134.3 (IPv4),
уникален в Интернет
● Внутренний: 192.168.0.1, уникален в
локальной сети
Определяется провайдером Интернет
Адреса в сети
Адреса в сети
Domain name:
● yandex.ru
● google.com
● wikipedia.org
Сайтом обычно называют то, что
скрывается за доменным именем
Адреса в сети
DNS — Domain Name System,
позволяет сопоставить доменному
имени IP-адрес и наоборот
Адреса в сети
Протоколы и уровни
Протокол — набор правил,
действий и их очередности,
позволяющий осуществлять
соединение и обмен данными
между устройствами в сети
Протоколы и уровни
Сетевая модель OSI (не вся):
● Прикладной уровень (7) — HTTP, FTP
(семантические данные)
● Транспортный уровень (4) — TCP, UDP
(сегменты, дейтаграммы)
● Сетевой уровень (3) — IPv4, IPv6 (пакеты)
● Физический (1) — USB, витая пара (биты)
Модель запрос-ответ
Модель запрос-ответ в HTTP
● HTTP-request посылается
клиентом, он ждет ответа в
рамках соединения с сервером
● HTTP-Response отправляется
сервером, либо соединение
рвется
Пример HTTP-request
Метод запроса Запрашиваемый ресурс Протокол
GET /wiki/Tim_Berners-Lee HTTP/1.1
Host: ru.wikipedia.org
……
еще заголовки
Пример HTTP-response
Протокол Код ответа
HTTP/1.1 200 OK
(далее следует запрошенная
страница в HTML)
Пример HTTP-request
Метод запроса Запрашиваемый ресурс Протокол
POST /addcomment HTTP/1.1
Host: youtube.com
comment=Hello
У этих запросов есть тело (body),
содержащее данные
Пример HTTP-response
Протокол Код ответа
HTTP/1.1 500 Internal Server Error
Сервер может прислать код ошибки
вместо страницы
Задачи сервера
1. Принимать запросы клиентов
2. Отправлять ответы клиентам
3. Хранить и обрабатывать данные
4. Искать и систематизировать данные по
запросу (иногда с других серверов)
Все это делает запущенное на сервере ПО
Типовая архитектура
Что умеет web-приложение
1. Чтение HTTP-запроса,
формирование HTTP-ответа
2. Взаимодействие с базой данных
3. Запуск процессов по расписанию
4. Обработка и генерация данных
5. …
Языки программирования в web
C++, C#, Clojure, Erlang, Java,
JavaScript, Haskell, Perl, PHP,
Python, Ruby, Scala, …
На самом деле любые — нужно
просто уметь читать и писать символы
:-)
Самые важные языки
Самые важные языки
● English
Самые важные языки
● English
● Русский
Libraries and Frameworks
Многие типовые задачи уже
решены и на большинстве языков
написаны библиотеки и/или
фреймворки
Фреймворк кроме инструментов
задает каркас приложения
Фреймворки в web
● C#: .NET framework
● Java: Spring и много непопулярных
● JavaScript: Node.js как платформа,
на ее основе Express, Sails
● PHP: Zend framework, symfony,
Cake, Cohana, Yii и много других
Фреймворки в web
● Python: Django, Pyramid, Flask
● Ruby: Ruby on Rails (RoR), Sinatra
● Scala: Play framework, Akka, Spark
Выбор языка не так важен, как выбор
фреймворка!
А еще важнее глубокое понимание
принципов работы сети и архитектуры
приложений, безотносительно языков
и фреймворков!
Базы данных (без подробностей)
● Реляционные: Oracle, Postgres,
MySQL, MS SQL, MariaDB
● Документо-ориентированные:
MongoDB, CouchDB
● Колоночные: Cassandra, HBase
● Графовые: Neo4j, OrientDB
Выбор базы данных едва ли не более
холиварная тема в ИТ, чем выбор
языка или фреймворка :-)
А что еще изучать?
1. Безопасность: шифрование данных,
атаки и защиты
2. Оптимизация поиска в базе данных
3. Масштабирование: подстройка системы
под увеличивающееся число запросов
4. Синхронизация данных между
несколькими серверами
А что еще изучать?
5. Многопоточность, параллельные и
распределенные вычисления
6. Модель акторов
7. Шаблоны (patterns) проектирования и
SOLID-принципы
8. Математическая логика, теория
алгоритмов, логика Хоара
Как лучше начать?
1. Курсы и стажировки для начинающих
2. Coursera, Khan academy, Hexlet
3. Книги от столпов индустрии: Роберт
Мартин, Стив МакКоннел, Кент Бек и
другие
Что почитать?
1. Р. Мартин “Идеальный программист”
2. Р. Мартин “Чистый код”
3. К. Бек “Разработка через тестирование”
4. С. МакКоннел “Совершенный код”
5. Д. Томас, Э. Хант “Программист-
прагматик. Путь от подмастерья к
мастеру”
Что почитать?
6. (*) Г. Эндрюс “Основы многопоточного,
параллельного и распределенного
программирования”
7. (*) Э. Таненбаум, М. Ван Стеен
“Распределенные системы. Принципы и
парадигмы”
Спасибо! Вопросы?
Email: at@7bits.it
Site: http://7bits.ru

More Related Content

PPT
Интернет-ресурсы и Интернет-сервисы
PPT
работа в сети_интернет
PPT
Introduction to MongoDB
PPTX
#1 razvedka i sbor dannih
PPTX
3. о кодировках
PPT
Sphinx в реальных проектах: шишки и плюшки
PDF
Информационный поиск. Инвертированный индекс. Обработка булевых запросов.
PPTX
Разведка боем
Интернет-ресурсы и Интернет-сервисы
работа в сети_интернет
Introduction to MongoDB
#1 razvedka i sbor dannih
3. о кодировках
Sphinx в реальных проектах: шишки и плюшки
Информационный поиск. Инвертированный индекс. Обработка булевых запросов.
Разведка боем

What's hot (19)

PPTX
все об интернет модуль 1
PPT
Введение в информационный поиск
PDF
Бекдоры в пхп. Остаться незамеченным или проникновение без боли
PDF
Компьютерные курсы для пожилых людей. Занятия 1 4
PPT
PPTX
Основы информационной безопасности (Владимир Кузьмин)
PDF
Индексируй неиндексирумое
PDF
Алексей Андросов "HTML5 в Я.Почте"
PPT
калугин денис
PPT
Антицензура в сети
PDF
Меры личной информационной безопасности
PPT
67
PPTX
Глобальная компьютерная сеть
PDF
Фёдор Строк - Базы данных - SQL, ORM, NoSQL
PDF
Антон Пушков. Презентация Центра Интеллектуальной Собственности Сколково
PPTX
История интернета
PPTX
История интернет
PDF
FireEye IDC IT Security Roadshow Moscow 2016
PPTX
лекция 2
все об интернет модуль 1
Введение в информационный поиск
Бекдоры в пхп. Остаться незамеченным или проникновение без боли
Компьютерные курсы для пожилых людей. Занятия 1 4
Основы информационной безопасности (Владимир Кузьмин)
Индексируй неиндексирумое
Алексей Андросов "HTML5 в Я.Почте"
калугин денис
Антицензура в сети
Меры личной информационной безопасности
67
Глобальная компьютерная сеть
Фёдор Строк - Базы данных - SQL, ORM, NoSQL
Антон Пушков. Презентация Центра Интеллектуальной Собственности Сколково
История интернета
История интернет
FireEye IDC IT Security Roadshow Moscow 2016
лекция 2
Ad

Viewers also liked (19)

PDF
2017-03-26 05 Алексей Еременко. Проектный менеджер моей мечты
PDF
2017-03-26 04 Екатерина Скорых. Профессия — тестировщик ПО
PDF
2017-03-26 06 Алексей Губарев. Разработка встраиваемого программного обеспеч...
PDF
2017-03-26 02 Егор Непомнящих. Что такое web front end, и с чем его едят
PDF
2017-03-26 03 Кирилл Лейфер. Прелести и ужасы мобильной разработки
PDF
2017-03-26 04 вячеслав виноградов. есть ли жизнь после релиза
PDF
2017-03-26 01 Григорий Косьяненко. Разработка ПО — это про людей, а не про код
PDF
2017-03-26 05 Дмитрий Козиенко. Оптимизируй это!
PDF
2017-03-26 02 Кирилл Лейфер. Мобильные платформы с точки зрения безопасности
PDF
2017-03-26 06 Виталий Онянов. Разработка ERP-систем
PDF
2017-03-26 03 Илья Сиганов. Что такое машинное обучение
PPTX
HappyDev-lite-2016-осень, день 2 06 Серик Бейсенов. Время собирать требования
PPTX
HappyDev-lite-2016-осень, день 2 12 Сергей Мячин. Как переделывать игру-2
PPTX
HappyDev-lite-2016-осень, день 2 09 Сергей Савченко. Школа программиста, учи...
PPTX
HappyDev-lite-2016-осень, день 2 05 Роман Прохоров. Эволюция систем обработки...
PPTX
HappyDev-lite-2016-осень, день 2 11 Анна Тарасенко. Почему нельзя просто так ...
PDF
HappyDev-lite-2016-осень, день 2 10 Алексей Коровянский. Будущее мобильной...
PDF
HappyDev-lite-2016-осень, день 2 08 Александр Мишурин. Развитие CTF-движения ...
PDF
Capturing the Unicorn: Find, Nurture, and Retain Creative Intrapreneurs in Yo...
2017-03-26 05 Алексей Еременко. Проектный менеджер моей мечты
2017-03-26 04 Екатерина Скорых. Профессия — тестировщик ПО
2017-03-26 06 Алексей Губарев. Разработка встраиваемого программного обеспеч...
2017-03-26 02 Егор Непомнящих. Что такое web front end, и с чем его едят
2017-03-26 03 Кирилл Лейфер. Прелести и ужасы мобильной разработки
2017-03-26 04 вячеслав виноградов. есть ли жизнь после релиза
2017-03-26 01 Григорий Косьяненко. Разработка ПО — это про людей, а не про код
2017-03-26 05 Дмитрий Козиенко. Оптимизируй это!
2017-03-26 02 Кирилл Лейфер. Мобильные платформы с точки зрения безопасности
2017-03-26 06 Виталий Онянов. Разработка ERP-систем
2017-03-26 03 Илья Сиганов. Что такое машинное обучение
HappyDev-lite-2016-осень, день 2 06 Серик Бейсенов. Время собирать требования
HappyDev-lite-2016-осень, день 2 12 Сергей Мячин. Как переделывать игру-2
HappyDev-lite-2016-осень, день 2 09 Сергей Савченко. Школа программиста, учи...
HappyDev-lite-2016-осень, день 2 05 Роман Прохоров. Эволюция систем обработки...
HappyDev-lite-2016-осень, день 2 11 Анна Тарасенко. Почему нельзя просто так ...
HappyDev-lite-2016-осень, день 2 10 Алексей Коровянский. Будущее мобильной...
HappyDev-lite-2016-осень, день 2 08 Александр Мишурин. Развитие CTF-движения ...
Capturing the Unicorn: Find, Nurture, and Retain Creative Intrapreneurs in Yo...
Ad

Similar to 2017-03-26 01 Анна Тарасенко. Как устроен Web изнутри (20)

PDF
Экскурс в мир WEB разработки
PPTX
интернет1
PDF
Лекции и задания по рнр
PPT
Лекция 1. Модель OSI.
PPTX
Мировые информационные ресурсы. Лекция 2
PDF
Разработка веб-сервисов осень 2013 лекция 6
PPTX
Стажировка-2013, разработчики, занятие 7. Web, HTTP
PPTX
Спецкурс "Современные практики разработки ПО", 2013-2014 уч. год, занятие 6
PPT
Web весна 2013 лекция 1
PPTX
Стажировка-2014, занятие 8. Общая архитектура web-приложений, web frameworks
PDF
JavaScript Базовый. Занятие 01.
PDF
Web осень 2013 лекция 1
PPTX
архитектура и принципы работы типового Web приложения
PPTX
Архитектура в web, доклад на Women techmakers, Omsk, 2014
PPTX
Web servers
PPT
Архитектура компьютерных сетей
PPTX
Эволюция разработки (Ермаков Игорь), Форум технологий Mail.Ru Group
PDF
Разработка мобильного и веб интерфейса для Caché
Экскурс в мир WEB разработки
интернет1
Лекции и задания по рнр
Лекция 1. Модель OSI.
Мировые информационные ресурсы. Лекция 2
Разработка веб-сервисов осень 2013 лекция 6
Стажировка-2013, разработчики, занятие 7. Web, HTTP
Спецкурс "Современные практики разработки ПО", 2013-2014 уч. год, занятие 6
Web весна 2013 лекция 1
Стажировка-2014, занятие 8. Общая архитектура web-приложений, web frameworks
JavaScript Базовый. Занятие 01.
Web осень 2013 лекция 1
архитектура и принципы работы типового Web приложения
Архитектура в web, доклад на Women techmakers, Omsk, 2014
Web servers
Архитектура компьютерных сетей
Эволюция разработки (Ермаков Игорь), Форум технологий Mail.Ru Group
Разработка мобильного и веб интерфейса для Caché

More from HappyDev-lite (12)

PPTX
HappyDev-lite-2016-осень, день 2 04 Михаил Колганов. Интерфейс пользователя ...
PPTX
HappyDev-lite-2016-осень, день 2 02 Анастасия Пиньгина. Тестировщик - больше,...
PDF
HappyDev-lite-2016-осень, день 2 01 Денис Нелюбин. Жизнь после релиза
PDF
HappyDev-lite-2016 (осень), день 1, 07 Александр Лопатюк. Дизайнерский перс...
PPTX
HappyDev-lite-2016 (осень), день 1, 06 Роман Беляев. Инструменты дизайнера
PPTX
HappyDev-lite-2016 (осень), день 1, 05 Сергей Мячин. Как постоянно переделыв...
PPTX
HappyDev-lite-2016 (осень), день 1, 04 Марина Савенко. Сделаем понятным понят...
PPTX
HappyDev-lite-2016 (осень), день 1, 03 Анастасия Дворная. Что делает дизайне...
PPTX
HappyDev-lite-2016 (осень), день 1, 02 Татьяна Шульгина. Процесс разработки в...
PPTX
HappyDev-lite-2016 (осень), день 1, 01 Елена Гальцина. От чего стоит отказать...
PPTX
HappyDev-lite-2016-весна 13 Константин Борисов. Как разговаривать с американц...
PPT
HappyDev-lite-2016-весна 12 Николай Морозов. Особенности нагрузочного тестир...
HappyDev-lite-2016-осень, день 2 04 Михаил Колганов. Интерфейс пользователя ...
HappyDev-lite-2016-осень, день 2 02 Анастасия Пиньгина. Тестировщик - больше,...
HappyDev-lite-2016-осень, день 2 01 Денис Нелюбин. Жизнь после релиза
HappyDev-lite-2016 (осень), день 1, 07 Александр Лопатюк. Дизайнерский перс...
HappyDev-lite-2016 (осень), день 1, 06 Роман Беляев. Инструменты дизайнера
HappyDev-lite-2016 (осень), день 1, 05 Сергей Мячин. Как постоянно переделыв...
HappyDev-lite-2016 (осень), день 1, 04 Марина Савенко. Сделаем понятным понят...
HappyDev-lite-2016 (осень), день 1, 03 Анастасия Дворная. Что делает дизайне...
HappyDev-lite-2016 (осень), день 1, 02 Татьяна Шульгина. Процесс разработки в...
HappyDev-lite-2016 (осень), день 1, 01 Елена Гальцина. От чего стоит отказать...
HappyDev-lite-2016-весна 13 Константин Борисов. Как разговаривать с американц...
HappyDev-lite-2016-весна 12 Николай Морозов. Особенности нагрузочного тестир...

2017-03-26 01 Анна Тарасенко. Как устроен Web изнутри

  • 1. Как устроен Web изнутри Анна Тарасенко, 7bits, генеральный директор
  • 2. Что за паутина? Web (World Wide Web, WWW) — всемирная “паутина”, состоящая из сотен миллионов серверов, хранящих и обрабатывающих документы
  • 4. Пользовательские устройства 1. Персональные компьютеры и ноутбуки 2. Планшеты и смартфоны 3. GSM-телефоны и навигаторы 4. Шлемы виртуальной реальности
  • 5. Пользовательские устройства 5. Бытовая техника, автомобили, медицинская техника 6. Банкоматы, кассы, POS-терминалы 7. Носимая электроника: умные часы, фитнес-браслеты 8. …
  • 7. Устройства могут: 1. Запускать программное обеспечение (ПО) ○ с интерфейсом пользователя ■ графическим ■ консольным ■ сенсорным, кнопочным и т.д. ○ без интерфейса пользователя
  • 8. Устройства могут: 2. Принимать и передавать данные по сети ○ проводной ○ беспроводной (например, WiFi, Bluetooth)
  • 9. Устройства могут: 3. Обмениваться данными со спутниками для позиционирования в пространстве ○ GPS ○ ГЛОНАСС 4. Обмениваться данными с сотовыми вышками ○ GSM, CDMA (2G) ○ 3G, 4G
  • 10. Устройства могут: 5. Собирать и хранить данные с датчиков ○ движения и углов наклона ○ температуры ○ света ○ прикосновения ○ давления ○ …
  • 11. Устройства могут: 6. Взаимодействовать с контроллерами аналоговых устройств: ○ моторов ○ светодиодов и лампочек ○ аудио и видео устройств ○ …
  • 12. Клиент и сервер Это деление очень условно Роли могут меняться для каждого взаимодействия
  • 14. Они взаимодействуют с Интернет 1. Через браузер 2. Через мобильное приложение 3. Через десктопное приложение (иногда это тоже браузер)
  • 15. Адреса в сети IP-address (Internet Protocol Address): ● Внешний: 93.158.134.3 (IPv4), уникален в Интернет ● Внутренний: 192.168.0.1, уникален в локальной сети Определяется провайдером Интернет
  • 17. Адреса в сети Domain name: ● yandex.ru ● google.com ● wikipedia.org Сайтом обычно называют то, что скрывается за доменным именем
  • 18. Адреса в сети DNS — Domain Name System, позволяет сопоставить доменному имени IP-адрес и наоборот
  • 20. Протоколы и уровни Протокол — набор правил, действий и их очередности, позволяющий осуществлять соединение и обмен данными между устройствами в сети
  • 21. Протоколы и уровни Сетевая модель OSI (не вся): ● Прикладной уровень (7) — HTTP, FTP (семантические данные) ● Транспортный уровень (4) — TCP, UDP (сегменты, дейтаграммы) ● Сетевой уровень (3) — IPv4, IPv6 (пакеты) ● Физический (1) — USB, витая пара (биты)
  • 23. Модель запрос-ответ в HTTP ● HTTP-request посылается клиентом, он ждет ответа в рамках соединения с сервером ● HTTP-Response отправляется сервером, либо соединение рвется
  • 24. Пример HTTP-request Метод запроса Запрашиваемый ресурс Протокол GET /wiki/Tim_Berners-Lee HTTP/1.1 Host: ru.wikipedia.org …… еще заголовки
  • 25. Пример HTTP-response Протокол Код ответа HTTP/1.1 200 OK (далее следует запрошенная страница в HTML)
  • 26. Пример HTTP-request Метод запроса Запрашиваемый ресурс Протокол POST /addcomment HTTP/1.1 Host: youtube.com comment=Hello У этих запросов есть тело (body), содержащее данные
  • 27. Пример HTTP-response Протокол Код ответа HTTP/1.1 500 Internal Server Error Сервер может прислать код ошибки вместо страницы
  • 28. Задачи сервера 1. Принимать запросы клиентов 2. Отправлять ответы клиентам 3. Хранить и обрабатывать данные 4. Искать и систематизировать данные по запросу (иногда с других серверов) Все это делает запущенное на сервере ПО
  • 30. Что умеет web-приложение 1. Чтение HTTP-запроса, формирование HTTP-ответа 2. Взаимодействие с базой данных 3. Запуск процессов по расписанию 4. Обработка и генерация данных 5. …
  • 31. Языки программирования в web C++, C#, Clojure, Erlang, Java, JavaScript, Haskell, Perl, PHP, Python, Ruby, Scala, … На самом деле любые — нужно просто уметь читать и писать символы :-)
  • 34. Самые важные языки ● English ● Русский
  • 35. Libraries and Frameworks Многие типовые задачи уже решены и на большинстве языков написаны библиотеки и/или фреймворки Фреймворк кроме инструментов задает каркас приложения
  • 36. Фреймворки в web ● C#: .NET framework ● Java: Spring и много непопулярных ● JavaScript: Node.js как платформа, на ее основе Express, Sails ● PHP: Zend framework, symfony, Cake, Cohana, Yii и много других
  • 37. Фреймворки в web ● Python: Django, Pyramid, Flask ● Ruby: Ruby on Rails (RoR), Sinatra ● Scala: Play framework, Akka, Spark Выбор языка не так важен, как выбор фреймворка!
  • 38. А еще важнее глубокое понимание принципов работы сети и архитектуры приложений, безотносительно языков и фреймворков!
  • 39. Базы данных (без подробностей) ● Реляционные: Oracle, Postgres, MySQL, MS SQL, MariaDB ● Документо-ориентированные: MongoDB, CouchDB ● Колоночные: Cassandra, HBase ● Графовые: Neo4j, OrientDB
  • 40. Выбор базы данных едва ли не более холиварная тема в ИТ, чем выбор языка или фреймворка :-)
  • 41. А что еще изучать? 1. Безопасность: шифрование данных, атаки и защиты 2. Оптимизация поиска в базе данных 3. Масштабирование: подстройка системы под увеличивающееся число запросов 4. Синхронизация данных между несколькими серверами
  • 42. А что еще изучать? 5. Многопоточность, параллельные и распределенные вычисления 6. Модель акторов 7. Шаблоны (patterns) проектирования и SOLID-принципы 8. Математическая логика, теория алгоритмов, логика Хоара
  • 43. Как лучше начать? 1. Курсы и стажировки для начинающих 2. Coursera, Khan academy, Hexlet 3. Книги от столпов индустрии: Роберт Мартин, Стив МакКоннел, Кент Бек и другие
  • 44. Что почитать? 1. Р. Мартин “Идеальный программист” 2. Р. Мартин “Чистый код” 3. К. Бек “Разработка через тестирование” 4. С. МакКоннел “Совершенный код” 5. Д. Томас, Э. Хант “Программист- прагматик. Путь от подмастерья к мастеру”
  • 45. Что почитать? 6. (*) Г. Эндрюс “Основы многопоточного, параллельного и распределенного программирования” 7. (*) Э. Таненбаум, М. Ван Стеен “Распределенные системы. Принципы и парадигмы”