Я работаю в компании Sitecore и недавно работал с одним из наших последних продуктов — Sitecore Experience Manager Cloud (XM Cloud). XM Cloud — это безголовая система управления контентом (CMS) от Sitecore, ориентированная на создание веб-опыта, управляемого как маркетологами, так и разработчиками.
С помощью XM Cloud я решил создать современный сайт для демонстрации наших предстоящих конференций группы пользователей Sitecore. При создании современного пользовательского интерфейса я хочу избежать создания сложного и трудного в обслуживании фронтенда. Те, кто потребляет контент, хотят иметь красивый интерактивный дизайн, что часто означает сложную работу для меня, разработчика фронтенда. Какой подход я использую, чтобы наилучшим образом поддерживать пользовательский интерфейс с множеством взаимодействующих элементов?
Вот тут-то и приходит на помощь компонентно-ориентированный дизайн (Component Driven Design, CDD). CDD — это практика построения пользовательских интерфейсов с помощью модульных компонентов. Вы хотите разбить свой пользовательский интерфейс на мельчайшие компоненты, которые можно собрать, и собрать эти компоненты вместе, как кирпичики Lego. В этой заметке я также поделюсь своим любимым инструментом для построения с учетом CDD — Storybook.
💡 Что такое компоненты?
Компонент — это один или несколько элементов HTML со связанным JavaScript или TypeScript. Кнопка с ярлыком, выводящая на экран «Hello World», может быть компонентом. Отдельная карточка пользовательского интерфейса, отображающая фотографию профиля, может быть компонентом. В CDD каждый компонент должен иметь единственную цель. Опять же, аналогия с кирпичиками Lego работает хорошо, вы будете строить маленькие кирпичики фронтенда, которые в конечном итоге будут собраны вместе, чтобы создать ваше приложение.
Реализуете с учетом Component Driven?
Посмотрите раздел https://www.componentdriven.org/ «Как стать компонентно-ориентированным».
По сути, все сводится к разбиению пользовательского интерфейса на минимально возможные элементы. Создание этих небольших компонентов по отдельности. Эти компоненты собираются для создания более сложных пользовательских интерфейсов и, в конечном итоге, всей страницы.
Sitecore Experience Manager (XM) поощряет компонентно-ориентированный дизайн
XM Cloud уникален тем, что это не только безголовая CMS, но и включает в себя инструменты создания страниц для маркетологов и авторов контента. Это побуждает разработчиков работать по компонентному принципу.
Разработчики следят за тем, чтобы создаваемые ими компоненты были как можно более модульными, чтобы те, кто создает страницы, имели максимальную гибкость. Благодаря тому, что компоненты разбиты на минимально возможные части, создатели страниц имеют больше свободы в создании того, что они хотят.
Преимущества компонентно-ориентированного дизайна
Почему вы хотите создавать сайт с использованием компонентного подхода? Давайте рассмотрим 3 причины:
- Сосредоточенная работа: Разработчики получают возможность сосредоточиться на самом маленьком элементе. Перестаньте думать о своем пользовательском интерфейсе на уровне страницы. Разбейте его на гораздо более мелкие элементы. Не беспокойтесь с самого начала о том, как компоненты будут взаимодействовать друг с другом. Сосредоточьтесь на том, чтобы ваш отдельный компонент работал, и это облегчит последующее объединение компонентов.
- Возможность повторного использования: Поскольку компоненты разрабатываются на небольшом одноцелевом уровне, их легче использовать повторно. Компоненты должны быть модульными и без особых изменений использоваться в разных местах. Это может помочь ускорить процесс разработки.
- Распределенная работа: Группа разработчиков может легче разделить работу. Компоненты отделены друг от друга, поэтому даже если компоненты, в конечном счете, будут на одной странице, их можно разрабатывать изолированно друг от друга. Это позволяет выполнять более параллельную работу.
Инструментарий Storybook
Storybook, инструмент, который является довольно новым для меня, но может действительно помочь в процессе CDD. Storybook — это инструмент с открытым исходным кодом для создания компонентов и страниц в изоляции. Он дает вам изолированный холст вдали от вашего фронтенд-фреймворка для создания и тестирования компонентов пользовательского интерфейса.
Я нашел его чрезвычайно полезным для разработки компонентов вне XM Cloud, которые в конечном итоге будут использоваться в моем приложении. Отказ от зависимостей и сложности XM Cloud позволяет мне сосредоточиться исключительно на разработке пользовательского интерфейса.
В нем даже встроено тестирование, чтобы вы могли убедиться, что пользовательский интерфейс создан правильно.
Посмотрите видеоверсию этой статьи 📺, чтобы увидеть Storybook в действии. В нем я создаю отдельный компонент, а затем собираю его вместе, чтобы создать более сложные компоненты и показать взаимодействие с различными данными.
Резюме
Теперь вы знаете больше о компонентно-ориентированном проектировании. Он позволяет сосредоточить работу на одном элементе пользовательского интерфейса, обеспечивает лучшее повторное использование компонентов и даже может помочь вам разрабатывать быстрее, позволяя вести параллельную разработку. Обязательно ознакомьтесь с Storybook, чтобы поднять создание компонентов на новый уровень.
Возможно, вы уже делали это раньше, а теперь можете быть более усердными и целеустремленными. Или, если для вас это в новинку, вы можете опробовать его на следующем пользовательском интерфейсе, который вы создаете.