Что такое Fluent UI и почему это важный инструмент для разработчиков Microsoft

Fluent UI — это мощная библиотека компонентов от Microsoft, предназначенная для создания красивых и удобных интерфейсов в рамках экосистемы Microsoft, в том числе для разработки приложений в Dynamics 365. Она предоставляет готовые решения для UI-компонентов, которые упрощают и ускоряют процесс разработки, а также обеспечивают единую стилистику и высокую доступность для пользователей с ограниченными возможностями. В этой статье мы рассмотрим, что такое Fluent UI, какие у него преимущества и недостатки, какие основные компоненты можно использовать, а также как работает тема и пропсы в этой библиотеке.

А узнать больше про Fluent UI можно в нашем видео:

Что такое Fluent UI

Fluent UI — это набор готовых UI-компонентов, разработанных Microsoft для своих продуктов, таких как Dynamics 365. Библиотека основана на React, что делает её гибким и современным инструментом для веб-разработки. Fluent UI позволяет быстро создавать интерфейсы, не тратя время на написание стилей CSS с нуля. Это особенно важно для крупных проектов, где необходимы стандартизация и скорость разработки. Благодаря Fluent UI можно быстро собрать целую страницу, максимально похожую на интерфейс Dynamics 365, без необходимости глубокой настройки стилей.

Fluent UI также поддерживает международные стандарты доступности WCAG, что делает интерфейсы доступными для пользователей с ограничениями, такими как проблемы со зрением, слухом или когнитивные трудности.

Преимущества Fluent UI

Fluent UI имеет ряд значительных преимуществ:

1. Единый стиль для всех приложений Microsoft: Все компоненты в Fluent UI придерживаются стандартов дизайна Microsoft, что обеспечивает единый внешний вид и ощущение для пользователей.

2. Гибкость и настройка: Fluent UI позволяет кастомизировать компоненты, изменяя их внешний вид и поведение в зависимости от потребностей проекта. Это дает разработчикам широкие возможности для создания уникальных интерфейсов, сохраняя при этом единый стиль.

3. Поддержка Redux: Fluent UI отлично работает с Redux — системой для управления состоянием приложения, что особенно полезно при разработке крупных приложений.

4. Доступность: Microsoft уделяет внимание доступности своих продуктов, и Fluent UI поддерживает стандарты WCAG, что делает компоненты удобными для людей с ограниченными возможностями.

Недостатки Fluent UI

Однако, несмотря на все преимущества, у Fluent UI есть и недостатки:

1. Ограниченная кастомизация: В сравнении с такими библиотеками, как Material UI или A&T Design, Fluent UI предлагает менее гибкие возможности для настройки компонентов.

2. Сложности в настройке некоторых компонентов: Некоторые компоненты имеют сложные параметры настройки, что может затруднить их интеграцию в проект, особенно если проект требует нестандартных решений.

3. Зависимость от React: Fluent UI разработан исключительно для работы с React. Если вы используете другие фреймворки, такие как Angular или Vue.js, то Fluent UI не станет оптимальным выбором для вашего проекта.

Основные компоненты Fluent UI

Fluent UI включает в себя множество компонентов, которые используются для создания различных элементов интерфейса. Вот некоторые из них, которые мы используем в своей работе:

• Text: текстовый компонент для вывода текста с возможностью изменения шрифта, размера и цвета.

• Dropdown: выпадающий список для выбора одной или нескольких опций.

• Button: стандартная кнопка.

• Dialog: всплывающее окно (pop-up).

• DataGrid: компонент для отображения данных в виде таблицы.

• List: обычный список элементов.

• Persona: компонент для отображения аватара пользователя, его имени и статуса.

• Spinner: индикатор загрузки.

• Table: таблица, аналогичная DataGrid, но с другой внутренней структурой.

• Avatar: компонент для отображения аватара пользователя.

• Combobox: аналог Dropdown, но с возможностью поиска.

• MessageBar: компонент для отображения сообщений об ошибке или успехе.

• SearchBox: компонент для поиска.

• Tooltip: всплывающая подсказка при наведении.

• DatePicker: компонент для выбора даты.

Тема Fluent UI

Fluent UI позволяет динамически менять тему для всего проекта. При инициализации проекта можно обернуть основной компонент App в FluentProvider и указать тему.

На данный момент доступны три темы:

• Web Light Theme

• Teams Light Theme

• Teams Dark Theme

В зависимости от выбранной темы, все компоненты автоматически адаптируются под неё. Например, если вы выберете тёмную тему, все элементы интерфейса будут отображаться с тёмным фоном и светлыми шрифтами, а если светлую — наоборот.

Также возможно настроить отдельные компоненты. Например, можно изменить цвет фона кнопки в зависимости от её состояния (hover, pressed).

Про пропсы

Каждый компонент Fluent UI имеет большое количество пропсов, которые позволяют настраивать его поведение и внешний вид. Например, для компонента DataGrid доступны пропсы для настройки как самого компонента, так и его частей, таких как заголовок таблицы, строки и ячейки.

Некоторые из основных пропсов:

• As: определяет, как будет рендериться компонент (например, на div или table).

• Size: устанавливает размер компонента (например, small, medium, extra small).

• Sort table: позволяет включить сортировку таблицы без написания дополнительного кода.

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

Что можно делать с Redux в Fluent UI?

Fluent UI использует свой собственный механизм управления состоянием, который встроен в компоненты. Это значит, что вам не нужно дополнительно подключать Redux для управления состоянием внутри компонентов Fluent UI. Каждый компонент уже "знает", как управлять своим состоянием и как изменять его в зависимости от взаимодействия с пользователем. Это упрощает разработку, так как вам не нужно тратить время на настройку внешнего состояния для каждого компонента.

Заключение

Fluent UI — это отличное решение для разработки интерфейсов в экосистеме Microsoft, особенно для таких приложений, как Dynamics 365. Он предоставляет удобные и гибкие компоненты, поддерживает единый стиль и стандарты доступности, а также значительно ускоряет разработку. Несмотря на некоторые ограничения, связанные с кастомизацией и зависимостью от React, Fluent UI остаётся отличным инструментом для создания современных и удобных интерфейсов.

Если вы работаете с React и хотите быстро разработать стильный и доступный интерфейс для вашего проекта, Fluent UI — это то, что вам нужно.