Наши проекты представлены на множестве различных платформ, таких как AMP, Instant Articles, FreeBasics и др. Также мы плотно работаем с довольно экзотическими браузерами, например Opera Mini, который используется в Африке для экономии трафика. В нашей парадигме мультиплатформенности это еще одна полноценная платформа дистрибуции контента, со своими вызовами.
Вот неполный список проблем, которые нам удалось решить с помощью описанного ниже подхода:
- поддержка множества каналов дистрибуции контента и быстрое подключение к ним;
- отдельные версии страниц для разных платформ с учетом их особенностей;
- возможность анализировать статьи по наличию и количеству медиаконтента (фото, видео, другие эмбеды);
- безопасность статей: невозможность вставить в статью вредоносный код;
- экономия места для хранения статей.
Google, Facebook и другие предлагают собственные платформы дистрибуции, например AMP, Instant Articles. Они позволяют сделать страницы сайта доступнее, а опыт работы с ними приятнее. Это особенно важно на развивающихся рынках Африки и Азии, где мы работаем. Подход, который мы используем для хранения наших статей, позволяет быстро запускаться на новых платформах и своевременно реагировать на изменения на тех платформах, где мы уже работаем.
Сегодня пользователь хочет сам выбирать, какой канал потребления использовать, и задача технической команды состоит в том, чтобы быть доступными по как можно большему количеству каналов. Такой подход в нашей сфере называют многоканальным, и он требует отдельного подхода к разработке решений.
Особенности работы с платформами
Страницы AMP доступны только мобильным пользователям. На них можно попасть из поиска Google или с сайта Google Plus. Некоторые другие сайты также могут использовать версию AMP (например, Twitter и «ВКонтакте»).
Такие страницы откроются прямо на сайте поиска Google или на Google Plus без перезагрузки страницы, а все ресурсы на странице загрузятся асинхронно. Страницы AMP хранятся на серверах Google, поэтому загружаются быстро.
Иконка молнии в поиске Google означает доступность AMP. Такая страница откроется прямо на сайте поиска.
Подобным образом работает и Instant Articles. Страницы Instant Articles доступны только пользователям приложения Facebook. Хранятся страницы на серверах Facebook и открываются прямо внутри приложения.
Иконка молнии в приложении Facebook означает доступность Instant Article. Такая страница откроется прямо в приложении.
Для каждой названной платформы нужно иметь отдельные варианты целевых страниц. Разные варианты – это разные разметки. Кроме того, у каждой платформы есть свои ограничения и особенности.
Ниже – простые примеры разметки.
Создание и хранение статей
Прежде наша редакция использовала один из текстовых HTML-редакторов типа TinyMCE. Статьи хранились в базе данных в разметке HTML. Это было неудобно и небезопасно.
HTML – это одна из частных реализаций разметки. Не следовало привязываться к ней.
Пересмотрев подход к хранению статей, мы решили использовать формат JSON. Теперь храним абстрактное представление статьи, из которого можно собрать любую разметку.
Пример статьи в формате JSON.
Для редакции техническая команда разработала удобную админку на ReactJS, в которой теперь создаются все материалы для сайтов. В админке используется редактор DraftJS.
Часть страницы с текстовым редактором DraftJS, в котором работает редакция.
DraftJS использует свой формат для хранения статей и работы с ними. Мы преобразуем этот формат в наш JSON, который и храним в базе данных. У нас есть специальный компонент с нужными сервисами, который отвечает за построение разных разметок.
Что мы получили в итоге?
Размер JSON меньше HTML, поэтому для хранения каждой статьи требуется меньше места. Сейчас суммарно на всех наших проектах уже около одного миллиона статей – разница была бы очень ощутима.
Если что-то изменится в требованиях платформ, мы сможем быстро отреагировать – достаточно подправить сервис для генерирования конкретной разметки.
Относительно быстро и легко мы можем зайти и на новую платформу. Более того, довольно легко сделать особую версию страницы для отдельной группы пользователей. К примеру, для пользователей с браузером Opera Mini на наших африканских сайтах отдельная разметка. В ней видео-ролики, например, заменены на ссылки, чтобы страницы загружались быстрее. Для пользователей же с современными браузерами мы используем тег <picture> и другие интересные возможности.
Редакции запрещено вставлять что попало в статью. Больше нет доступа непосредственно к разметке. Оговариваем список разрешенных блоков для вставки (напр, блоки Twitter, Instagram, Facebook и мн. др.). Это важно, поскольку только так можно ручаться за то, что страница статьи отобразится правильно, а пользователь не получит вредоносный код (бывало и такое).
С использованием JSON для хранения статей появилась возможность использовать JSON Schemа для валидации.
В таком виде мы храним статьи уже около 2 лет, и у нас нет потребности что-либо менять. Описанный подход себя оправдал.
Выводы
Сегодня уже очевидно, что для digital-компаний с большим количеством медийного-контента критически важно иметь структурированную модель для хранения контента и техническую возможность генерировать контент для разных каналов.
Важно отделить контент от представления (разметки) – это позволит создать модель для хранения контента, которая будет удовлетворять потребностям бизнеса. Если вы решите работать с новой платформой, то технически будете готовы к этому.
Мы больше не производим контент только для конкретного сайта для десктопа. Теперь это мобильные телефоны, планшеты, умные часы, приложения для них, отдельные браузеры со своими особенностями, всевозможные агрегаторы и платформы.
Автор: Вячеслав Одиноков, глава технической разработки новостных проектов в GMEM
