Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Редактор Mail.Ru 
или скорочтение за 
полчаса 
Павел Зиновкин
Редактор Mail.Ru? 
• Beta-тестирование с сентября, Почта и Облако 
• xlsx и pptx – MS Office Web App 
• doc/docx – сделали...
Не только редактор! 
Свое функциональное ядро. Оно дает: 
• Просмотр документов: doc, docx, xls, xlsx, ppt, pptx, rtf 
• П...
Как все начиналось 
Почта использовала просмотр документов от MS. 
• Он медленный 
• Нестабильный 
• Black box 
А что если...
Как читаем документы? 
Решаем читать документы сами, не через OpenOffice! 
• OO тяжелый, java 
• Тяжело прогнозировать мас...
Читаем сами 
Минусы 
• Бинарные форматы 
• Объем работ для чтения 
Плюсы 
• 350 MB документации по MS форматам 
• X–формат...
Учимся читая 
• Документация описывает структуры 
• Телепатия помогает понять логику их взаимодействия 
• 2 месяца чтобы с...
Велосипед? 
Да. И именной такой как нам надо. 
• Высокая скорость чтения: в среднем < 1 секунды 
• Вычитываем те данные ко...
Просмотрщик изнутри 
• Backend получает запрос, планирует чтение и отдает html 
• Файл асинхронно скачивается и читается в...
Запуск просмотра 
• Все прогнозы были не верны. Кроме одного - насчет прогнозов. 
• Не беда – пользователи этого просто не...
Главное – не попадаться 
Надо строить превью документов (thumbnail’ы) 
• Не сломает то что уже работало 
• Очень большое к...
Как сделаны превью 
• Backend скачивает, читает и рендерит документ через PhantomJS 
• PhantomJS вызывается через командну...
Едем в бой 
• Приложение не оптимально, и это ок 
• Не пытаемся прогнозировать нагрузку 
• Оптимизируем по реальным данным...
Что не покажет профайлер? 
• Все что вы не профилируете! 
• Невозможно профилировать весь стек приложения 
• Помогут графи...
Оптимизируем 
• Эмбедим js и css, прекомпилируем django-шаблон 
• Передаем отрендеренный шаблон на stdin 
• Выключаем инде...
SOA can kill you 
• Сервис-провайдер может легко вас положить 
• Как и вы его 
• Таймауты на все внешние запросы 
• График...
Превью сейчас 
• Один код для чтения документов и превью! 
• Время построения превью в диапазоне 480-800 ms 
• 30 серверов...
Редактирование 
Логично, но: 
• Качество html рендеринга не лучшее 
• Нужна нормальная печать документов 
• Формат, в кото...
Рендеринг 
• Html -> Canvas или SVG. Выбираем Canvas 
• Высокая точность рендеринга 
• Форма обратной связи делает скриншо...
Печать документов 
• HTML не передает всех деталей 
• Добавляет хедеры/футеры 
• Canvas позволяет генерировать pdf на серв...
Протокол 
• Древовидные JSON-структуры это плохо 
• Нужно уметь передавать документ по частям 
• Нужно обращаться по индек...
Редактирование сейчас 
• Beta 
• Более 200 человек онлайн 
• Ведется интенсивная разработка
О качестве 
• Простота кода 
• Документация 
• Надежность, точность и гибкость инструментов
Тесты 
• Unit-тесты, в том числе и для js 
• Сложно писать тесты для форматов. Используем регрессии 
• Resave: json1 -> do...
Инструменты 
• Sentry и graphite/statsd для графиков из приложений 
• Diamond для графиков с серверов 
• Jenkins: тесты на...
Вопросы? 
Павел Зиновкин 
Руководитель группы разработки, Почта@Mail.Ru 
p.zinovkin@corp.mail.ru
Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)
Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)
Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)
Upcoming SlideShare
Loading in …5
×

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

1,522 views

Published on

Доклад Павла Зиновкина на HighLoad++ 2014.

Published in: Internet
  • Be the first to comment

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

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

×