Playground

Начиная с версии 4.1, в web-клиенте доступен playground, который является изолированной средой для тестирования и просмотра UI-компонентов.

Кому это может быть полезно

Playground предназначен для разработчиков, его основная цель - улучшить Developer Experience. Конечные пользователи не работают с playground-ом, для них он недоступен.

В процессе разработки часто возникает необходимость проверить работу какого-то UI-компонента изолированно, то есть не в карточке и не в рабочем месте, а в какой-то “песочнице” с тестовыми данными.

Playground является именно такой песочницей.

Структура

Playground состоит из набора сгруппированных статей, каждая из которых описывает определенный аспект работы с контролом.

Каждая статья состоит из блоков. В блоке выводится заданный UI (например, контрол, настроенный определенным образом), опционально указывается описание и код.

Note

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

У каждого блока есть тулбар:

• Кнопка позволяет сбросить состояние до исходного. Актуально для контролов, у которых есть состояние, которое можно модифицировать.

Платформенные статьи

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

Код всех платформенных статей находится в коде дефолтных расширений в папке playground/articles.

Написание статей

В проектных решениях возможно написание собственных статей. Пример написания статьи можно найти в 42_playgroundArticleRegistrator, который находится в коде дефолтных расширений.

Каждая статья является классом, в котором определен массив блоков. Обычно блоки добавляются в методе initialize с помощью метода addBlock.

Note

Класс статьи регистрируется в DI-контейнере, что обеспечивает использование зависимостей из DI в коде статьи.

Каждый блок статьи состоит из следующих частей:

• caption - отображаемый заголовок статьи.
• description - опциональное описание статьи.
• props - в этой функции обычно создается и настраивается объектная модель контрола. Возвращенное значение функции будет прокинуто в компонент, описываемый во view, как props. Обычно возвращается как раз настроенная объектная модель, которая потом будет передана контролу.
• view - компонент, который будет отображен в блоке. Его props определяются на основании значения, возвращенного из функции props. В компоненте обычно определяется контейнер DemoForm, внутри которого располагается сам компонент нужного контрола.
• code - опциональный поясняющий код в виде строки. Если обернуть код в блок с тройными обратными кавычками или тильдами с указанием языка программирования, то для кода будет работать подсветка синтаксиса.

Note

В блоке нет жестко заданной структуры. В props можно создать не один, а сразу несколько объектов, и вернуть их в любом удобном виде. Если объектных моделей и какой-то подготовки нет, то props можно не задавать в принципе. Во view может быть абсолютно любая верстка.

Чтобы статья появилась в playground, она обязательно должна быть зарегистрирована в DI-контейнере.

Tip

Чтобы сгруппировать несколько статей, необходимо задать им название в формате Path/To/Article. На основании частей пути будет построено дерево навигации.

Включение playground

Так как playground - функциональность для разработчиков, она скрыта из интерфейса приложения. Чтобы активировать playground, необходимо в консоли разработчика выполнить следующую команду:

sessionStorage.setItem('playground', true)

После чего необходимо перезагрузить приложение. В основном меню системы появится тайл Playground, при нажатии на который откроется playground в отдельной вкладке. Этот тайл виден только администраторам системы.

Note

sessionStorage существует только в рамках текущей вкладки браузера, другая вкладка с приложением будет иметь другое хранилище. Если приложение будет открыто в новой вкладке, для нее снова потребуется установить значение в sessionStorage.