Tldr; Расширение Всплывающие окна (то есть те превью страниц, всплывающие в Википедии) адаптировало структуру пользовательского интерфейса Storybook, чтобы помочь улучшить визуальное регрессионное тестирование и разработку компонентов (и все это без необходимости React), посмотрите демо здесь.

8-точечный

Моя команда (Readers Web) из Фонда Викимедиа обнаружила небольшую ошибку в кодовой базе всплывающих окон, когда pokey, маленький треугольник, торчащий из конца превью, иногда смещался. Эта ошибка возникала только в некоторых предварительных версиях, и мы не знали, почему. Мы не знали, что общего у этих превью, только то, что постоянно проявлялось в некоторых ориентациях в превью для Элиуда Кипчоге (среди прочих).

Когда мы указали эту задачу, мы остановились на 8 баллах (высокий риск, высокая сложность) из-за сложности устранения этой проблемы.

Отладка такого рода проблем раньше состояла из следующего рабочего процесса:

  1. Запуск процесса сборки с помощью npm -s start
  2. Открытие браузера
  3. Поиск страницы с предварительным просмотром (использование MobileContentProvider MobileFrontend для локального отображения производственного контента).
  4. Откройте DevTools и с помощью селектора элементов выберите ссылку, для которой нужно запустить предварительный просмотр.
  5. В консоли DevTools введите $($0).trigger(‘mouseover’), чтобы принудительно отобразить предварительный просмотр ($0 - это сокращение консоли для текущего выбранного элемента).
  6. Не наводите курсор на другие ссылки на странице, потому что это приведет к исчезновению предварительного просмотра.
  7. Обновите страницу и повторите.

Этот рабочий процесс усложнял отладку и затруднял внесение изменений в CSS / HTML, потому что всякий раз, когда вы случайно наводили указатель мыши на другую ссылку на странице, выбранный предварительный просмотр закрывался. Это, и на странице могло быть открыто только одно всплывающее окно одновременно.

Идея

Для функции, которая выглядит такой простой, предварительный просмотр имеет удивительное количество вариаций. Предварительный просмотр может быть ориентирован во всех направлениях, но также:

  • Пейзажный режим с / без эскиза.
  • Портретный режим с / без миниатюры.
  • Миниатюры, которые очень узкие в альбомном режиме или очень короткие в портретном режиме.
  • Миниатюры - векторная графика или полупрозрачные изображения.
  • Эскизы, которые отображаются только на мониторах с низким разрешением, поскольку версии изображения с высоким разрешением недоступны.
  • Миниатюры, которые являются не изображениями, а видео или другими мультимедийными материалами.
  • Совместимость с языками с письмом справа налево. Этот режим переворачивает весь текст и миниатюры, что, по сути, добавляет дополнительный вариант к каждому существующему макету.
  • Приспособление к разным размерам шрифтов и высоте строк для разных языковых шрифтов.
  • Обработка надстрочных / подстрочных индексов, химических формул, математики и любого другого HTML, созданного нашим обширным сообществом редакторов.

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

Представляем сборник рассказов

Пока я экспериментировал с различными инструментами руководства по стилю, я наткнулся на Storybook. Изначально Storybook поддерживал только компоненты React, поэтому довольно быстро исчез с радаров. Однако, начиная с версии 4.0 (выпущенной в октябре 2018 г.), в фреймворк добавлена ​​поддержка широкого диапазона слоев рендеринга, а также возможность рендеринга простого HTML (представьте себе!).

Функция рендеринга HTML вызвала у меня интерес. Это позволяет использовать Storybook в любом проекте, который выводит DOM (или даже строки, представляющие DOM), и, как мы писали ранее, расширение Popups использует строковые литералы ES6 в качестве слоя рендеринга. Это в сочетании с модулями ES6 позволило нам легко интегрировать их. Ну, почти незаметно…

… Хорошо, есть швы

Хотя всплывающие окна в основном автономны, они зависят от некоторых функций, встроенных в основную библиотеку javascript MediaWiki (которая недоступна в качестве модуля NPM, поскольку предназначена для работы с MediaWiki). Эти внутренние вспомогательные функции MediaWiki нужно было заглушить в основном так же, как заглушку зависимостей в среде модульного тестирования.

Гораздо более сложной зависимостью были стили LESS (препроцессор CSS). Для достижения визуальной согласованности Popups использует МЕНЬШЕ переменных из основной библиотеки MediaWiki. В отличие от JS, эти зависимости нельзя заглушить, потому что они влияют на внешний вид всплывающих окон. Их нужно было вытащить из MediaWiki Core (очень окольным путем): Webpack нужно было настроить так, чтобы разрешить LESS-импорт в определенную папку, которая просто содержала файлы, импорт которых указывал на ядро ​​MediaWiki.

Кроме того, были некоторые несовместимости с Storybook и версией Node (v6), которую мы запускаем в нашем конвейере CI, поэтому приложение Storybook нужно было настроить как отдельный проект NPM внутри самого репозитория Popups.

Но, в конце концов, после всей этой ерунды мы наконец были готовы к Popup & Roll.

Появляется сборник рассказов

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

Мы смогли создать тестовые примеры, или, как их называет Storybook, «истории» для всех упомянутых выше перестановок (с / без эскизов, RTL, SVG и т. Д.). Это во многом стало возможным благодаря архитектуре расширения Popups, которая четко разделяла уровень рендеринга, чтобы его можно было экспортировать и использовать независимо от управления состоянием и другой бизнес-логики. Тот факт, что кодовая база Popups использует модули ES6 вместе с Webpack (который также использует Storybook), также помог их интеграции.

Однако Storybook не требует использования модулей ES6 или Webpack. Все, что для этого требуется, - это слой рендеринга, который потенциально может быть импортирован Webpack, а поскольку Webpack имеет большую экосистему загрузчиков, почти любой слой рендеринга DOM или библиотека шаблонов можно направить в Storybook. Сюда входят простые файлы JavaScript, которые выводят DOM или строку HTML, или даже шаблоны Mustache, которые можно преобразовать в строки с помощью усов-загрузчика Webpack, а затем отобразить с помощью модуля Storybook for HTML. .

Оооо блестящий

С помощью Storybook любые изменения, которые мы вносим в слой рендеринга всплывающих окон (или даже в МЕНЬШЕ переменных в MediaWiki Core), сразу видны в приложении Storybook (в наши дни дети называют это «перезагрузкой горячего модуля») без необходимости перезагружать страницу или запускать предварительный просмотр вручную.

Еще один изящный трюк, который предлагает нам Storybook, - это аддон Knobs, который позволяет изменять вывод HTML из дружественного пользовательского интерфейса.

Надстройка CSSResources также пригодится для быстрого применения моего секретного CSS-оружия на любой странице. Это оружие * { outline: 1px solid red;} я называю это рентгеновским режимом.

Обучение

Сначала я думал, что Storybook будет хорошим инструментом для представления компонентов, но когда я углубился в него, я понял, что Storybook - это инструментальная среда для компонентов пользовательского интерфейса, предоставляющая среду не только для просмотра компонентов, но и для строить их. В этом смысле Storybook выражает идею компонентно-ориентированной разработки, которая побуждает думать о компонентах как о замкнутых объектах. Преимущество этого подхода состоит в том, что компоненты можно заменять или обновлять независимо друг от друга, что часто бывает сложно с длинными цепочками наследования или CSS, затрагивающим множество различных частей кода (как говорится в шутке).

Более того, когда вы начинаете рассматривать компоненты как автономные объекты, вы понимаете, что их можно рассматривать как «единицы» кода. Таким образом, хотя Storybook может выглядеть «просто» iframe для вставки компонентов, само по себе это дает то, что мы только начинаем изучать при разработке пользовательского интерфейса, а именно идею среды модульного тестирования для компонентов. Среда, которая позволяет не только тестировать правильное поведение компонента, но и его визуальную правильность.

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

А пока вы можете посмотреть демоверсию Popups Storybook здесь! или клонируйте репозиторий и создайте его самостоятельно из Gerrit или Github.

И да, после некоторого расследования с помощью приложения Storybook мы смогли отследить и решить этот 8-указатель.