Nuxt Avanzado (de Scaffolding a MVP)

Nuxt es el framework modular, orientado a rendimiento y a Experiencia de Desarrollador de VueJS. Permite tanto el Renderizado en Servidor (SSR) como la generación de sitios estáticos (sin necesidad de servidor) y la generación de una Single Page Application con baterías incluidas.

En este evento profundizaremos en ir un poco más allá de los primeros pasos con Nuxt para ver cómo crear nuestro propio MVP con la integración de Nuxt Firebase como backend con Firestore como base de datos y Firebase Authentication como sistema de autenticación de usuarios.

Transcript

1. NUXT AVANZADO (DE SCAFFOLDING A MVP) @RAFAEL_CASUSO ALEXANDER LONDON
2. NUXT A QUEMARROPA WILMER MARTÍNEZ NUXT AVANZADO (DE SCAFFOLDING A MVP)
3. ¿QUÉ ES NUXT? • Framework de Aplicación sobre VueJS con con f i guración prede f i nida y estandarización CARACTERÍSTICAS • Sistema de Vistas Anidadas Automatizadas • Renderización: • Server-Side Rendering • Static Site • Single Page Application • Enrutado Automático basado en estructura de archivos • Estructura de Aplicación Estandarizada y Predecible NUXT AVANZADO (DE SCAFFOLDING A MVP)
4. • Con f i guración e Inyección de Gestión de Estado Automática • Meta Tags y SEO • Data Fetching por Page y Component • Transiciones a nivel Page • Gestión del Loading • Con f i guración General del Framework centralizada • Ecosistema de Módulos en https://modules.nuxtjs.org/ NUXT AVANZADO (DE SCAFFOLDING A MVP)
5. RENDERIZACIÓN • Server-Side Rendering • Es el modo por defecto • Renderización en Servidor (Acceso a Request y Response) e Hidratación en Cliente (convirtiéndose en Aplicación) • Requiere un Hosting que permita Servidor Node (Heroku, AWS, etc) • Generación de Sitio Estático • Renderización en Build time con destino a dist • Puede servirse en cualquier Hosting estático (Firebase, Netlify, etc) • Single-Page Application • Renderización total en Cliente NUXT AVANZADO (DE SCAFFOLDING A MVP)
6. SISTEMA DE VISTAS AUTOMÁTICO • Layout/s • Componente Vue que enmarca la vista de una o varias Pages • Puede ser global o especí f i co por Page • Deben incluir el componente Nuxt donde se renderizan las Pages • Pages • Componentes Vue con Atributos Especiales: AsyncData, Fetch, Head, Layout, Loading, Transition, ScrollToTop, Middleware • Components • Componentes Vue con acceso a algunos Atributos Especiales como Fetch NUXT AVANZADO (DE SCAFFOLDING A MVP)
7. ENRUTAMIENTO AUTOMÁTICO • Nuxt genera automáticamente la con f i guración de Enrutación (Vue- Router) en base a la estructura de archivos del directorio Pages • Genera automáticamente Code-Splitting sin con f i guración • Las rutas dinámicas se generan con un _ delante del nombre del componente • Los parámetros y query strings se inyectan automáticamente en los componentes • ProTip: • Puedes usar _.vue en cualquier nivel de enrutamiento para capturar rutas desconocidas NUXT AVANZADO (DE SCAFFOLDING A MVP)
8. META TAGS Y SEO • Puedes de f i nir Meta Tags a nivel Global en nuxt.con f i g.js • También puedes hacerlo especí f i cos por Page en el atributo Head • Permite cargar recursos externos en los atributos Script y Link de Head tanto a nivel Global como por Page NUXT AVANZADO (DE SCAFFOLDING A MVP)
9. DATA FETCHING • Recuperación de Datos Universal • Fetch es un hook con acceso al Contexto que se llama: • En SSR tras la creación del componente antes del renderizado de la Page • En Cliente tras la navegación una vez el componente es mounted • AsyncData es un hook • Se resuelve durante la transición de Rutas ante de la navegación a la siguiente Page • Mergea su resultado con el Local State del componente • ProTip: • Puedes usar ‘keep-alive’ como atributo del componente Nuxt para cachear y evitar llamadas fetch al navegar a páginas ya visitradas NUXT AVANZADO (DE SCAFFOLDING A MVP)
10. MVP CON NUXT JOSH HILD NUXT AVANZADO (DE SCAFFOLDING A MVP)
11. ¿QUÉ NECESITAMOS PARA UN MVP? • Requisitos habituales mínimos: • Autenticación • Persistencia • Analítica • Hosting • Opcionalmente: • Almacenamiento • Mensajería NUXT AVANZADO (DE SCAFFOLDING A MVP)
12. • Autenticación • Persistencia • Analítica • Hosting (Static Deployment) • Almacenamiento • Mensajería NUXT AVANZADO (DE SCAFFOLDING A MVP)
13. • Inyecta $ f i re (a partir de la versión 7) con acceso a todos los servicios • Vuex f i re permite sincronizar con un binding bidireccional la Gestión de Estado y su Persistencia en FireStore. • FirebaseUI debe con f i gurarse por separado ya que es una librería cliente para dar interfaz automática al sistema de autenticación NUXT AVANZADO (DE SCAFFOLDING A MVP)
14. REALIDAD VIRTUAL URIEL SOBERANES NUXT AVANZADO (DE SCAFFOLDING A MVP)
15. NUXT AVANZADO (DE SCAFFOLDING A MVP) @RAFAEL_CASUSO KEVIN LAMINTO