У нас новые онлайны!
Ох, как долго мы этого ждали
Часть первая. Версия издателя
Первый онлайн «Медуза» провела в декабре 2014 года, через полтора месяца после запуска. Это была пресс-конференция Владимира Путина.
Запустились мы в конце октября 2014-го. Ситуация была такая: мы только появились, задач по дизайну и разработке миллион, и тут еще одна проблема — за месяц надо сделать работающие онлайны в вебе и приложениях (а Apple тогда проверяла новые сборки приложений неделю-две).
Свой движок в таких условиях мы сделать не могли — и тут на помощь к нам пришли ребята из Look at Media, которые как раз открыли собственные онлайны и сделали их доступными не только для своих редакций (и назвали их Waterfall). Это нам очень помогло, за что огромное спасибо Леше Аметову, Роме Худоногову и Лене Колобаевой. Помнится, первый онлайн плохо перенес нагрузки, и мы решали проблемы вместе в телеграм-чатике, на лету подключая сервера.
Waterfall — отличная система, но примерно сразу же мы стали думать о собственном движке.
С одной стороны — это, конечно, с жиру беситься. С другой — тут, в некотором роде, открывается суть современных медиа. Дело в том, что современное медиа — это его CMS. «Медуза» — это «Монитор». Он отражает то, как мы думаем, как мы относимся к контенту, как пишем и публикуем тексты. Это не наша уникальная идея, почитайте, скажем, интервью с исполнительным операционным директором Vox Media Лорен Рабайно, она буквально то же самое говорит про их Chorus:
Я прихожу на конференции, и мне люди из газет говорят: «Слушайте, нам так нравится Chorus, можно купить лицензию?» И если честно, я не думаю, что, если мы дадим какой-нибудь газете Chorus, это решит их проблемы. Ценность Chorus для меня — в компании, которая ее сделала. Это наш способ работы, это то, благодаря чему у нас получается работать быстро, это про включенность нашей редакционной команды в продукт и дизайн. Это про то, как мы зарабатываем деньги и как придумываем новые возможности для рекламодателей. Chorus — результат той культуры, которую мы тут выстроили. И как программное обеспечение само по себе она не производит такого впечатления.
Поэтому любые сторонние решения для публикации контента, какими бы крутыми они ни были, не полностью (или полностью не) соответствуют вашему стилю работы, а значит, разрушают вашу экосистему. Любой формат, пока мы им пользуемся, оттачивается, развивается и преображается. И встраивается в общую систему публикаций — например, в конце 2016 года мы перезапустили текстовый редактор «Монитора». Это повлияло на все типы материалов.
Кроме онлайнов.
Важно отметить, что ребята из Waterfall готовы были развивать онлайны, но для нас этот процесс все время оказывался на периферии внимания — не наш движок, значит, думаем о нем в последнюю очередь. То есть не развиваем вообще.
Вообще, с онлайнами есть еще такая проблема: мы их делаем редко, но метко. Онлайн — это спящий зверь, которого никогда не видно, но если он проснулся — гром гремит, земля трясется.
Сформулируем по-другому: мы делаем онлайны редко, но почти всегда, когда делаем — это главный материал на «Медузе». Ничего больше не имеет значения. Потому что, как правило, онлайн — это когда убивают российского посла в Анкаре, устраивают теракт в Петербурге или в Турции случается переворот.
Короче говоря, онлайны не развивались. Вообще. В какой-то момент наш заместитель технического директора Боря Горячев обнаружил, что, скажем, в приложениях в онлайнах используется шрифт, от которого мы на всей «Медузе» отказались два года назад. Еще в приложениях ужасно загружались эмбеды. Строго говоря, практически не загружались.
Наверное, все это можно было править, но на правки не хватало сил, а концепция новых онлайнов постепенно формулировалась. И наконец сформулировалась.
Что мы сделали?
- Онлайны фактически стали живыми карточками: наш карточный дизайн (здравствуйте, любимые карточки и слайды) постепенно эволюционирует. На нынешнем этапе эволюции он превратился в онлайны.
2. Как можно заметить по картинке выше, мы двигаемся от излишней выразительности в сторону максимальной функциональности. Это касается не всех форматов, разумеется, но в онлайнах — это ключевая вещь. Ничто не должно отвлекать от контента, никаких изысков — надо понимать, что онлайн может быть и про «Оскар», и про катастрофу, в которой погибли сотни человек. Дизайн не должен подразумевать дополнительных коннотаций.
3. Поэтому, например, мы тут даже отказались от заходной картинки (фоторедакторам приходилось менять картинку по ходу онлайна, причем смысла в этой работе особого не было; картинка все равно опаздывала от обновлений).
4. Еще мы отказались от лида: вместо него появился желтый блок, он используется уже полгода во всей «Медузе» и называется «Дисклеймер». В онлайнах он заменяет лид, его задача — максимально быстро ввести в курс дела тех, кто только пришел.
5. Вместо заходной картинки над самим онлайном (помимо заголовка и дисклеймера) есть текстовое поле. В нем может быть что угодно (или не быть ничего). Мы считаем это полем для запиненных объектов. Скажем, если у кого-то есть прямая трансляция с места события, ее можно поставить сюда эмбедом. Или если появились какие-то знаковые фотографии, они тоже могут тут оказаться. Или есть набор важных ссылок. Все, что угодно. Или ничего.
Главный принцип: если не знаешь, как что-то будет работать, не делай этого
Важнейший принцип работы, к которому мы пришли далеко не сразу, а наступив на кучу грабель. Принцип такой: придумал что-то, но не уверен, что оно нужно? Не делай.
Изначальный дизайн онлайнов был гораздо ближе к карточкам. Скажем, там было оглавление. В карточках оглавление имеет исключительно декоративное и психологическое значение — оно создает ощущение разложенности по полочкам и книжности. Для дела им почти никто не пользуется. В онлайнах оглавление используется для собирания ключевых событий. Вот, например, онлайн Guardian:
Приятная штука, конечно. Мы собирались сделать. Потом поговорили про нее час и собрали список вопросов:
- А нужна ли эта штука в мобилах, где большинство наших читателей? И как она там будет работать?
- Как выбирать события в этот блок? Не будет ли редактор забывать это делать? Что за заголовки туда идут?
- Если у нас есть «Дисклеймер», не достаточно ли этого для обозначения ключевых событий?
- Как этим вообще этим будут пользоваться читатели? Для чего им это?
По отдельности на каждый из вопросов можно ответить, но ответы получатся неубедительными. Очевидно, делать эту хрень не надо. И мы не сделали.
Главная наша победа в онлайнах — здесь нет никаких новых средств выразительности. Мы довольно сильно разнообразили возможности редактора за последние полгода (желтые маркеры, дисклеймеры, новые виды заголовков, сложная верстка картинок, сноски) — и главная задача сделать все эти средства выразительности сквозными для всех форматов на всех платформах, при этом не вводить средств выразительности, которые форматоспецифичны — то есть придуманы только для одного формата и больше нигде не нужны.
Онлайны — это карточки, в каждой карточке работает наш стандартный редактор. Важная карточка выделяется так же, как важная новость на главной «Медузы» — ну и так далее.
И еще одно достижение — все старые онлайны переехали на новую платформу. И ничего не сломалось!
И последнее: из-за того, что мы перевезли онлайны в «Монитор», они получили преимущества, которые есть у всех других наших материалов. Например, там работает автотипограф, который превращает все тире и кавычки в правильные. А также там поддерживаются все основные виды эмбедов (а это та еще головная боль!).
С вами был издатель Илья Красильщик, и это была часть про продуктовую сторону онлайнов. А теперь технический директор Самат Галимов про техническое.
Часть вторая. Версия технического директора
На чем это все написано
Борин первый язык — Ruby (Боря отвечает за бекэнд и заодно заместитель технического директора), так что логичным выбором для параллельных и высоконагруженных приложений в «Медузе» является язык программирования Elixir. Это очень молодой язык программирования (ему всего шесть лет), синтаксисом похожий на Ruby, но при этом работающий в непривычной для большинства программистов функциональной парадигме. Под капотом elixir использует виртуальную машину языка Erlang. Erlang родом из 1980-х и на нем работают абсолютное большинство мировых телефонных систем. Мы использовали фреймворк (библиотеку) Phoenix, которая решает многие базовые задачи нашего сервиса.
Как нам помог «Монитор»
Главная красота и сила «Монитора» в том, что для него материалы «Медузы» и отдельные поля материалов (заголовок, подзаголовок и даже текст статьи, например) — сущности одного порядка. Для запуска онлайнов не потребовалось кардинальных изменений. Мы ускорили параллельную работу нескольких редакторов внутри одного материала (гоняли лишние данные, из-за чего все начинало тормозить), добавили новый тип элемента — «запись онлайна», состоящую из четырех полей и научили «Монитор» посылать сообщения о новых записях в новый сервис онлайнов (о нем ниже).
Как это все обновляется
Все материалы «Медузы», кроме онлайнов, — статические. При публикации они складываются в хранилище и отдаются в неизменном состоянии через наши серверы по запросу читателя.
Такая схема работает при открытии онлайна, но дальше читатель может находиться на странице 5–10–20 минут, следя за тем, как развиваются события. Мы должны прислать новое сообщение онлайна, не дожидаясь того, как читатель нажмет F5 («На дворе 2017 год!» —воскликнете вы и будете правы). Это коренным образом меняет схему взаимодействия — сервер должен присылать сообщения читателю, не дожидаясь запроса.
Самой популярной технологией для систем такого рода являются вебсокеты (websockets) — приложение или браузер читателя подключается к серверу и далее канал общения остается открытым.
Нам потребовалось написать сервис, который бы десятки тысяч соединений открытыми во время онлайна и рассылал по ним новые сообщения читателям.
Как это работает в приложениях и мобильном сайте
Мобильные приложения «Медузы» отображают тексты статей внутри WebView, то есть с помощью мини-браузера, встроенного внутрь приложения. Это удобно тем, что избавляет от необходимости программировать стили всех выразительных средств статей — выделений, заголовков и подписей для каждой из платформ отдельно.
Этот подход не сработал с онлайнами — на экране трансляции могут быть сотни сообщений, а создание WebView и отображение информации в нем — дорогая операция. Дорогая — значит, затратная по вычислительной нагрузке на процессор и как следствие — по батарейке. Никому не понравится, если «Медуза» будет выедать зарядку телефона на глазах.
В результате мы написали нативный (то есть разный для iOS и Android) код, отображающий более десяти выразительных средств — полужирное и курсивное начертание, маркерное выделение и т.д., которыми могут пользоваться редакторы. Поэтому онлайны грузятся мгновенно, а скорость скролла превышает 60 кадров в секунду. Аналогичную трансформацию претерпел и сайт — обычно мы вставляем внутрь статей уже подготовленную html-разметку, а для онлайнов react-приложение само собирает текст внутри сообщений, опираясь на полученные данные. Эта базовая технология, которая позволит нам серьезно ускорить работу сайта и приложений в будущем.
Как это тестировалось
Один из самых важных этапов разработки — тестирование. В случае с онлайнами мы всей командой проверяли три основные вещи:
- Как себя ведут клиенты (так мы называем сайт и мобильные приложения) при экстремальных нагрузках? Для проверки мы завели тестовый онлайн из 500 сообщений, целиком состоящий из ютьюб-роликов, твитов, эмбедов фб и вк (это самые дорогие по ресурсам типы сообщений). Сперва наши приложения грели батарею и вылетали, но последние версии ведут себя вполне прилично.
- Сколько параллельных подключений выдержит наш сервер? Для ответа на этот вопрос мы написали программу, которая подключается к серверу и ведет себя как мобильное приложение. Затем арендовали 20 новых серверов и запустили больше 50 тысяч экземпляров тестовой программы в течение пары минут — это как раз тот профиль нагрузки, который мы видим при терактах. В случае, если наш текущий сервер перестанет выдерживать нагрузку, мы переедем на более мощный компьютер, а если перестанем влезать на один сервер — система предполагает возможность горизонтального масштабирования — то есть добавления второй и третьей машины.
- Смогут ли читатели следить за трансляцией при DDoS атаке на наш прекрасный новый сервис? Вебсокеты — новая для нас технология. У нас недостаточно опыта ее эксплуатации, чтобы гарантировать для нее тот же уровень надежности, что и для остальной Медузы. В случае, если сервис онлайнов становится недоступен, приложения переключатся на запасную инфраструктуру, работающую на старом-добром механизме «запросил обновление-получил ответ». Эти запросы будут происходить автоматически в фоновом режиме, незаметно для читателей.
Онлайны — один из самых больших проектов технической команды «Медузы» на текущий день. Здесь сложный интерфейс с десятком деталей, мощное сетевое взаимодействие и бэкенд-сервис под высокой нагрузкой. И вот так труд десятка человек разной специализации собирается вместе в продукт, который выглядит очень простым.
