fbpx

El desafío “Draggable Bar”: cómo dividir componentes de manera eficiente.

Cuando el cliente nos solicitó esta nueva funcionalidad “Draggable Bar”, supimos desde un principio que iba a ser un desafío con el cual íbamos a poder investigar y aprender muchísimo. Documentamos a continuación una guía detallada con la resolución del desafío sin fallas de rendimiento.

Problema

El cliente buscaba la mejor manera de que se puedan redimensionar dos elementos verticalmente, en relación a la altura del elemento padre.

Intención

El primer prototipo logrado consistió de un contenedor padre y dos hijos con una barra en medio.

Al hacer click sobre la barra esperamos a que el mouse se mueva verticalmente y, en caso de hacerlo, calculamos las nuevas alturas para los contenedores hijos.

Al esperar a que el mouse se mueva después de hacer click nos da el efecto de arrastre, pero realmente es la combinación de dos tipos de eventos que nos proporciona la Web API del browser.

Discusiones/Tweaks

La intención que tuvimos funcionaba correctamente pero con algunas fallas de rendimiento, las cuales se pueden apreciar en el gif:

Esto se debe a que nuestro Draggable Bar repinta el DOM cada vez que arrastramos la barra, lo cual ocurre prácticamente a tiempo máquina y como el repintado del DOM utiliza muchos recursos, se ralentiza la experiencia del usuario.

Una de las soluciones que encontramos investigando acerca de la mejora de rendimiento fue la de accionar la aceleración por GPU (Graphic Processing Unit). Es decir, cada vez que el browser del usuario requiera repintar los contenedores Top y Bottom con sus nuevas alturas, este lo haga con la ayuda del GPU.

Si bien puede funcionar en computadoras actuales, en el resto es casi seguro que seguirán viendo el problema, por lo que seguimos investigando para encontrar una mejor solución.

Al investigar encontramos una forma de realizar los cambios de altura respetando los tiempos de la computadora del usuario. Esto se logró usando una función de la Web API del browser, que nos permite realizar una acción cada vez que el browser del usuario pinta un frame llamado requestAnimationFrame (rAF). Este método de la Web API nos permite repintar la pantalla tan pronto el browser pueda hacerlo, en vez de hacerlo cada cierto tiempo establecido o a tiempo máquina.

Estructura

Al final utilizamos todas las soluciones encontradas, lo cual implica usar la Web API, cada vez que se mueva la barra, para calcular los altura de los contenedores en cada frame. También cambiamos la propiedad de CSS para simular la altura y a su vez accionamos el GPU para repintar la misma.

¡Te compartimos el link para que puedas probarlo!: Draggable Bar Playground

Conclusiones

Gracias a esta funcionalidad que nos fue asignada para resolver, descubrimos nuevas funcionalidades del navegador y características especiales, como el posible uso de la tarjeta gráfica del usuario para renderizados pesados o llamados especiales durante cada renderizado que él mismo hace.
También es necesario destacar que si bien es posible animar varias propiedades de CSS, hay que tener en cuenta que cada una puede afectar el rendimiento de diferentes formas.

Por: Lucas Lacquaniti y Luis Olmedo

Developers en GM2

Don’t Stop Here

More To Explore