ermouth | dvinanews.ru (Reply)

Открыли бета-версию – сайт пресс-центра правительства области. Оно не без косячков пока, но собственно для того и выкатили, чтобы уже в бою тестировать.

Чтобы было понятно – до этого было так:

Контент на них одинаковый, ога.

Задача была поставлена сделать за 2 месяца работающую альфу, не падучую и не тормозную вообще, нормально выглядящую и удобную для читателей и редакции (а не для админов). И ещё через полмесяца – публичная бета. Вот она, собсно.

Самое главное отличие официального пресс-центра от обычного СМИ – это а) очень характерные официальные жанры и б) весьма затруднённая точная идентификация раздела, где материал должен появиться.

Насчёт жанров – это просто как правило длинные официальные заголовки с обилием длинных же слов. Если это выводить в узкую колонку, получается очень рвано.

Противоречие мы решили переносами – они кое-где ещё неверные, но уже очень в целом хороши. Ещё через пару итераций, когда оно совсем стабилизируется, я это превращу в конечный автомат, перетряхну, а потом разверну обратно в оптимизированный регеэксп и выложу код. Может быть )

Насчёт места – тут всё просто. Оптимальное решение – не использовать иерархии разделов-подразделов вообще совсем, а использовать теги. Внешне при этом сохранена видимость разделов – то-есть введена матричная псевдоиерархия тегов, а не древовидная – разделов и подразделов.

Если по-русски, один и тот-же материал может появиться в нескольких “разделах”, “темах” и “сюжетах”. Также тегами ему проставляются какие-то системного характера свойства – “Главный”, например, или “С галереей”, просто таких тегов снаружи не видно.

Блоки заголовков на страницах – просто выборки по набору тегов. Ну или списки самих тегов по определённому критерию.

Всё это вместе, как концепт, мы защищали, то-есть написан был архитектурный проект, 16 страниц 10-м кеглем – причём понятным для неспециалистов языком, с картинками, а не техзадание какое-нибудь. И только после защиты этого проекта и ответов на куууучу вопросов стали делать.

Про образцы и метрики

Вообще, мы постоянно оглядывались на lenta.ru как реально флагмана, где-то мы даже визуально похожи. У нас, правда, четырёхколонник база, а у Ленты – трёхколонник, ну и организация у нас другая совсем. Но, надеюсь, мы смогли организовать официоз не менее просто и логично, чем новости на Ленте, респектую им глубоко. Они очень крутые, особенно когда начинаешь изучать их логику и подходы по внешним проявлениям.

У меня даже была в какой-то момент амбициозная цель сделать быстрее Ленты – но тут пока увы. У нас до облака 3500км, просто пинг не даёт. За вычетом разницы пинга пресс-центр под плановой нагрузкой быстрее ленты.ру уже сейчас влёгкую (пыжанул типа, ога).

Ну и мы тоже очень любим PT Sans и PT Serif, но вместе они совершенно укладывают старые андроиды, так что у нас шрифт с засечками – не ПТ Сериф (хотя очень хотелось), а Georgia, один из системных, не подгружаемый.

Про технологии

Проект инновационный в хорошем смысле – это всё в облаке, там node.js, CouchDB и очень хитрый суперскоростной (50мкс на запрос по тэгу, <10мкс – по ключу) кэш, про который я пока воздержусь рассказывать подробнее.

То-есть про node.js и CouchDB – это значит что весь проект, до последней строчки, написан на javascript. И он уделывает по производительности на аналогичном железе любые битриксы там, вордпрессы и много чего потяжелее, причём с каким угодно кешированием, ну разве что кэш на Redis или Couchbase даёт аналогичный результат.

Про редактор контента

Вот так выглядит редактор – верх и низ.

То-есть он специализированный, хранит картинки аттачами к “посту”, заточен под конкретные метрики материалов (зелёная полоса рядом с заголовком – это значит он ок по длине, серый дубляж с переносами – сразу чтобы смотреть, как в колонку ляжет). Редактор также контролирует метрические параметры контента типа длины абзацев и подобных мелочей. С текстом на картинках выше всё ок, а так могло быть бы вот например:

Снимок экрана 2013-07-09 в 1.56.10

Система даёт сохранить такие материалы, но не даст опубликовать материалы с красными метками.

Замечу, что строка редактора приколачивается к верху экрана при промотке страницы – это удобно очень и мало где есть. Ну и можно картинки с панели прямо в текст втаскивать, и они нормально встают, врезки есть и прочая и прочая.

Набор в редакторе выглядит практически как на странице потом, для точного превью есть кнопка “Превью” ) Оно и в самом деле точное – в силу того, что на сервере и на клиенте js, используются ровно те-же шаблоны, что рендерят публичную версию.

Публикация на внешний сайт производится кста только из превью – снижает вероятность ошибки многократно. То-есть перед нажатием кнопки редактор видит, как оно будет выглядеть точно.

Теги разделов-тем выводятся все сразу в список в ui, это я тестировал сам, проставляя эти теги ручками по массиву в 300+ материалов ретроспективой, когда мы контент клонировали со старого пресс-центра. Автоматизм и запоминание, где какой тег стоит, наступило на 20-м примерно материале.

Материале на 50-м я стал помнить паттерны графические, то-есть читаешь сорц, а рука сама уже знает последовательность кликов.

Списки настраиваются естессно.

Про редактор раскладок

Выше я говорил уже, что блоки – суть фильтры по тегам, но их надо как-то расставлять на страницах, и по разному.

Так вот на пресс-центре это драг-н-дропом делается, с интерактивным превью блочками. Геометрия блочков соответствует реальным высотам и css, оно генерится реальным шаблонизатором, просто в масштабе (по высоте 1:6, по горизонтали 1:3).

Вся закрытая часть – веб-приложение, никаких перезагрузок страниц. Всё интерактивное и обновляется в реальном времени.

Про организационные инструменты

Там ещё в комплекте стена, как вконтакте, только для внутреннего использования и с контролем дат. На стену можно писать просто посты для кого-то, а можно задачи ставить, это просто пост с датой и маркером готово-нет.

Ещё всякое интересное, просто фактики.

внутренняя кухня редакции и публичный сайт разнесены по разным виртуальным машинам и даже доменам – нагрузка одного никак не влияет на нагрузку другого
картинки отдаются с высокопроизводительного облачного хранилища статики, их выдача не влияет на выдачу html
большинство страниц рендерятся менее чем за 3ms, это в заголовках пишется
в проекте только один условно не open-source компонент, а всего их более 20
объем склеивающего кода – в районе 10000 строк
кэш – синхронный, теговый и полностью ассоциативный
для полного пересбора публичной части системы “с нуля”, включая установку ОС, скачивание компонентов и репликацию базы, нужно <50 минут
для масштабирования системы достаточно запустить клон виртуальной машины с последнего снапшота (это пока в теории, не оттестировано)
система стартует с разогревом кэша на все разделы, теги и несколько сотен материалов вглубь за 14 секунд, при этом веб-сервер начинает отвечать наружу через 6 секунд
пиковая нагрузка, показанная при тестировании по выдаче html – 100Мбит/с
мощность процессора и объем задействованной памяти примерно эквивалентны 4-м iPhone5 8Gb.
объём базы 1Gb+, база помнит все версии всех текстов

И совсем убой

Весь склеивающий код, даже низовые системные функции, поддерживает горячую замену по частям прямо через браузер. Конечно, если системные функции до среднего уровня заменить на ошибочный код, система рухнет, на это надо суперправа иметь.

А вот горячая подмена шаблонизаторов или библиотек – это вообще нормальная рядовая операция, как новый тег, она просто инвалидирует блоки в кэше, этим шаблонизатором отрендерённые. Шаблонизаторы и либы могут быть и с ошибками в коде кста, это систему не повалит, просто страницы будут с пропусками или с предыдущей версией блока.

Планы

Скоро сделаем человечий поиск (будет также как сейчас Гугл, но встроенный) и ускорим на андроидах-айфонах старых. Ну и заглавная подтормаживает из-за видео, тоже поправим. Плюс будет публикация в Тви выборочно и, может быть, в вК.

Но это через 2 недели, потому что через 15 часов отпуск, ура )

Вообще, коллегам из пресс-центра спасибо, это более чем вменяемые люди все, с кем я общался. Всё, что было разумно аргументировано, было с обоснованными правками принято. Там, где аргументы буксовали, всё равно договаривались по-человечьи. Это позволило в рекордные в общем сроки, (включая юридические согласования, что важно), сделать отличную бету.