Команды Office Engineering and Experiences создали первую версию Fluent 3–4 года назад. Последние 2 года они активно работали над новой версией — Fluent 2. Astro оказался лучшим фреймворком для сайта Fluent 2 благодаря приросту производительности с island architecture. Им нужно было что-то лёгкое, вписывающееся в существующий workflow и инструменты. Astro позволила Microsoft оставаться гибкой и помогла редакторам контента создавать и править материалы без боли.
Проблемы
Microsoft несколько раз пыталась строить документацию по дизайну на других фреймворках и CMS. Оказалось, что эти инструменты либо слишком жёсткие, либо сложны в поддержке, либо миграция с них болезненна. Другие плохо интегрировались с workflow в Figma и историями о дизайне, которые команда хотела рассказывать.
Команда сделала шаг назад, чтобы переоценить приоритеты, и решила сосредоточиться на дизайн-системе и реально нужной архитектуре. Оказалось, что их контент и макеты плохо подходили для CMS: было много кастомных компонентов, которые нельзя было переиспользовать. Они были уникальными и требовали участия инженеров.
Требования
Команде нужно было что-то лёгкое и с низкими затратами на DevOps для сайта Fluent 2. Инструмент должен был поддерживать библиотеку дизайн-системы с опубликованной React-версией. Важна была и расширяемость: возможность позже добавить CMS или DocSearch, например Algolia. Наконец, нужно было поддерживать legacy Storybook iframe для примеров кода, но со временем уйти от них.
Решение и внедрение
Astro по умолчанию не отправляет JavaScript — для Microsoft это идеально лёгкое и производительное решение. Будучи agnostic к инструментам, Astro поддерживает и другие фреймворки, поэтому Microsoft могла продолжать использовать библиотеку дизайн-системы на React. В будущем они надеются улучшить опыт редактирования контента, снова подключив CMS. Среди CMS, поддерживаемых экосистемой Astro — Storyblok, CloudCannon и Sanity.
Когда спросили, что было самым выгодным в выборе Astro, Tudor сказал следующее:
«Для нас очень важно, что Astro умеет генерировать полностью статические файлы. Это серьёзное преимущество: мы хотим быть защищены от разных угроз, в том числе DDoS-атак. Продукт, сильно завязанный на backend-сервис, может создавать проблемы. В наше время полностью статический сайт, размещённый на Azure, очень выгоден с точки зрения безопасности и масштабируемости».
Astro также позволила Microsoft продолжать поддерживать legacy Storybook iframe, пока команда не была готова мигрировать. Это сохранило хороший опыт для внешних и внутренних пользователей, пока под капотом менялся технологический стек.
Microsoft спроектировала и построила новый сайт Fluent 2 на Astro за 10 месяцев, включая более 200 страниц нового контента.
Результаты
Astro помогла команде Fluent создавать новые страницы в два раза быстрее, чем на предыдущем стеке. Astro также помогла разработчикам и дизайнерам оставаться на одной волне с полной силой HTML, CSS и JavaScript.
Дизайн-система Fluent 2 с тех пор используется во многих продуктах компании, включая Office, Windows и Teams. С такой настройкой Microsoft может внедрить макеты из Figma для простой страницы за 20–30 минут.
Анимация: слово сменяется по цепочке — ideas, creativity, tasks, imagination и innovation.