Редактор Mail.ru, или скорочтение за полчаса, Павел...
description
Transcript of Редактор Mail.ru, или скорочтение за полчаса, Павел...
![Page 1: Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)](https://reader033.fdocuments.in/reader033/viewer/2022061611/5585ba02d8b42a49548b4ce4/html5/thumbnails/1.jpg)
Редактор Mail.Ru или скорочтение за полчасаПавел Зиновкин
![Page 2: Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)](https://reader033.fdocuments.in/reader033/viewer/2022061611/5585ba02d8b42a49548b4ce4/html5/thumbnails/2.jpg)
Редактор Mail.Ru?• Beta-тестирование с сентября, Почта и Облако
• xlsx и pptx – MS Office Web App
• doc/docx – сделали сами!
![Page 3: Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)](https://reader033.fdocuments.in/reader033/viewer/2022061611/5585ba02d8b42a49548b4ce4/html5/thumbnails/3.jpg)
![Page 4: Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)](https://reader033.fdocuments.in/reader033/viewer/2022061611/5585ba02d8b42a49548b4ce4/html5/thumbnails/4.jpg)
![Page 5: Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)](https://reader033.fdocuments.in/reader033/viewer/2022061611/5585ba02d8b42a49548b4ce4/html5/thumbnails/5.jpg)
Не только редактор!Свое функциональное ядро. Оно дает:
• Просмотр документов: doc, docx, xls, xlsx, ppt, pptx, rtf
• Построение для них thumbnail’ов
• Онлайн редактирование doc и docx документов
![Page 6: Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)](https://reader033.fdocuments.in/reader033/viewer/2022061611/5585ba02d8b42a49548b4ce4/html5/thumbnails/6.jpg)
Как все начиналосьПочта использовала просмотр документов от MS.
• Он медленный
• Нестабильный
• Black box
А что если сделать свой просмотрщик?
![Page 7: Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)](https://reader033.fdocuments.in/reader033/viewer/2022061611/5585ba02d8b42a49548b4ce4/html5/thumbnails/7.jpg)
Как читаем документы?
Решаем читать документы сами, не через
OpenOffice!
• OO тяжелый, java
• Тяжело прогнозировать масштабируемость
• Невозможно прогнозировать гибкость решения
![Page 8: Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)](https://reader033.fdocuments.in/reader033/viewer/2022061611/5585ba02d8b42a49548b4ce4/html5/thumbnails/8.jpg)
Читаем самиМинусы
• Бинарные форматы
• Объем работ для чтения
Плюсы
• 350 MB документации по MS форматам
• X–форматы от MS это xml в zip-архиве
• Гибкость лимитирована только нашим упорством
![Page 9: Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)](https://reader033.fdocuments.in/reader033/viewer/2022061611/5585ba02d8b42a49548b4ce4/html5/thumbnails/9.jpg)
Учимся читая• Документация описывает структуры
• Телепатия помогает понять логику их взаимодействия
• 2 месяца чтобы сносно читать Word файлы: docx и doc
• 1 год чтобы хорошо читать все три типа документов
• до сих пор находим что-то новое
![Page 10: Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)](https://reader033.fdocuments.in/reader033/viewer/2022061611/5585ba02d8b42a49548b4ce4/html5/thumbnails/10.jpg)
Велосипед?Да. И именной такой как нам надо.
• Высокая скорость чтения: в среднем < 1 секунды
• Вычитываем те данные которые нам нужны
• Легко вносить изменения
• Низкий процент ошибок при чтении: ~ 0.7%
Но вначале все было совсем не так хорошо.
![Page 11: Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)](https://reader033.fdocuments.in/reader033/viewer/2022061611/5585ba02d8b42a49548b4ce4/html5/thumbnails/11.jpg)
Просмотрщик изнутри • Backend получает запрос, планирует чтение и отдает html
• Файл асинхронно скачивается и читается в очереди заданий
• Client периодически опрашивает сервер о готовности документа
• Client рендерит документ из json
![Page 12: Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)](https://reader033.fdocuments.in/reader033/viewer/2022061611/5585ba02d8b42a49548b4ce4/html5/thumbnails/12.jpg)
Запуск просмотра• Все прогнозы были не верны. Кроме одного - насчет прогнозов.
• Не беда – пользователи этого просто не видели
• На запуске довольно много ошибок чтения документов
• Надо больше разных файлов для исправления!
• Читаем пока неудовлетворительно
Как быть?
![Page 13: Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)](https://reader033.fdocuments.in/reader033/viewer/2022061611/5585ba02d8b42a49548b4ce4/html5/thumbnails/13.jpg)
Главное – не попадатьсяНадо строить превью документов (thumbnail’ы)
• Не сломает то что уже работало
• Очень большое количество запросов
• Легко сделать используя js просмотра и phantomjs
• Server-side JS
![Page 14: Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)](https://reader033.fdocuments.in/reader033/viewer/2022061611/5585ba02d8b42a49548b4ce4/html5/thumbnails/14.jpg)
![Page 15: Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)](https://reader033.fdocuments.in/reader033/viewer/2022061611/5585ba02d8b42a49548b4ce4/html5/thumbnails/15.jpg)
Как сделаны превью• Backend скачивает, читает и рендерит документ через
PhantomJS
• PhantomJS вызывается через командную строку (subprocess)
• Читается только первая страница документа
![Page 16: Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)](https://reader033.fdocuments.in/reader033/viewer/2022061611/5585ba02d8b42a49548b4ce4/html5/thumbnails/16.jpg)
Едем в бой• Приложение не оптимально, и это ок
• Не пытаемся прогнозировать нагрузку
• Оптимизируем по реальным данным
• Даем трафик и чиним то что не выдерживает
![Page 17: Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)](https://reader033.fdocuments.in/reader033/viewer/2022061611/5585ba02d8b42a49548b4ce4/html5/thumbnails/17.jpg)
Что не покажет профайлер?• Все что вы не профилируете!
• Невозможно профилировать весь стек приложения
• Помогут графики/таймеры на разных уровнях
![Page 18: Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)](https://reader033.fdocuments.in/reader033/viewer/2022061611/5585ba02d8b42a49548b4ce4/html5/thumbnails/18.jpg)
Оптимизируем• Эмбедим js и css, прекомпилируем django-шаблон
• Передаем отрендеренный шаблон на stdin
• Выключаем индентацию json-данных - 7% (!) ускорения
рендеринга
• Inline base64 изображения
• Выдаем данные в bmp вместо jpeg - все равно масштабировать
• Теперь можно профилировать
![Page 19: Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)](https://reader033.fdocuments.in/reader033/viewer/2022061611/5585ba02d8b42a49548b4ce4/html5/thumbnails/19.jpg)
SOA can kill you• Сервис-провайдер может легко вас положить
• Как и вы его
• Таймауты на все внешние запросы
• Графики на все
• Помните – это симбиоз, а не паразитирование!
![Page 20: Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)](https://reader033.fdocuments.in/reader033/viewer/2022061611/5585ba02d8b42a49548b4ce4/html5/thumbnails/20.jpg)
Превью сейчас• Один код для чтения документов и превью!
• Время построения превью в диапазоне 480-800 ms
• 30 серверов, более 700 запросов в секунду
• Позволяют отловить ошибки логики JS
• Но не ошибки работы с конкретным браузером
• Часть превью строится через NodeJS
![Page 21: Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)](https://reader033.fdocuments.in/reader033/viewer/2022061611/5585ba02d8b42a49548b4ce4/html5/thumbnails/21.jpg)
РедактированиеЛогично, но:
• Качество html рендеринга не лучшее
• Нужна нормальная печать документов
• Формат, в который читаем, не удобен
• Сможем сохранять только в docx
• Не храним данные. Документ сохраняется в Облако.
![Page 22: Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)](https://reader033.fdocuments.in/reader033/viewer/2022061611/5585ba02d8b42a49548b4ce4/html5/thumbnails/22.jpg)
Рендеринг• Html -> Canvas или SVG. Выбираем Canvas
• Высокая точность рендеринга
• Форма обратной связи делает скриншот того что видит
пользователь
• Некоторые проблемы с браузерами
![Page 23: Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)](https://reader033.fdocuments.in/reader033/viewer/2022061611/5585ba02d8b42a49548b4ce4/html5/thumbnails/23.jpg)
Печать документов• HTML не передает всех деталей
• Добавляет хедеры/футеры
• Canvas позволяет генерировать pdf на сервере
• Для показа диалога печати встраиваем JS в pdf
• Иногда может не работать
![Page 24: Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)](https://reader033.fdocuments.in/reader033/viewer/2022061611/5585ba02d8b42a49548b4ce4/html5/thumbnails/24.jpg)
Протокол• Древовидные JSON-структуры это плохо
• Нужно уметь передавать документ по частям
• Нужно обращаться по индексам
• Строка + элементы на ней
• Приходится менять логику чтения и показа – дублируем код!
![Page 25: Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)](https://reader033.fdocuments.in/reader033/viewer/2022061611/5585ba02d8b42a49548b4ce4/html5/thumbnails/25.jpg)
Редактирование сейчас• Beta
• Более 200 человек онлайн
• Ведется интенсивная разработка
![Page 26: Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)](https://reader033.fdocuments.in/reader033/viewer/2022061611/5585ba02d8b42a49548b4ce4/html5/thumbnails/26.jpg)
О качестве• Простота кода
• Документация
• Надежность, точность и гибкость инструментов
![Page 27: Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)](https://reader033.fdocuments.in/reader033/viewer/2022061611/5585ba02d8b42a49548b4ce4/html5/thumbnails/27.jpg)
Тесты• Unit-тесты, в том числе и для js
• Сложно писать тесты для форматов. Используем регрессии
• Resave: json1 -> document -> json2, json1 == json2 ?
• Делаем скриншоты между ветками и сравниваем их
![Page 28: Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)](https://reader033.fdocuments.in/reader033/viewer/2022061611/5585ba02d8b42a49548b4ce4/html5/thumbnails/28.jpg)
Инструменты• Sentry и graphite/statsd для графиков из приложений
• Diamond для графиков с серверов
• Jenkins: тесты на каждый комит, регрессии
• Phabricator для код-ревью