Readymag Under the Hood: Implementación más rápida del visor vertical

En diciembre de 2017, Readymag lanzó Faster Vertical Viewer, que permite una experiencia de visualización más fluida para proyectos con widgets fijos y animaciones pesadas. En este artículo, el diseñador de productos Readymag Eugene Petrov describe cómo lo hicimos y lo que logramos.

Todo fue fácil primero

En 2013, Readymag comenzó con un solo visor horizontal. Un proyecto que utiliza este tipo de visor presenta un conjunto de páginas verticales entre las cuales el lector cambia usando flechas de navegación a la izquierda y a la derecha de la página. En un proyecto de visor horizontal, cada página también podría desplazarse verticalmente de arriba a abajo si no se ajusta a la pantalla.

Páginas en el visor horizontal

Luego presentamos los widgets fijos: se adhieren a una determinada posición en la ventana del navegador y no se mueven cuando se desplaza la página. Pero cuando se mueve a otra página, los widgets fijos se pierden de vista junto con la página anterior a la que pertenecen. Para el desplazamiento bidimensional, fue suficiente usar la propiedad CSS "posición: fija" ampliamente admitida.

Más allá del visor horizontal

Surgieron problemas cuando comenzamos a apilar páginas una encima de otra para presentarlas en el nuevo Visor vertical.

Páginas en el visor vertical

En este caso, los widgets fijos deben permanecer en la pantalla mientras se desplaza su página. Pero, deberían desaparecer cuando aparezca una nueva página, no desde el lado como en los proyectos de desplazamiento horizontal, sino desde la parte inferior de la pantalla. La propiedad 'position: fixed' no pudo resolver esa tarea: los elementos ya no están incondicionalmente fijos a lo largo de la altura de la página (eje vertical), sino que tienen que verificar si hay una nueva página y cambiar su estado en consecuencia de ser fijo a ser estático.

Para resolver este problema, tuvimos que emular "position: sticky" con nuestra propia implementación de javascript. El código mueve las páginas verticalmente cuando el lector se desplaza por ellas y mueve los widgets fijos junto con su contenedor.

Los inconvenientes surgieron inevitablemente con las actualizaciones recientes en los navegadores. Desde que implementamos nuestro propio comportamiento de desplazamiento con los navegadores JavaScript, no pudimos predecir el posicionamiento de los elementos y optimizar el proceso de representación. Cada movimiento de contenido provocó un repintado de la ventana completa: el proceso que demanda mayor memoria y aumenta significativamente las cargas de CPU y GPU. A su vez, las animaciones a veces se retrasaban durante el desplazamiento porque los navegadores no activaban el evento de "desplazamiento" en cada movimiento. Parecían cuadros omitidos en una película de animación. De todos los navegadores, Safari fue un desastre total: con cada actualización, Apple hizo que consumiera menos energía al limitar severamente los recursos disponibles.

"Posición: pegajosa" sale a la luz

Todo cambió en marzo de 2017 cuando todos los principales navegadores de escritorio y móviles finalmente agregaron soporte para la propiedad CSS "posición: permanente". Chrome fue el último en presentarlo en la versión 61 el 5 de septiembre de 2017. Desde entonces, la tarea de eliminar elementos fijos de la vista junto con su contenedor se volvió trivial.

El soporte nativo para "posición: permanente" significa que los desarrolladores ya no tienen que emular este comportamiento a través de JavaScript lento. Los navegadores saben mejor qué contenido solicitar en función de la dirección en que se desplaza la página. O descargue de la memoria aquellos elementos de la página que ya no son visibles en una pantalla. Eso tiene un valor especial para los navegadores móviles: los recursos son escasos, por lo que esta es la única forma en que pueden responder a los comandos incluso cuando el lector está viendo páginas muy largas. Y desde la actualización de Chrome 61, la mayoría de los últimos dispositivos Android no solo pueden mostrar, sino que también admiten de forma nativa nuestro Visor vertical.

Visor vertical más rápido: los principales cambios

Vimos este desafío como una oportunidad para repensar fundamentalmente la implementación del Visor. El resultado es nuestro nuevo Visor de desplazamiento más rápido: cuando se activa, el navegador interpreta la secuencia de páginas en las que el proyecto consiste en un cuerpo de página HTML naturalmente alto (como si las páginas siguieran el 'flujo' en el que todos los elementos HTML aparecen en una página ) De esta forma, nuestro proyecto con toda su lógica complicada se ve como una página web larga convencional como cualquier otro sitio web.

Páginas separadas en el Visor vertical

Esta actualización permitió un rendimiento de visualización más rápido y fluido, especialmente en páginas con widgets animados y fijos.

Sin embargo, hay un par de inconvenientes menores. En primer lugar, cuando está encendido, el Desplazamiento más rápido no admite la transición de deslizamiento. Dejamos esta opción en la configuración, pero debemos advertirle que utiliza la antigua implementación del Visor con todos sus inconvenientes.

En segundo lugar, los widgets animados "en desplazamiento", que se mueven a medida que los visitantes se desplazan, podrían retrasarse en algunos navegadores. Eso se debe a la razón que describimos anteriormente: sorprendentemente, los navegadores no pueden disparar el evento de "desplazamiento" simultáneamente con el desplazamiento. Eso significa esencialmente que no podemos ejecutar el script que mueve los widgets animados en cada movimiento de desplazamiento. Me duele especialmente cuando usas animaciones "en desplazamiento" para bloquear un widget en una pantalla mientras se desplaza el resto del contenido. Afortunadamente, hay una solución alternativa: arregla tus elementos animados. En este caso, todo se verá perfecto.

Readymag siempre se ha esforzado por ofrecer la tecnología web más avanzada en manos de los diseñadores. Puede tener la sensación de que es un enfoque difícil (¡y de hecho lo es!) Pero la libertad creativa siempre será nuestra prioridad número 1.