Skip to content

Latest commit

 

History

History
118 lines (89 loc) · 3.04 KB

README.md

File metadata and controls

118 lines (89 loc) · 3.04 KB

WideImg

Curso de Vue.js + Vuex

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.

Teoría y recursos

Documentación
Clase 1
Clase 2
Clase 3
Clase 4
Clase 5
Clase 6

Temario

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