НЕТРИВИАЛЬНЫЙ ВЕБ
Пашкевич Дмитрий«Тамтэк», директор
Как устроен веб
Части системы• Пользователь: человек или робот• Браузер: IE, Chrome, Safari, Opera• Страница: HTML, CSS, JavaScript• Сеть интернет: HTTP, DNS, TCP/IP• Веб-сервер: Apache, Nginx, IIS• Веб-приложение: PHP, Python, Java, .Net• База данных: MySQL, PostgreSQL, MongoDB• Кэш: Memcache, Redis, Varnish
FRONTEND / САЙТ
Браузеры
На волнах Интернет• DNS преобразует имя сайта в IP адрес• HTTP – язык для общения браузера и веб-
сервера без установления постоянного соединения
• TCP/IP отвечает за гарантированную доставку документов и файлов
DNS + HTTP + TCP/IP
1. Узнаем IP по имени сайта через DNS2. Отправляем HTTP запрос на веб-сервер3. Получаем HTTP ответ (страницу)4. Отображаем страницу пользователю
Браузер. Frontend• HTML – язык разметки документа• CSS – стиль и красота• JavaScript – динамика, реакция на события
• Браузер загружает документ, стили, скрипты, картинку и «статику» с сервера через Интернет и отображает их во взаимодействии с пользователем
Родом из мира модемов• HTTP– прост, как 3 копейки• GET http://thumbtack.ru HTTP/1.1
– каждый запрос – отдельное соединение• Большая страница – много элементов, много
соединенийБольшое количество запросов замедляет загрузку страницы
Инструмент разработчика позволяет проводить отладку в браузере
Frontend: типичные проблемы• Долгая загрузка страницы– Много запросов– «Тяжелые» ресурсы
• Разная реализация стандартов браузерами• Высокая ресурсоемкость JavaScript• Плохо структурированный код
Frontend: стратегия оптимизации• Быстрее начинать показывать контент• Минимизировать количество соединений• Уменьшать объем данных• Хранить данные близко к пользователю• Использовать кеш для статических ресурсов• Быть аккуратнее со скриптами
Frontend: вредные советы• Верстайте «в таблицах»• Не включайте на сервере Keep-alive• Берите картинки в максимально доступном
разрешении• Не тратьте время на кеширование и CDN• Assets только для слабаков• Загружайте сразу весь контент. Не важно,
что 90% пользователь его не увидят• Тестируют только неуверенные в себе
Рейтинг и рекомендации
Инструменты диагностики сайтов• Встроенные инструменты браузеров• WebPageTest• Google PageSpeed
Позволяют понять, как сделать отображение страницы более быстрым. Дают конкретные рекомендации.
Backend /СЕРВЕР
Нескучный Backend
Что происходит на Backend• Получение запроса пользователя• Сбор данных из разных источников• Обработка данных• Сборка страницы для показа пользователю• Оптимизация и отправка страницы• Длительные фоновые операции
Backend: проблемы• Их очень много и они разные• Неоптимизированный код• Медленные запросы к базе данных– Нет индексов– Много запросов в цикле
• Отказ серверов• А что, если придет 1 млн пользователей?
Масштабирование backend
Масштабируемая архитектура
Frontend vs. Backend
Frontend Backend
Можно показать бабушке + -
Низкий порог вхождения +/- -
Удовольствие от решения сложных задач
+ ++
Работа мечты
Обучение в «Тамтэк»• Школа Разработчика– Сервер + веб + мобайл– Набор весной, обучение с сентября
• Школа Тестировщиков– Следите за объявлениями!
• Больше подробностей на стенде «Тамтэк» и на сайте thumbtack.ru/training/
Спасибо за внимание!
Пашкевич Дмитрий«Тамтэк», директор
Skype, vk.com: dmitrypashkevich