VueJS: Aplicaciones universales con Nuxt

33109943776_dab3b6d829_o.jpg

Fotografía de portada de Chris Garcia

Si has llegado hasta aquí, ¡Enhorabuena! Estamos al final de camino. Hemos aprendido muchas cosas sobre Vue en general y sobre SSR en particular durante estas últimas semanas.

La sensación que nos dejaba vue-server-renderer era la de ser una librería con la que tener que lidiar con demasiada configuración engorrosa, que no nos ayudaba a centrarnos en lo importante: desarrollar aplicaciones.

Como os he ido prometiendo, esto, a día de hoy, tiene solución: el proyecto Nuxt ha nacido para encargarse de toda esa fontanería y ayudarnos en que focalicemos y aportemos valor lo antes posible. Por todo lo probado y leído, Nuxt me parece un proyecto con mucho futuro, por tanto creo que este post será un buen punto y final a la serie de VueJS.

Terminemos lo empezado:

Read More

Anuncios

VueJS: Adaptando tu proyecto a SSR

34293008720_b0882fb1f2_o.jpg

Foto de portada de Chris Garcia

Con lo visto en el post anterior, tenemos una primera aproximación de cómo dejar configurado nuestro primer proyecto con SSR.  Además de esto, necesitamos adaptar ciertas partes de nuestro código para que todo funcione como debe.

Tenemos que pensar que la forma de trabajar en cliente y servidor no es la misma y conseguir código universal necesita de una serie de adaptaciones.

En el post de hoy hablaremos de cómo y por qué realizar estas adaptaciones. Aunque existirán seguramente más partes que adaptar, nos vamos a centrar en los cores del framewrok: la instancia de vue, los routers y los stores.

Duante el post, usaremos el patrón factoría que ya explicamos hace unos meses aquí

Read More

VueJS: Configurando Webpack para SSR

34293013000_52d6908d85_o.jpg

Foto de portada de Chris Garcia

Una vez que tenemos claros los conceptos básicos, es hora de trabajar para que nuestro proyecto se adapte a las necesidades del SSR. Empezaremos la adaptación configurando la build.

La forma en la que vamos a empaquetar nuestra aplicación variará debido a las necesidades de ejecutar código de vue en servidor y en cliente de forma indistinta. Necesitamos que el código de nuestra aplicación sea universal y para ello vamos a apoyarnos en Webpack para conseguir este tipo de empaquetados.

Más tarde veremos cómo adaptar el resto del proyecto, pero por ahora centrémonos en este punto: Configurar Webpack a esta nueva situación:

Read More

VueJS: Introducción a Server-Side Rendering

Tenemos todas las herramientas necesarias para desarrollar aplicaciones con VueJS. Hemos aprendido a crear componentes, a renderizarlos e interaccionar con ellos. Hemos aprendido a escalar nuestras aplicaciones mediante vue-router y vuex e incluso hemos aprendido a crear una build con Webpack para empaquetar nuestras aplicaciones.

Puede que todo esto sea suficiente para la mayoría de proyectos y puede que haya un número concreto de proyectos, en los que los tiempos de respuesta sean críticos para conseguir una masa suficiente de clientes, y que necesitemos nuevas herramientas para conseguir este plus de carga y eficiencia.

VueJS no abandona a estos desarrolladores y ha creado una librería que se basa en lo que llamamos “Renderizado en la parte servidor”. A lo largo de los próximos capítulos estudiaremos este nuevo concepto que se está poniendo tan de moda en frameworks como Vue o React, aunque nos sean harto conocidos para los que hemos trabajado en proyectos con ASPX o JSP.

Veamos:

Read More