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 }}
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:
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:
- Jeffrey Way “Laravel Mix.”
- Rachel Andrew “CSS Grid and Flexbox.”
- Adam Wathan “You Might Not Need a Mocking Framework.”
- Taylor Otwell “Laravel 5.4 internals walkthrough.”
- Nick Canzoneri “What developers should know about email.”
- Jason McCreary “You don’t know Git.”
- Matt Stauffer “Mastering the Illuminate Container.”
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
