En Laracon Online, Evan You nos explica cómo Vue.js aplica una serie de técnicas y conceptos como «Render functions» y «DOM Virtual» para optimizar la forma cómo se lee y actualiza el DOM de las páginas y además permitir desacoplar el código de las vistas de la implementación de los navegadores y permitir así el desarrollo de aplicaciones nativas o del lado de servidor, como veremos en las siguientes notas:

Render inicial de Vue.js:

  • Compila en una “Render function”
  • Retorna un DOM virtual
  • Genera el DOM actual o real

Render Function

  • Retorna un nuevo DOM virtual
  • Compara la diferencia contra el DOM virtual anterior
  • Actualiza el DOM actual

Esto se hace como una medida de optimización porque actualizar el DOM virtual es rápido, pero actualizar el DOM actual de la página es lento.

¿Pero qué es el DOM virtual?

Ejemplo, “DOM actual”: creación de un div de verdad en el DOM:

document.createElement(‘div’)

El “Virtual DOM” usa el API de Vue para crear un elemento en el DOM virtual:

vm.$createElement(‘div’)

Diferencia al visualizar el DOM actual vs el DOM virtual:

DOM real

Implementado por el navegador internamente: [object HTMLDivElement]

DOM virtual:

Es un objeto de JavaScript: { tag: ‘div’, data: { attrs: {}, ... }, children [] }

Trabajar con objetos nativos del navegador es pesado, ejemplo: acceder al DOM nativo, modificarlo o crear nuevos elementos.

El DOM virtual por el contrario son simplemente objetos planos y livianos de JavaScript que le permiten a Vue definir cómo el DOM real debería lucir en cualquier momento del ciclo de vida de la aplicación.

Además el DOM virtual nos permite desacoplar la lógica para imprimir elementos del DOM real. Lo cual le permite a Vue tener capacidad de imprimir elementos en entornos fuera de los navegadores, por ejemplo del lado de servidor o para aplicaciones nativas para móviles.

¿Qué es una render function?

Es básicamente una función que retorna DOM virtual.

Compilador de Vue

Se encarga de convertir plantillas de Vue a funciones render.

Plantilla:

{{ msg }}
Función render:
function render() {
  with(this) {
    return _c('div', {
      attrs: {
        "id": "app"
      }
    }, [_v(_s(msg))])
  }
}

Puedes probarlo por ti mismo aquí: https://vue-template-explorer.now.sh

¿Quieres aprender Vue.js?

Por favor revisa nuestro Curso de Vue 2, pronto comenzaremos con el desarrollo de SPA (single page applications), integración con Laravel y Vue y más. También puedes ver nuestro Curso de Vue 1 con Laravel y suscribirte a nuestro boletín para recibir más información:

Suscríbete a nuestro boletín

Te enviaremos publicaciones con consejos útiles y múltiples recursos para que sigas aprendiendo.

Más sobre Laracon Online

Durante el día de hoy te mantendremos al tanto de lo que se esté presentando en las diferentes conferencias:

Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.