La compañía presentó FB5, una nueva versión de Facebook rediseñada por completo gracias a la combinación de nuevas tecnologías de Front-End que darán qué hablar en el futuro próximo de la industria del software.
Luego de un año controversial en torno al cuidado de los datos de los usuarios, Mark Zuckerberg apostó a que el futuro será privado y argumentó cómo se implementará esta visión con nuevas herramientas enfocadas en familia y amigos y encriptación end-to-end para Messenger.
Más allá de las novedades para el público en general, Facebook es también un creador de nuevas tecnologías tan populares en la comunidad de desarrolladores como lo es hoy React. En este sentido, me gustaría poner el foco en la renovación del stack tecnológico de la empresa con el objetivo principal de hacer una plataforma más veloz tanto en el start upcomo en las interacciones en la plataforma. El rediseño, el más significativo desde el lanzamiento de Facebook, ya se puede ver en los EE. UU. mientras que para el resto del mundo se estará lanzando en las próximas semanas.
Con la cantidad de datos necesarios para que funcione tanto su versión desktop como mobile, cada segundo ahorrado hace la diferencia en la experiencia de usuario. Este es un objetivo que es fundamental para todo desarrollo y las grandes empresas — no solo FB sino también Google y Amazon — han comprobado que cada milisegundo cuenta para mantener la atención del usuario. La actualización y optimización de estos gigantes de la tecnología son un ejemplo para todos de la necesidad constante de repitación de los productos para mejorar la usabilidad.
React+GraphQL+Relay: una combinación con potencial
Estas tres tecnologías desarrolladas internamente por FB pero compartidas con la comunidad open-source, nos mostraron una forma de solucionar los problemas de under y over-fetching de datos y manejar el tamaño y eficiencia del código de una forma sustentable para una plataforma a gran escala como FB.
Facebook.com ahora es una nueva SPA (Single Page App) más simple y rápida gracias a GraphQL, un lenguaje declarativo de queries o consultas para API’s y un runtime para cumplir esas consultas con los datos existentes. Provee una capa por sobre todos los datos del servidor para que puedan ser solicitados fácilmente por múltiples clientes (Front-End) a lo largo del tiempo. Al proporcionar una descripción completa y comprensible de los datos contenidos en la API, GraphQL le permite al Front-End pedir exactamente lo que se necesita y nada más. Para customizar las queries las API’s de GraphQL están organizadas en tipos y campos, no en endpoints.
De esta manera, agiliza la ejecución y facilita la evolución de las API’s favoreciendo la estabilidad a lo largo del tiempo. Aún más importante para nosotros en Latino américa, las apps que usan GraphQL pueden ser rápidas aún con conexiones móviles lentas. Otra ventaja de esta tecnología es que es agnóstica o sea que podemos usarla con cualquier lenguaje de Back-End.
Relay, por su parte, es un framework de JavaScript para desarrollos creados en React con datos obtenidos a partir de GraphQL. React permite que las vistas se dividan en componentes independientes. Lo que hace Relay es llevar esta idea de encapsulamiento más allá: le permite a cada componente especificar qué datos necesita. En la conferencia, Juan Tejada — desarrollador de Relay en FB — explicó tres ventajas importantes de esta tecnología:
- Descarga de código y datos en paralelo: Relay provee anticipadamente al browser y a la aplicación toda la información sobre el código que se necesita para generar la vista de cada componente. De esta manera el código y los datos se descargan en paralelo, no en cascada, agilizando la generación de la vista.
- Datos críticos vs. datos no críticos: Relay permite privilegiar la descarga de los datos más necesarios para generar más rápido la vista al usuario. En el caso de FB, por ejemplo, privilegiará los datos del primer post del feed, no de todos los siguientes.
- Lazy-fetching: GraphQL nos permite modelar las variaciones de nuestra UI y describir, por ejemplo, los diferentes tipos de post. De esta manera, si el post que necesitamos generar es un video, Relay le indica al server que descargue la información sobre cómo mostrar ese tipo de formato, no una foto, por ejemplo.
Estas son algunas de las ventajas que nos permiten agilizar la renderización de nuestra página completa. Le pedimos sólo la información que necesitamos al Back-End, por lo tanto, la ejecución es más simple y rápida.