Назовем это «абстрактным компонентом». В коде определяется внутренняя логика, структура html и стили. Там же мы определяем, какие части, подкомпоненты он будет использовать.
Абстрактный компонент — это код, который пишет разработчик. Большая часть кода пишется вслепую. Слепой в том смысле, что разработчик видит только код, но не видит никакого визуального представления.
Этот этап следует разделить на небольшие подзадачи. В противном случае мотивация разработчика снижается, если слепая фаза длится долго.
Эта реализация должна содержать модульные тесты. Тип тестов, которые обычно проверяют корректность работы функций/методов. Другими словами, функция получает некоторые данные и, как ожидается, вернет некоторые данные или выполнит действие.
Живой пример компонента (класса)
Создавайте компоненты пользовательского интерфейса в изолированной среде, где разработчик может сосредоточиться на конкретном компоненте, а не на запуске всего приложения. Изоляция позволяет запускать и отлаживать компонент, не опасаясь влияния других частей HTML, CSS или Javascript.
Это не компонент реального приложения. Это отдельный пример, когда компонент получает ввод, затем показывает или делает что-то.
В качестве входных данных мы используем фиктивные данные. Пример должен быть создан для каждого использования компонента.
Storybook предоставляет широкий набор инструментов для запуска изолированных компонентов.
Интеграция в приложение (объект, реализация, интеграция)
После прохождения всех предыдущих шагов компонент готов к интеграции в реальное приложение. Обычно после предыдущих этапов не должно быть реальной причины того, что компонент не работает должным образом. Большинство возникающих проблем будут связаны с отсутствующей функциональностью. Нередко в процессе разработки инженер забывает реализовать какую-то фичу или не имеет достаточно четкого технического обзора.
Эту реализацию следует протестировать с помощью тестов e2e. Тесты на доступность входят в их число. Тесты на взаимодействие тоже. Они показывают, как компонент реагирует на действия пользователя, такие как клики, взаимодействие с клавиатурой, прокрутка и т. д.
CSS-фреймворк
Этот уровень намеренно не упоминался в подходе OOUI. Стили CSS должны быть реализованы как независимые единицы, которые можно повторно использовать в любой части приложения без какой-либо связи с функциональностью. Позже эти стили применяются через классы HTML.
В заключение, объектно-ориентированный пользовательский интерфейс (OOUI) — это не настоящий ООП, а метафорическое выражение, означающее разделение уровней реализации в разработке пользовательского интерфейса. Используя этот подход, разработчики, тестировщики и дизайнеры могут уменьшить когнитивную сложность и увидеть результаты намного раньше в процессе разработки. Подход OOUI включает в себя создание абстрактного компонента, изолированное построение живых примеров компонента и интеграцию компонента в реальное приложение. Этот процесс должен быть разделен на небольшие подзадачи, чтобы поддерживать мотивацию разработчиков, и каждый этап должен быть тщательно протестирован, чтобы убедиться, что компонент работает должным образом. Хотя стили CSS являются важной частью разработки пользовательского интерфейса, они должны быть реализованы как независимые единицы, которые можно повторно использовать в любой части приложения без какой-либо связи с функциональностью. В целом, OOUI обеспечивает структурированный подход к разработке пользовательского интерфейса, который может привести к более эффективным и действенным результатам.
Чтобы прочитать больше статей, написанных мной: anton-m.dev
Дополнительные материалы на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
