Es una nueva comunidad sobre el reciente estándar de la web Html5, donde puedes encontrar tutoriales, tips, consejos, información, noticias y demás en un solo lugar.


Apoya la comunidad con $1 USD, queremos mejorar y compartir más conocimiento.

DOM Virtual


  Publicado hace |  Etiquetas: , , , , ,

El año pasado les hablamos un poco sobre DOM y DOM incremental, pero ¿qué hay sobre DOM virtual?.

DOM Virtual

Anteriormente mencionamos que un DOM virtual es cuando usamos una copia de un DOM para realizar cambios fácilmente creando un árbol virtual de trabajo, de esta manera podemos trabajar en el mismo, guardar cambios y replicarlos en nuestra DOM (si así lo deseamos).

Virtual DOM

Para estar seguros de que los cambios se realizaron correctamente, tenemos dos formas de corroborar:

  1. Realizar un sondeo de los datos a intervalos regulares e ir comprobando todos y cada uno de los valores en la estructura de datos de forma recursiva.
  2. O en su caso, revisar que los cambios realizados se observen claramente, si no ha cambiado nada entonces los cambios no se han hecho.

Una forma de generar doms virtuales de manera sencilla es con React.

React JS

React JS es una librería JavaScript de código abierto para construir interfaces de usuario desarrollado por Facebook, uno de los ejemplos de aplicación en plataformas famosas es Instagram.

Reactjs

Lo que hace útil a ésta librería es el alto performance que tiene para las doms virtuales, donde en vez de hacer el render en cada cambio del DOM, sólo hace los cambios en una copia, posteriormente genera los cambios reales en un sólo movimiento.

Aunque parezca que el trabajo se duplica en realidad no es así, pues ya cuando estamos en plena acción el trabajo realizado se reduce de manera más eficiente. Por ejemplo: si tenemos una lista de miles de  elementos en una interfaz y debemos realizar 5 cambios, es más eficiente aplicar esos cambios, ubicar los componentes cambiados y renderizar, que hacerlo al revés (aplicar diez cambios y renderizar toooodos los elementos).

Y si!, serán más pasos a planear y programar, pero no hay nada mejor que ello para ofrecer una mejor experiencia de usuario. Esta sería una desventaja para los que no suelen realizar proyectos o visualizaciones de lo que harán y cómo lo haran, sin embargo, ReactJS promueve mucho el flujo de datos en un solo sentido, detectando fácilmente los errores en aplicaciones complejas, en las que el flujo de información puede llegar a ser muy complejo.

La idea de las doms virtuales es genial y no es una solución nueva, con React podemos aumentar el rendimiento de nuestras aplicaciones y es realmente muy fácil de conseguir y tendremos un trabajo rápido y eficiente sin ningún problema.

comments powered by Disqus