Как Microsoft пересобрала интерфейсы для веба

Вы когда-нибудь задумывались, почему Outlook, Teams и Word в браузере выглядят так похоже, хотя это разные продукты с разной логикой? Ответ кроется в репозитории fluentui. Это не просто очередная библиотека компонентов, а огромный монорепозиторий, где Microsoft хранит всё, что касается их визуального языка Fluent Design для веба.

Интересно, что проект прошел через масштабный ребрендинг. Раньше он назывался Office UI Fabric, и если вы работали с надстройками для Office лет пять назад, то наверняка помните эти тяжеловесные стили. Сейчас всё изменилось: Fluent UI стал легче, быстрее и, что самое важное, разделился на несколько независимых веток под разные задачи.

Что внутри этого гиганта

Когда заходишь в репозиторий, легко потеряться. Microsoft сейчас поддерживает сразу три направления, и важно понимать, какое выбрать для своего проекта:

Fluent UI React v9 — это актуальная версия. Её переписали практически с нуля, чтобы избавиться от проблем с производительностью, которые тянулись годами. Именно её используют в новом Microsoft 365.
Fluent UI React v8 — стабильная классика. Она всё еще живет в классическом Office, и если вам нужно поддерживать старые корпоративные системы, вам сюда.
Web Components — реализация на базе веб-компонентов. Она не привязана к фреймворку, поэтому её можно встретить, например, в интерфейсах браузера Edge.

Почему девятая версия — это большой шаг вперед

Если вы пробовали v8, то знаете, что она была довольно капризной в плане кастомизации и веса бандла. В v9 разработчики применили несколько крутых подходов.

Стилизация через Griffel

Вместо привычных CSS-in-JS решений, которые тормозят рантайм, Microsoft внедрила Griffel. Это движок, который генерирует атомарный CSS. По сути, вы пишете стили в JS-объектах, а на выходе получаете максимально оптимизированные CSS-классы. Это сильно ускоряет отрисовку интерфейса, особенно когда компонентов на странице много.

Слоты и триггеры

В v9 изменили подход к API компонентов. Вместо того чтобы прокидывать десятки пропсов вроде buttonIcon или buttonText, они используют систему слотов. Это выглядит примерно так:

<Button icon={<CalendarRegular />}>
  Запланировать встречу
</Button>

Такой подход делает код чище и позволяет легко заменять части компонента, не ломая его логику.

Доступность из коробки

Microsoft помешана на доступности (accessibility), и это огромный плюс для нас. Каждый компонент во Fluent UI тестируется на работу с экранными дикторами и управление с клавиатуры. Если вы строите серьезный корпоративный софт, где соответствие стандартам WCAG обязательно, эта библиотека сэкономит вам сотни часов рутины.

Стоит ли тащить это в свой проект

Скажу честно: Fluent UI специфичен. Если вы делаете легкий лендинг или креативное портфолио, он может показаться избыточным и слишком «корпоративным». Дизайн-код Microsoft очень узнаваем — это строгие линии, специфические тени и сетка.

Однако проект незаменим в двух случаях:

Вы создаете расширение или сервис, который должен выглядеть как родная часть экосистемы Microsoft (например, админку для Teams).
Вам нужна максимально надежная и протестированная база компонентов для сложного B2B-интерфейса с кучей таблиц, модалок и сложных форм.

С чего начать изучение

В репозитории есть отличная серия видео под названием Fluent UI Insights. Там инженеры Microsoft без лишнего маркетинга объясняют, почему они приняли те или иные архитектурные решения. Например, есть отдельные выпуски про позиционирование элементов, темизацию и ту самую библиотеку Griffel.

Если решите попробовать v9, сразу идите в Storybook проекта. Документация там на порядок лучше, чем в главном README. Там можно покрутить каждый компонент, посмотреть код и сразу понять, впишется ли он в вашу архитектуру.

В целом, Fluent UI — это пример того, как огромная корпорация пытается навести порядок в зоопарке своих интерфейсов. Даже если вы не планируете его использовать, заглянуть в исходники v9 полезно для общего развития: там много интересных приемов по работе с React Context и оптимизации рендеринга.