Vue Logo

Llegué a la conclusión de que no me bastaba con aprender Laravel sin conocer algún marco del lado del cliente. Al principio recuerdo haber intentado aprender Angular sin éxito, en parte porque la mal pensada denominación del proyecto hace que cueste demasisado encontrar información. Pero con Vue.js no era lo mismo y es un proyecto de còdigo abierto independiente así que me tincó más. Otra razòn para elegirlo es que parece ser el favorito de Laravel, así que trabajan juntos fácilmente.

Qué hace una “frontend framework”?

Una vez que se usa lo evidente es que el marco permite separar el “backend” o programación de servidor del diseño de las vistas manteniendo ambas partes completamente desacopladas, al punto que uno podría mantener las dos partes en servidores separados si quisiera. Suelen hacer mucho de lo que antes se hacía con jQuery pero de manera más consistente y ordenada: Hacer llamadas AJAX, cargar datos sin recargar la página, poner efectos visuales, manipular el html, etc.

Generalmente lo que uno debería hacer con un frontend framework como Angular, React.js o Vuejs es crear todas las vistas y comunicarse con la base de datos a travès de una api en el servidor (puede ser el mismo).

Cómo funciona Vue?

Hay dos maneras de utilizar Vue. Una es utilizarlo como una librería más, adjuntándola con un:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Y la otra es instalarlo con npm (que es el instalador de librerías de Nodejs). Primero instalas node, descargàndolo desde su pàgina inicial y luego por la lìnea de comandos o el sìmbolo de sistema en Windows escribiendo:

npm install vue

Hay varios buenos tutoriales. El curso introductorio de Vue Mastery es muy bueno y està en video, pero incluye tambièn el còdigo de lo que muestra. Eso sí, está sólo en inglés pero si sabes inglés te recomiendo suscribirte.

En Styde.net hay un curso en castellano sobre Vue.js. Tampoco es gratuito pero de nuevo, es una buena inversiòn.

Cómo funcionaría en Laravel?

Cuando trabajamos de manera normal con Laravel, usamos Blade para las vistas y le vamos pasando variables. Cuando trabajamos con Vue dentro de Laravel no necesitamos más que una vista, porque el resto se crean en componentes.

Los componentes quedan en la carpeta resources/js.

Laravel además cuenta con una herramienta llamada Laravel Mix pensada para integrar este tipo de librerías en blade y en general dentro de su ecosistema.

Me gustaría escribir otro día un pequeño tutorial de còmo crear una SPA (single page application) dentro de Laravel. Sí me parece que trabajar desacopladamente, sobre todo al principio, va a resultar más lento que hacerlo sólo con Laravel pero trabajar de manera desacoplada va a ayudar mucho a tener una web más ordenada y fácil de mantener a futuro. El problema, a mi entender, de depender de Laravel para el frontend con Blade, es que igual es una plantilla del lado del servidor, por lo que todo lo que tenga que ver con Javascript queda desatendido.

En resumen

Vale la pena? Sinceramente lo vale en la medida que organiza mejor el código, permite hacer cosas más rápido en las vistas teniendo acceso al lado del cliente y no sólo al del servidor como en las plantillas como Twig o Blade. Además de liberar al servidor de cierta carga (ya que la única carga que tiene es retornar contenido en formato json) Para algo muy sencillo, posiblemente no, pero trabajar con el frontend es algo que está pidiendo el mercado laboral, es entretenido y da cierta flexibilidad al desarrollo de aplicaciones web.