La historia de la reconstrucción del stack tecnológico de Facebook

Facebook, que comenzó con un PHP sencillo, comparte el proceso y las lecciones de cómo migró a React + Relay (GraphQL) para adaptarse a este nuevo diseño.

Aplicaron principios básicos para una app rápida en CSS, JS, Data y Navigation por separado.

1. Enviar solo los recursos necesarios lo más rápido posible

2. Una experiencia de ingeniería orientada a la experiencia de usuario

CSS

• Redujeron el CSS en un 80% con Atomic CSS y evitaron descargar CSS innecesario

• Usaron rems por accesibilidad, y para reducir errores al convertir manualmente de px → rems, automatizaron esa conversión en la herramienta de build

• Usaron variables CSS para Theming (modo oscuro)

• Usaron SVG inline para evitar parpadeos (en vez de poner archivos SVG en img). Con esto, también fue posible cambiar colores en tiempo de ejecución

JS

• Envían el JS dividido en 3 etapas de code-splitting, según cada fase

 Tier 1. Layout básico para mostrar rápidamente el UI Skeleton al cargar

 Tier 2. JS para renderizar por completo todo el contenido visible en pantalla. Debe quedar totalmente funcional, y aunque se cargue código después de Tier 2, la composición visual no debe cambiar

 Tier 3. Todo lo necesario después de mostrar la pantalla: código de logging, suscripciones a actualizaciones en tiempo real, etc.

• 500KB de JS se dividieron en 50KB Tier 1, 150KB Tier 2 y 300KB Tier 3 → el efecto es que la carga y la visualización terminan muy rápido

• Gracias a esta división, también pudieron configurar A/B tests para que cada lado reciba solo el código que necesita

• Aprovecharon funciones de Relay, que ayuda a crear apps React orientadas por datos, para que se carguen solo los componentes necesarios según los datos que se van a traer

• Introdujeron un sistema de presupuesto de JS por producto. Definen el presupuesto según objetivos de rendimiento, restricciones técnicas y consideraciones del producto, para evitar que el código siga creciendo con el tiempo.

Data

• Con Relay, estandarizaron todo el data fetching para usar GraphQL

• Gracias a Relay, descargan en paralelo desde la etapa de request de la página los datos necesarios primero, lo que permite mostrar la pantalla más rápido

• Usaron @stream, una extensión interna de GraphQL, para enviar progresivamente datos como el News Feed dentro de una sola query, sin varias rondas de ida y vuelta

• Con @defer + React Suspense, dejan para después la carga de datos que no se necesitan de inmediato

Navigation

• En la navegación SPA, construyeron un Route Map para reducir el tiempo de carga de recursos y los round trips al cargar una nueva página

• Cargan la información de rutas en el Route Map de forma fragmentada y tan rápido como sea necesario

• Hacen prefetch de recursos tan pronto como pueden (prefetch al hacer hover, cargar código y datos al hacer mouse down, y cuando ocurre el clic cambia el estado de React)

• En vez de mostrar una pantalla en blanco entre navegaciones, usan transiciones de React Suspense para seguir mostrando la ruta actual antes de traer la nueva Route

• Usan EntryPoints (archivos pequeños que envuelven puntos de bifurcación de código y queries de datos) para paralelizar la descarga de código y datos

[xguru]

Las cosas que se pueden aprender del CSS del nuevo diseño de Facebook https://es.news.hada.io/topic?id=1819

También conviene consultar el artículo.

[xguru]

Relay - el cliente GraphQL listo para producción para React https://relay.dev/