Редактор mail.ru, или скорочтение за полчаса, Павел...

Редактор Mail.Ru или скорочтение за полчасаПавел Зиновкин

Редактор Mail.Ru?• Beta-тестирование с сентября, Почта и Облако

• xlsx и pptx – MS Office Web App

• doc/docx – сделали сами!

Не только редактор!Свое функциональное ядро. Оно дает:

• Просмотр документов: doc, docx, xls, xlsx, ppt, pptx, rtf

• Построение для них thumbnail’ов

• Онлайн редактирование doc и docx документов

Как все начиналосьПочта использовала просмотр документов от MS.

• Он медленный

• Нестабильный

• Black box

А что если сделать свой просмотрщик?

Как читаем документы?

Решаем читать документы сами, не через

OpenOffice!

• OO тяжелый, java

• Тяжело прогнозировать масштабируемость

• Невозможно прогнозировать гибкость решения

Читаем самиМинусы

• Бинарные форматы

• Объем работ для чтения

Плюсы

• 350 MB документации по MS форматам

• X–форматы от MS это xml в zip-архиве

• Гибкость лимитирована только нашим упорством

Учимся читая• Документация описывает структуры

• Телепатия помогает понять логику их взаимодействия

• 2 месяца чтобы сносно читать Word файлы: docx и doc

• 1 год чтобы хорошо читать все три типа документов

• до сих пор находим что-то новое

Велосипед?Да. И именной такой как нам надо.

• Высокая скорость чтения: в среднем < 1 секунды

• Вычитываем те данные которые нам нужны

• Легко вносить изменения

• Низкий процент ошибок при чтении: ~ 0.7%

Но вначале все было совсем не так хорошо.

Просмотрщик изнутри • Backend получает запрос, планирует чтение и отдает html

• Файл асинхронно скачивается и читается в очереди заданий

• Client периодически опрашивает сервер о готовности документа

• Client рендерит документ из json

Запуск просмотра• Все прогнозы были не верны. Кроме одного - насчет прогнозов.

• Не беда – пользователи этого просто не видели

• На запуске довольно много ошибок чтения документов

• Надо больше разных файлов для исправления!

• Читаем пока неудовлетворительно

Как быть?

Главное – не попадатьсяНадо строить превью документов (thumbnail’ы)

• Не сломает то что уже работало

• Очень большое количество запросов

• Легко сделать используя js просмотра и phantomjs

• Server-side JS

Как сделаны превью• Backend скачивает, читает и рендерит документ через

PhantomJS

• PhantomJS вызывается через командную строку (subprocess)

• Читается только первая страница документа

Едем в бой• Приложение не оптимально, и это ок

• Не пытаемся прогнозировать нагрузку

• Оптимизируем по реальным данным

• Даем трафик и чиним то что не выдерживает

Что не покажет профайлер?• Все что вы не профилируете!

• Невозможно профилировать весь стек приложения

• Помогут графики/таймеры на разных уровнях

Оптимизируем• Эмбедим js и css, прекомпилируем django-шаблон

• Передаем отрендеренный шаблон на stdin

• Выключаем индентацию json-данных - 7% (!) ускорения

рендеринга

• Inline base64 изображения

• Выдаем данные в bmp вместо jpeg - все равно масштабировать

• Теперь можно профилировать

SOA can kill you• Сервис-провайдер может легко вас положить

• Как и вы его

• Таймауты на все внешние запросы

• Графики на все

• Помните – это симбиоз, а не паразитирование!

Превью сейчас• Один код для чтения документов и превью!

• Время построения превью в диапазоне 480-800 ms

• 30 серверов, более 700 запросов в секунду

• Позволяют отловить ошибки логики JS

• Но не ошибки работы с конкретным браузером

• Часть превью строится через NodeJS

РедактированиеЛогично, но:

• Качество html рендеринга не лучшее

• Нужна нормальная печать документов

• Формат, в который читаем, не удобен

• Сможем сохранять только в docx

• Не храним данные. Документ сохраняется в Облако.

Рендеринг• Html -> Canvas или SVG. Выбираем Canvas

• Высокая точность рендеринга

• Форма обратной связи делает скриншот того что видит

пользователь

• Некоторые проблемы с браузерами

Печать документов• HTML не передает всех деталей

• Добавляет хедеры/футеры

• Canvas позволяет генерировать pdf на сервере

• Для показа диалога печати встраиваем JS в pdf

• Иногда может не работать

Протокол• Древовидные JSON-структуры это плохо

• Нужно уметь передавать документ по частям

• Нужно обращаться по индексам

• Строка + элементы на ней

• Приходится менять логику чтения и показа – дублируем код!

Редактирование сейчас• Beta

• Более 200 человек онлайн

• Ведется интенсивная разработка

О качестве• Простота кода

• Документация

• Надежность, точность и гибкость инструментов

Тесты• Unit-тесты, в том числе и для js

• Сложно писать тесты для форматов. Используем регрессии

• Resave: json1 -> document -> json2, json1 == json2 ?

• Делаем скриншоты между ветками и сравниваем их

Инструменты• Sentry и graphite/statsd для графиков из приложений

• Diamond для графиков с серверов

• Jenkins: тесты на каждый комит, регрессии

• Phabricator для код-ревью

Вопросы?

Павел ЗиновкинРуководитель группы разработки, Почта@Mail.Ru

p.zinovkin@corp.mail.ru