НЕТРИВИАЛЬНЫЙ ВЕБ

Пашкевич Дмитрий«Тамтэк», директор

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

Части системы• Пользователь: человек или робот• Браузер: 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