Desarrollo progresivo de aplicaciones Front con Vue.JS, gestión de estados con Vuex y testing de componentes con Jest y Cypress
Vue.JS es el nuevo framework JavaScript que viene para ayudarnos a desarrollar aplicaciones front de una manera sencilla y cómoda. Vue.JS es considerado por su creador como un framework progresivo. Se considera así por la facilidad de integrar funcionalidad hecha en Vue.JS en nuestras aplicaciones ya desarrolladas y, a su vez, por la suave curva de aprendizaje que tenemos que dedicar en tiempo y esfuerzo en cada una de las piezas del framework.
A lo largo del curso de Vue.JS + Vuex, aprenderemos desde cómo crear componentes simples que podamos integrar en nuestras aplicaciones realizadas con otras tecnologías hasta cómo crear proyectos enteros con todas las piezas importantes del ecosistema de Vue.JS.
Los asistentes al curso de Vue.JS + Vuex también aprenderán a escalar sus aplicaciones con vue-router y a gestionar el estado con Vuex. Por último, aprenderán además a testear de manera automatizada sus componentes con Jest y Cypress.
| Documentación |
|---|
| Clase 1 |
| Clase 2 |
| Clase 3 |
| Clase 4 |
| Clase 5 |
| Clase 6 |
Descubriendo Vue.js
- Frontend: HTML, CSS y JS
- Evolución frontend
- Tipos de proyecto
- Fatiga frontend
- State of JS
- ¿Por qué gusta Vue?
- ¿Por qué ME gusta Vue?
- ¿Qué es Vue?
- Un poco de historia
- Una pequeña comparativa
Getting Started
- Herramientas de desarrollo
- Tipos de proyecto
- Vue como librería
- Reactividad
- Registro de componentes
- Vue como framework
- Arquitectura de proyecto
- SFC
Componentización
- Definición de componentes
- Arquitectura basada en componentes
- Single File Components
- Atributos: Data, Computed, Watch, Props
- Métodos: Métodos, Ciclo de vida (Hooks) y emisión de eventos
- Mixins
- Slots
- Web components
Directivas
- Directivas generales
- Directiva v-model
- Renderizado condicional
- Renderizado de listas
Styling
- Configuración de preprocesadores
- Scoped vs general
- Ecosistema de dependencias
Vue Router
- vue-router
- Enrutado de aplicación básico
- Definición de rutas
- Configuración router-link
- Gestión de información entre rutas
- Segmentos dinámicos
- Página no encontrada
- Rutas anidadas
- Navegación programática
- Navigation Guards
- Transitions
- Lazy loading
Vuex
- Gestión del estado: concepto y análisis
- Arquitectura de estado
- Acciones & mutaciones
- Getters / Setters
Testing
- Análisis de proyecto
- Testing atómico
- Jest: test unitarios y de integración
- Cypress: test de aceptación
Buenas prácticas
- Code Styling
- Arquitectura
Ecosistema
- Axios
- Nuxt
- Firebase
- StoreFront
- Awesome Vue