Microsoft es un nombre muy conocido, creador de herramientas tan populares como la suite de Microsoft Office. Su línea de productos incluye productos de escritorio, web y móviles, p. ej. SDKs para Android e iOS. Para mantener su identidad visual consistente en todos estos productos, dependen de su sistema de diseño Fluent 2.
Sus equipos de Office Engineering and Experiences crearon la primera versión de Fluent hace 3-4 años. Durante los últimos 2 años, han estado trabajando duro en la última versión, Fluent 2. Astro fue el mejor framework para el sitio web de Fluent 2 debido a las mejoras de rendimiento con la arquitectura de islas. Buscaban algo ligero que encajara con su flujo de trabajo y herramientas existentes. Astro permitió a Microsoft ser ágil, ayudando a los editores de contenido a crear y editar contenido sin complicaciones.
Desafíos
Microsoft hizo varios intentos de construir sus documentos de diseño usando otros frameworks y CMS. Encontraron que estas herramientas eran demasiado rígidas, difíciles de mantener, o la migración era dolorosa. Otras no se integraban bien con su flujo de trabajo de Figma y las historias de diseño que querían contar.
El equipo dio un paso atrás para reevaluar sus prioridades y determinó que deberían enfocarse en el sistema de diseño y qué arquitectura necesitaban realmente. Resulta que su contenido y diseños no eran adecuados para un CMS porque tenían muchos componentes personalizados que no podían reutilizar. Eran únicos y requerían intervención de ingeniería.
Requisitos
El equipo quería algo ligero y de bajo mantenimiento del lado de DevOps para el sitio web de Fluent 2. Esta herramienta tendría que soportar su biblioteca de sistema de diseño, que tenía una versión de React publicada. La extensibilidad también era importante, es decir, querían poder añadir un CMS o DocSearch p. ej. Algolia después si lo deseaban. Por último, querían poder soportar iframes heredados de Storybook para compartir ejemplos de código pero poder migrar fuera de ellos eventualmente.
Solución e Implementación
Astro envía cero JavaScript por defecto, haciéndolo perfectamente ligero y eficiente para Microsoft. Al ser agnóstico de herramientas, Astro también soporta otros frameworks, lo que significaba que Microsoft podía continuar soportando su biblioteca de sistema de diseño construida con React. En el futuro, esperan mejorar la experiencia de edición de contenido volviendo a añadir un CMS. Algunos de los CMS soportados por el ecosistema de Astro son Storyblok, CloudCannon, y Sanity.
Cuando se le preguntó cuál era la parte más ventajosa de elegir Astro, Tudor dijo lo siguiente:
“Es muy importante para nosotros que Astro sea capaz de generar archivos completamente estáticos. Esto es muy ventajoso para nosotros porque queremos estar protegidos de múltiples cosas como ataques DDoS. Así que, tener un producto que dependa mucho de un servicio back-end podría causar problemas. En estos tiempos, tener un sitio web completamente estático, y alojarlo en Azure, es muy ventajoso para la seguridad y la escalabilidad.”
Astro también hizo posible que Microsoft continuara soportando iframes heredados de Storybook hasta que el equipo estuviera listo para migrar. Esto permitió a Microsoft mantener una buena experiencia para los usuarios externos e internos mientras cambiaban su stack tecnológico internamente.
Microsoft diseñó y construyó el nuevo sitio web de Fluent 2 con Astro durante 10 meses, incluyendo más de 200 páginas de nuevo contenido.
Resultados
Astro ayudó al equipo de Fluent a construir nuevas páginas en la mitad del tiempo en comparación con su stack anterior. Astro también ayudó a los desarrolladores y diseñadores del equipo a mantenerse alineados con todo el poder de HTML, CSS, y JavaScript.
El uso del sistema de diseño Fluent 2 desde entonces se ha utilizado en muchos productos de la empresa incluyendo productos de Office, Windows, y Teams. Con esta configuración, Microsoft es capaz de implementar diseños de Figma para una página simple en 20-30 minutos.
Animación mostrando una palabra cambiando de las siguientes palabras a la siguiente: ideas, creatividad, tareas, imaginación, e innovación.