Hace algunos días pase por mí muro de facebook, y note que habían mejorado la interface, sinceramente me agrada, note un aspecto más claro y de descanso visual, mayor espacio ó aire entre el contenido, iconos mas notorios y un mejor manejo de las fuentes de texto, centrado en lo multimedia y en encontrar lo que necesitas de una manera más rápida. En mi humilde opinión y estando lejano de ser un experto en diseño visual.

Aunque no soy muy fan de las redes sociales, pero el gran trabajo que han echo en cuanto a arquitectura Front End es digno de admirar y por esta razón vamos a revisar el tech stack de nuevo facebook.

Antes de continuar, quiero aclarar que esta publicación pretende resumir y obtener lecciones de arquitectura frontend del post original del blog de ingeniería de facebook que puedes leer aquí.

Bajo el objetivo de lograr el mayor rendimiento y crecimiento futuro sostenible con un tiempo de inicio competitivo y rápido, el equipo de facebook reescribió todo el código debido a que el stack tecnológico que usaban anteriormente no les permitía construir una nueva aplicación web congruente. Como lo describen ellos en su publicación oficial:

A complete rewrite is extremely rare, but in this case, since so much has changed on the web over the course of the past decade, we knew it was the only way we’d be able to achieve our goals for performance and sustainable future growth.

Usando como herramientas principales React y Relay (un cliente GraphQL para React) rediseñaron facebook, y dos mantras técnicos que acompañaron y anclaron su trabajo a lo largo de proceso:

1. As little as possible, as early as possible.
2. Engineering experience in service of user experience.

Lo menos posible, lo antes posible y Experiencia en ingeniería al servicio del usuario. Bajo estos 2 principios pudieron mejorar cuatro elementos principales del sitio: CSS, JavaScript, datos y navegación.

Repensar CSS para desbloquear nuevas capacidades

Atomic CSS

El nuevo sitio incluye menos css, redujeron en 80% la pantalla de inicio generando atomic css, creando hojas de estilo compartido y pequeñas, además su herramienta de compilación divide los estilos en paquetes separados y optimizados. Como resultado la nueva página de inicio descarga menos del 20% del css del sitio anterior.

CSS separado en pequeñas hojas de estilo - facebook.com

rem para los textos

Utilizaron rems para cambiar los tamaños de fuente y mejorar las actualizaciones de accesibilidad del sitio sin requerir cambiar muchas hojas de estilo. En la actualidad una gran variedad de dispositivos permiten hacer zoom para aumentar o reducir el tamaño de las cosas, usando rems respetaron las propiedades propuestas por el usuario.

Pero la conversión manual de rems agregaba sobrecarga de ingeniería y posibilidad de error, por lo que crearon una herramienta de compilación para la conversión a rem.

rem en las fuentes de texto - facebook.com

variables css para los temas (modo dark)

Las variables css, se aplican dentro de un selector, por lo general el :root, para ser global, pero también se puede aplicar a determinado selector de clase ., de esta manera los estilos aplicados dentro del sub árbol del DOM pueden cambiar, cuando el valor de una variable es modificada. De esta manera se evita anular estilos existentes con reglas que tenían una especificidad mas alta.

Modo Oscuro - facebook.com

SVG desde JavaScript

Incorporaron SVG en HTML usando React en lugar de pasar archivos SVG a etiquetas img. Logrando que estos SVG incorporen lógica de JavaScript, así se pueden agrupar y entregar junto con sus componentes circundantes para un render limpio de una sola pasada. Descubrieron que la ventaja de cargarlos al mismo tiempo que JavaScript era mayor que el costo del rendimiento de pintar el SVG. Con esta técnica también evitaron el flickering (parpadeo) de iconos que aparecián después.

function MyIcon(props) {
  return (
    <svg {...props} className={styles({/*...*/})}>
       <path d="M17.5 ... 25.479Z" />
    </svg>
  );
}
SVG incorporado a HTML - facebook.com

Logrando además que estos íconos puedan cambiar los colores en tiempo de ejecución sin requerir a descargas adicionales de estilos a través del uso de variables css.

Este post lo dividiré en 2 partes, ya que veo que se extendería demasiado en uno solo, y para terminar esta primera parte, dejaré algunas reflexiones sobre lo visto anteriormente:

  • CSS separado y divido en el momento de la compilación, facilita el mantenimiento y reduce CSS no utilizado.
  • Carga los estilos que necesitas en cada acción o vista.
  • Evitar tener selectores de descendencia, de esta manera evitar romper estilos de otros al modificar.
  • Atomic CSS, permite tener hojas de estilo pequeñas, su crecimiento es proporcional a la cantidad de estilos únicos que escribas.
  • Usando rems, podemos mejorar el manejo de fuentes de texto para proveer mejor accesibilidad.
  • Usando variables CSS, podemos cambiar el valor de las propiedades que afectan a un elemento del dom, evitando anular estilos de una especificidad más alta.
  • Incorporando SVG dentro de la lógica de javascript, podemos controlar el render en los componentes y cambiar sus propiedades de color.

Continuaremos descubriendo más del nuevo facebook, en la segunda parte de este post. Si ya llegaste hasta aquí, te invito a leer el segundo post de esta serie.