PDF de programación - Desarrolla aplicaciones con VueJS

Tabla de contenido

Acerca de este manual
Bloque 1. Los conceptos básicos

Capítulo 1. The Progressive JavaScript Framework
Capítulo 2. Trabajando con templates
Capítulo 3. Enlazando clases y estilos

Bloque 2. La creación de componentes
Capítulo 4. Creando componentes
Capítulo 5. El ciclo de vida de un componente
Capítulo 6. Definiendo componentes en un único fichero

Bloque 3. La gestión de rutas con vue-router

Capítulo 7. Introduciendo rutas en nuestra aplicación
Capítulo 8. Interceptores de navegación
Capítulo 9. Conceptos avanzados

Bloque 4. La gestión de estados con vuex

Capítulo 10. Introducción
Capítulo 11. Los estados y getters
Capítulo 12. Las mutaciones y acciones
Capítulo 13. Los módulos

Bloque 5. El empaquetado de la aplicación con webpack

Capítulo 14. Conceptos básicos
Capítulo 15. Configurando nuestra primera build
Capítulo 16. Caching, Shimming & Splitting

Bloque 6. Renderizado en servidor con vue-server-renderer

Capítulo 17. Introducción a Server-Side Rendering
Capítulo 18. Configurando Webpack para SSR
Capítulo 19. Adaptando tu proyecto a SSR

Bloque 7. Otras herramientas

Capítulo 20. Aplicaciones universales con Nuxt

Bloque 8. Testeando nuestra aplicación con vue-test-utils

Capítulo 21. Introducción

1.1
1.2
1.2.1
1.2.2
1.2.3
1.3
1.3.1
1.3.2
1.3.3
1.4
1.4.1
1.4.2
1.4.3
1.5
1.5.1
1.5.2
1.5.3
1.5.4
1.6
1.6.1
1.6.2
1.6.3
1.7
1.7.1
1.7.2
1.7.3
1.8
1.8.1
1.9
1.9.1

2

Capítulo 22. Testeando nuestros componentes
Capítulo 23. Testeando nuestros stores

1.9.2
1.9.3

3

Acerca de este manual

Acerca de este manual

Este manual es una recopilación de posts extraídos del blog El Abismo de Null sobre el
desarrollo de aplicaciones hechas en JavaScript con el nuevo framework VueJS.

Como podrás ver a lo largo de los capítulos, esta herramienta supone una forma más
progresiva de adentrarse a aplicaciones que necesiten de un mayor escalado y
mantenimiento de módulos.

Antes de empezar

El manual intenta ser lo más explícito posible en las explicaciones de todos esos conceptos
que puedan resultarte nuevos. Sin embargo, sí espero una predisposición de conocimientos
previos por tu parte.

Por ejemplo, el manual se encargará de explicar todo los conceptos importantes de:

Vue
Vue-Router
Vue-Cli
Vuex
Webpack
Nuxt

4

Acerca de este manual

Pero no se encargará de ser una guía sobre:

JavaScript
EcmaScript 6
CSS
HTML

Estos conceptos, aunque pueden ser referenciados o explicados en algún momento en
concreto, no son el objetivo principal y tendrás que tenerlos en cuenta antes de empezar la
lectura del manual.

Estructura

El manual se encuentra compuesto por 8 bloques. Cada bloque se encargará de explicar,
de forma progresiva, uno de los grandes elementos del framework.

Si eres nuevo en VueJS, te recomiendo que empieces desde el Capítulo 1 a leer y que
prosigas para un aprendizaje adecuado. Si ya tienes conocimientos previos sobre VueJS,
siéntete libre de viajar por el manual como te plazca.

Aviso importante

El manual no supone un sustitutivo de la documentación oficial y solo quiere ser un apoyo o
un aglutinador de conceptos base que todo desarrollador debería tener para ser competente
en dicha herramienta.

El manual nace como una ayuda suplementaria para todas aquellas personas que no
tengan un nivel fluido de inglés y quiera leer documentación sobre VueJS en su lengua
materna.

Hay que recordar que el manual es una recopilación de post de un blog. Un blog que usa,
en muchas ocasiones, lenguaje coloquial y que es un medio para expresar impresiones e
inquietudes técnicas mías.

No tomes esta guía como si se tratase de un ensayo académico formal.

Comparte

La guía no se ha creado con ningún fin lucrativo. No se esperan aportaciones económicas,
ni se cuenta con ningún derecho de autor explícito.

5

Acerca de este manual

Simplemente ha sido creada por un afán por compartir y evangelizar sobre esta gran
herramienta de trabajo.

Si te gusta lo que has leído y crees que puede aportar valor a otras personas, comparte.
Cambia, elimina o añade todo aquello que tú creas que aporta y hazla tuya.

Puedes compartir por cualquier red social, blog o podcasts que creas conveniente.

Tuitea

Descarga

El manual se encuentra disponible en la plataforma GitBook de manera pública. Están
habilitados los formatos en MARKDOWN, HTML, PDF, EPUB y MOBI para que puedas
disfrutar de ella desde cualquier tipo de dispositivo.

Aunque las 5 formas han sido probadas, puede ser que se me hayan pasado aquellos
detalles de maquetación o de visualización más específicos, por lo que de ser así, te
agradecería que me lo comentaras o que me enviaras una Pull Request con los cambios.

Feedback

Estoy disponible en todo momento para que puedas decirme qué te ha parecido el manual y
estoy abierto a cualquier comentario sobre cómo mejorarlo.

Puedes hablar conmigo por twitter o escribirme algún comentario en mi blog, o escribirme
directamente un correo electrónico.

Te intentaré contestar en la mayor brevedad posible. Lo prometo.

Agradecimientos

Gracias por leer esta guía y confiar en ella para dar tus primeros pasos en VueJS. Creo que
el tiempo dedicado te merecerá la pena por la forma y el mimo con el que este framework
ha sido desarrollado.

Tu productividad y tu equipo agradecerá que hayas apostado por una tecnología como esta.

Agradezco mucho la ayuda de las siguientes personas que han colaborado a hacer este
manual un poco mejor:

Correctores ortográficos y estilísticos:

6

Acerca de este manual

Rafa García
Raúl Arrieta

En fin...empecemos :)

7

Capítulo 1. The Progressive JavaScript Framework

Capítulo 1. The Progressive JavaScript
Framework

Hoy comienza una nueva serie en El Abismo. Hoy empezamos un nuevo viaje hacia nuevas
tierras tecnológicas. Hemos hablado largo y tendido en el blog sobre buenas prácticas,
patrones, paradigmas y pequeños trucos que nos han ayudado a hacer mejor JavaScript.
Creo que es hora de que aprovechemos todo ese conocimiento que hemos ido adquiriendo,
y que lo empleemos en conocer mejor nuestras herramientas de trabajo.

Como desarrolladores, tenemos muchas herramientas de trabajo, pero nada suele ser tan
importante como el conjunto de librerías o frameworks a los que nos atamos en los
proyectos. Incluir estas dependencias en nuestro proyectos va a determinar la forma en la
que trabajamos y el estilo que tendremos que usar. De ahí la importancia de elegir aquellas
herramientas que realmente necesitamos y que nos harán sentirnos cómodos.

Como antes de poder incluir cualquier herramienta en producción, hay que probarla y
aprenderla, creo que es un buen momento para que nos detengamos unas semanas y
prestemos atención a una de las librerías JavaScript que más está llamando la atención en
los últimos meses: VueJS.

No sé cuánto durará esta serie, así que lo mejor es que nos pongamos al lío y dediquemos
nuestro tiempo a entenderla y a saber cómo se usa. ¿Te apetece unirte? ¿Estás con ganas
de aprender la enésima librería de JavaScript? ¿Sí? Pues sigamos:

¿Qué es VueJS?

Vue (pronunciado como viu) es la nueva herramienta JavaScript creada por Evan You,
miembro bastante conocido en la comunidad por participar en el desarrollo de Meteor y por
ser desarrollador de Google durante varios años.

Evan You define su herramienta como un framework progresivo. Progresivo porque el
framework se encuentra dividido en diferentes librerías bien acotadas que tienen una
responsabilidad específica. De esta manera, el desarrollador va incluyendo los diferentes
módulos según las necesidades del contexto en el que se encuentre. No es necesario
incluir toda la funcionalidad desde el principio como en el caso de frameworks como
AngularJS 1.x o EmberJS 1.x.

8

Capítulo 1. The Progressive JavaScript Framework

Es un sistema de modularización bastante parecido al de ReactJS. Facebook desarrolló un
core para poder trabajar con vistas, pero a partir de ahí se han ido creando toda una serie
de librerías (tanto por parte de Facebook como de la comunidad) que permite trabajar de
una manera eficiente en un SPA. Aquí todas las piezas importantes se enmarcan dentro del
proyecto de VueJS creado por Evan You.

A lo largo de estos primeros capítulos nos centraremos en el estudio del core del
framework, por ahora dejaremos de lado a vue-router y a vuex, aunque en algún
momento llegaremos hasta ellos.

El core principal permite el desarrollo de componentes de UI por medio de JavaScript. La
librería se enmarca dentro las arquitecturas de componentes (que tan de moda están) con
una gestión interna de modelos basada en el patrón MVVM. Esto quiere decir que los
componentes, internamente, tienen mecanismos de doble 'data-binding' para manipular el
estado de la aplicación.

Presume de ser una librería bastante rápida que consigue renderizar en mejores tiempos
que ReactJS. Estos son los tiempos que podemos encontrar en su documentación:

Vue

React

23ms
42ms
51ms
73ms
343ms

63ms
81ms
94ms
164ms
453ms

Fastest
Median
Average
95th Perc.
Slowest

Como curiosidad: VueJS tiene un tamaño de 74.9 KB (la versión al hacerse el post es
la v2.2.6).

¿Qué caracteriza a VueJS?

Pero ¿qué define a VueJS? ¿Qué lo diferencia o lo asemeja al resto de alternativas? ¿Por
qué se está poniendo tan de moda? Intentemos explicar algunas de sus características para
que vosotros mismos veáis si el framework tiene la potencia que nos dicen:

Proporciona componentes visuales de forma reactiva. Piezas de UI bien
encapsulados que exponen una API con propiedades de entrada y emisión de eventos.
Los componentes reaccionan ante eventos masivos sin que el rendimiento se vea
perjudicado.

9

Capítulo 1. The Progressive JavaScript Framework

Cuenta con conceptos de directivas, filtros y componentes bien diferenciados.
Iremos definiendo y explicando estos elementos a lo largo de la serie.

La API es pequeña y fácil de usar. Nos tendremos que fiar por ahora si ellos lo dicen
:)

Utiliza Virtual DOM. Como las operaciones más costosas en JavaScript suelen ser las
que operan