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

1. НЕТРИВИАЛЬНЫЙ ВЕБ
Пашкевич Дмитрий
«Тамтэк», директор

2. Как устроен веб

3. Части системы
• Пользователь: человек или робот
• Браузер: IE, Chrome, Safari, Opera
• Страница: HTML, CSS, JavaScript
• Сеть интернет: HTTP, DNS, TCP/IP
• Веб-сервер: Apache, Nginx, IIS
• Веб-приложение: PHP, Python, Java, .Net
• База данных: MySQL, PostgreSQL, MongoDB
• Кэш: Memcache, Redis, Varnish

4. FRONTEND / САЙТ

5. Браузеры

6. На волнах Интернет
• DNS преобразует имя сайта в IP адрес
• HTTP – язык для общения браузера и веб-
сервера без установления постоянного
соединения
• TCP/IP отвечает за гарантированную
доставку документов и файлов

7. DNS + HTTP + TCP/IP
1. Узнаем IP по имени сайта через DNS
2. Отправляем HTTP запрос на веб-сервер
3. Получаем HTTP ответ (страницу)
4. Отображаем страницу пользователю

8. Браузер. Frontend
• HTML – язык разметки документа
• CSS – стиль и красота
• JavaScript – динамика, реакция на события
• Браузер загружает документ, стили,
скрипты, картинку и «статику» с сервера
через Интернет и отображает их во
взаимодействии с пользователем

9. Родом из мира модемов
• HTTP
– прост, как 3 копейки
• GET http://thumbtack.ru HTTP/1.1
– каждый запрос – отдельное соединение
• Большая страница – много элементов, много
соединений
Большое количество
запросов замедляет
загрузку страницы
Инструмент
разработчика
позволяет проводить
отладку в браузере

10. Frontend: типичные проблемы
• Долгая загрузка страницы
– Много запросов
– «Тяжелые» ресурсы
• Разная реализация стандартов браузерами
• Высокая ресурсоемкость JavaScript
• Плохо структурированный код

11. Frontend: стратегия оптимизации
• Быстрее начинать показывать контент
• Минимизировать количество соединений
• Уменьшать объем данных
• Хранить данные близко к пользователю
• Использовать кеш для статических ресурсов
• Быть аккуратнее со скриптами

12. Frontend: вредные советы
• Верстайте «в таблицах»
• Не включайте на сервере Keep-alive
• Берите картинки в максимально доступном
разрешении
• Не тратьте время на кеширование и CDN
• Assets только для слабаков
• Загружайте сразу весь контент. Не важно,
что 90% пользователь его не увидят
• Тестируют только неуверенные в себе

13. Рейтинг и
рекомендации

15. Инструменты диагностики сайтов
• Встроенные инструменты браузеров
• WebPageTest
• Google PageSpeed
Позволяют понять, как сделать отображение
страницы более быстрым. Дают
конкретные рекомендации.

16. Backend /
СЕРВЕР

17. Нескучный Backend

18. Что происходит на Backend
• Получение запроса пользователя
• Сбор данных из разных источников
• Обработка данных
• Сборка страницы для показа пользователю
• Оптимизация и отправка страницы
• Длительные фоновые операции

19. Backend: проблемы
• Их очень много и они разные
• Неоптимизированный код
• Медленные запросы к базе данных
– Нет индексов
– Много запросов в цикле
• Отказ серверов
• А что, если придет 1 млн пользователей?

20. Масштабирование backend

21. Масштабируемая архитектура

22. Frontend vs. Backend
Frontend Backend
Можно показать бабушке + -
Низкий порог вхождения +/- -
Удовольствие от решения сложных
задач
+ ++

23. Работа мечты 

24. Обучение в «Тамтэк»
• Школа Разработчика
– Сервер + веб + мобайл
– Набор весной, обучение с сентября
• Школа Тестировщиков
– Следите за объявлениями!
• Больше подробностей на стенде «Тамтэк» и
на сайте thumbtack.ru/training/

25. Спасибо за внимание!
Пашкевич Дмитрий
«Тамтэк», директор
Skype, vk.com: dmitrypashkevich