Anteriormente hemos hablado como instalar Vue.js para crear nuestras aplicaciones web. A continuación, me gustaría tocar el tema de como funcionan los dos sabores disponibles para crear nuestros componentes y por ende nuestra aplicación. En la documentación de Vue.js estos dos sabores son llamados Full distribution y Runtime-only distribution. Por conveniencia vamos a llamar de ahora en adelante a la versión Full, Standalone. Veamos que las hace especial y cómo podemos sacar mejor provecho a la hora de comenzar nuestro proyecto.
Standalone
Esta es la versión que comúnmente utilizamos cuando empezamos con Vue.js. Aquí encontraremos el compilador y el runtime para ejecutar toda la magia de Vue.js. El compilador es el encargado de transformar todo lo que tenemos en nuestro template a funciones render de JavaScript. Este señor se encarga de hacer “todo el trabajo pesado” por nosotros. Cuando utilizas Vue.js desde tu navegador a través de la etiqueta <script>, básicamente estas cargando el compilador y el runtime.
Aquí lo más importante es recordar que el compilador es el encargado de compilar el html o los templates para hacer el rendering al navegador.
Runtime-only
Esta versión no incluye la opción o la habilidad de compilar in-DOM templates como lo hace la versión Standalone. Para poder mostrar html en el navegador debes hacerlo a través de una función de render. A fin de cuentas así es como lo hace la versión Standalone. En realidad, la única tarea que no podemos realizar con el Runtime es la compilación de templates. Todo lo demás es posible – crear instancias, manejar el Virtual DOM, reactividad, ya sabes, todo menos compilar templates.
Hacer render más allá del navegador
Cuando usas la versión Standalone, esta usa los API disponibles a través del navegador para hacer el rendering. La versión Runtime-only no posee esta habilidad. Pero esta carencia le brinda la flexibilidad de poder hacer rendering en ambientes donde no existe la presencia de un navegador, por el ejemplo, en el servidor. No vayas a pensar que la versión Runtime-only es inferior, por el contrario, esto le permite a Vue.js poder ejecutarse en lugares antes no posible. Proyectos como Weex (similar a React Native) y Nuxt.js (Server-Side Rendering usando Vue.js) son posibles gracias al Runtime. Técnicamente el Runtime es el corazón de Vue.js.
Componentes en un archivo único
Continuando con el tema de fortalezas y desventajas, para proyectos pequeños o prototipos rápidos no hay mejor opción que usar la versión Standalone. Ya cuando el proyecto haya crecido suficiente o entiendas que es de una complejidad moderada lo mejor es usar directamente el Runtime. Ahora bien y como ya hemos mencionado, la única mejor manera de usar el Runtime es a través del Vue-cli y usar Single File Components. El problema con los templates es que terminas escribiendo CSS o HTML dentro de un archivo JavaScript, a lo JSX, para arreglar las cosas del HTML en el JavaScript. Aquí es donde Vue.js se destaca de los demás. Los componentes de un solo archivo de Vue es probablemente una gran solución, que te permite poner todo lo relacionado a un componente en un solo lugar resolviendo un gran número de decisiones en torno a la arquitectura de componentes.
Un asunto a considerar es si deseas moverte de usar la versión Standalone a usar solo el Runtime. Ir del código en versión Runtime-only a Standalone es un paseo, técnicamente le has hecho un favor al compilador. Ahora bien, para ir viceversa, de Standalone a Runtime-only tendrás que rescribir todos los componentes para usar funciones render.
Ejemplos
El artículo 7 Ways To Define A Component Template in Vue.js contiene excelentes ejemplos de como crear componentes en Vue.js. No los copiaré aquí pero en resumen los ejemplos de 1-4 usan la versión Standalone y los ejemplos 5-7 usan solo el Runtime.
De no tener claro las ventajas y desventajas de ambos sabores, no dudes en comentarlo.