"Jaggery.js — сладкие корпоративные решения", Александр Новиков, MoscowJS 15
Доклад Юрия Насретдинова на MoscowJS Meetup. "Как мы начали...
-
Upload
badoo-development -
Category
Technology
-
view
763 -
download
2
description
Transcript of Доклад Юрия Насретдинова на MoscowJS Meetup. "Как мы начали...
![Page 1: Доклад Юрия Насретдинова на MoscowJS Meetup. "Как мы начали работать со статикой (js/css/img) и уменьшили трафик](https://reader034.fdocuments.net/reader034/viewer/2022042613/554ba5c0b4c905b3618b4ec3/html5/thumbnails/1.jpg)
Работа со статикой в Badoo
Юрий Насретдинов, разработчик
![Page 2: Доклад Юрия Насретдинова на MoscowJS Meetup. "Как мы начали работать со статикой (js/css/img) и уменьшили трафик](https://reader034.fdocuments.net/reader034/viewer/2022042613/554ba5c0b4c905b3618b4ec3/html5/thumbnails/2.jpg)
Badoo• 205+ млн пользователей
• PHP-FPM: 40+ тыс запросов в сек
• 300 тыс регистраций в день
• 5 млн фото / видео в день
• 50 языков интерфейса
• 2 000+ серверов
![Page 3: Доклад Юрия Насретдинова на MoscowJS Meetup. "Как мы начали работать со статикой (js/css/img) и уменьшили трафик](https://reader034.fdocuments.net/reader034/viewer/2022042613/554ba5c0b4c905b3618b4ec3/html5/thumbnails/3.jpg)
«Статика» в Badoo• Статика — JS / CSS / картинки (фотографии пользователей хранятся отдельно)
• 100 Мб статики в репозитории
• SSI includes
• Кросс-зависимости: JS подгружает JS и CSS
• Deploy 2 раза в день
![Page 4: Доклад Юрия Насретдинова на MoscowJS Meetup. "Как мы начали работать со статикой (js/css/img) и уменьшили трафик](https://reader034.fdocuments.net/reader034/viewer/2022042613/554ba5c0b4c905b3618b4ec3/html5/thumbnails/4.jpg)
Версионирование• Не версионировать:
- полагаться на If-Modified-Since, E-Tag, …
• У всех файлов одна и та же версия: - при деплое рост трафика в 2 раза - полная инвалидация кеша клиента
• У каждого файла своя версия:- загружаются только изменения
![Page 5: Доклад Юрия Насретдинова на MoscowJS Meetup. "Как мы начали работать со статикой (js/css/img) и уменьшили трафик](https://reader034.fdocuments.net/reader034/viewer/2022042613/554ba5c0b4c905b3618b4ec3/html5/thumbnails/5.jpg)
Нет версионирования• У всех файлов нет версий и они всегда запрашиваются по одному и тому же URL
• Браузеры очень кешируют статику
• Прокси-серверы кешируют статику
• Во время деплоя часть файлов может обновиться, а часть — нет
• Пользователи обычно не жмут Ctrl+F5
![Page 6: Доклад Юрия Насретдинова на MoscowJS Meetup. "Как мы начали работать со статикой (js/css/img) и уменьшили трафик](https://reader034.fdocuments.net/reader034/viewer/2022042613/554ba5c0b4c905b3618b4ec3/html5/thumbnails/6.jpg)
Одна версия у всех файлов• Удобно: не требуется думать о версиях файлов в CSS / JS
• Надежно: не требуется анализировать зависимости, состояние всегда согласовано
• Неэффективное использование кеша клиента — при деплое весь кеш инвалидируется
![Page 7: Доклад Юрия Насретдинова на MoscowJS Meetup. "Как мы начали работать со статикой (js/css/img) и уменьшили трафик](https://reader034.fdocuments.net/reader034/viewer/2022042613/554ba5c0b4c905b3618b4ec3/html5/thumbnails/7.jpg)
Пофайловая версионность• Маркеры version(filename) — явное версионирование файлов в CSS/JS
• Цепочка зависимостей:- A -> B -> C- поменялся A, нужно дать новую версию B и C
• Сложно следить за согласованностью версий
![Page 8: Доклад Юрия Насретдинова на MoscowJS Meetup. "Как мы начали работать со статикой (js/css/img) и уменьшили трафик](https://reader034.fdocuments.net/reader034/viewer/2022042613/554ba5c0b4c905b3618b4ec3/html5/thumbnails/8.jpg)
Devel-окружение• Статика отдается через PHP и собирается «на лету»
• URL без version(…) отдают 404
• Переключатели:- включение сжатия- отключение debug-строк - (CSS only) замена #include на @import
![Page 9: Доклад Юрия Насретдинова на MoscowJS Meetup. "Как мы начали работать со статикой (js/css/img) и уменьшили трафик](https://reader034.fdocuments.net/reader034/viewer/2022042613/554ba5c0b4c905b3618b4ec3/html5/thumbnails/9.jpg)
Deploy• PHP-скрипт по обработке и загрузке файлов
• Карты:- [filename => contents_md5] - [filename => version]
• Порядок действий: - составляем зависимости [filename => […]]- находим изменившиеся файлы - перегенерируем изменившиеся файлы и их зависимости
![Page 10: Доклад Юрия Насретдинова на MoscowJS Meetup. "Как мы начали работать со статикой (js/css/img) и уменьшили трафик](https://reader034.fdocuments.net/reader034/viewer/2022042613/554ba5c0b4c905b3618b4ec3/html5/thumbnails/10.jpg)
Дополнительные возможности• Автоматическая генерация RTL-версии в
CSS
• Поддержка «include path» — можно писать include и URL до файлов с точностью до директории
• Include path — список директорий, в которых ищется файл; просматривается по порядку
![Page 11: Доклад Юрия Насретдинова на MoscowJS Meetup. "Как мы начали работать со статикой (js/css/img) и уменьшили трафик](https://reader034.fdocuments.net/reader034/viewer/2022042613/554ba5c0b4c905b3618b4ec3/html5/thumbnails/11.jpg)
Пример// something.js !
#include "funcs.js" #include "virtual:config.phtml" !
var el = document .createElement('script'); !
el.src = 'version(app.js)';
![Page 12: Доклад Юрия Насретдинова на MoscowJS Meetup. "Как мы начали работать со статикой (js/css/img) и уменьшили трафик](https://reader034.fdocuments.net/reader034/viewer/2022042613/554ba5c0b4c905b3618b4ec3/html5/thumbnails/12.jpg)
Пример
// something.css #include "head.css" !
.mydiv { background: url(version(i.png)); float: left; }
![Page 13: Доклад Юрия Насретдинова на MoscowJS Meetup. "Как мы начали работать со статикой (js/css/img) и уменьшили трафик](https://reader034.fdocuments.net/reader034/viewer/2022042613/554ba5c0b4c905b3618b4ec3/html5/thumbnails/13.jpg)
Пример (RTL-версия)
// something.css #include "head.css" !
.mydiv { background: url(version(i.png)); float: right; }
![Page 14: Доклад Юрия Насретдинова на MoscowJS Meetup. "Как мы начали работать со статикой (js/css/img) и уменьшили трафик](https://reader034.fdocuments.net/reader034/viewer/2022042613/554ba5c0b4c905b3618b4ec3/html5/thumbnails/14.jpg)
До: После:
![Page 15: Доклад Юрия Насретдинова на MoscowJS Meetup. "Как мы начали работать со статикой (js/css/img) и уменьшили трафик](https://reader034.fdocuments.net/reader034/viewer/2022042613/554ba5c0b4c905b3618b4ec3/html5/thumbnails/15.jpg)
До: После: