Haciendo una inmersión profunda con el JAMStack y Vue.js @bermonpainter | #codemotion

Conceptos del JAMStack Los CMS Sin Encabezado Acelerando el Desarrollo Web con Vue.js
 Un Poco Sobre Docker + El Lanzamiento 1 2 3 4 Haciendo una inmersión profunda con el JAMStack y Vue.js

Conceptos del JAMStack Los CMS Sin Encabezado Acelerando el Desarrollo Web con Vue.js
 Un Poco Sobre Docker + El Lanzamiento 1 2 3 4 Haciendo una inmersión profunda con el JAMStack y Vue.js

La Evolución Navegador Web Servidor

La Evolución Navegador Web Servidor Base de Datos

La Evolución Navegador Web CDN Servidor Base de Datos red de distribución de contenidos

La Evolución Navegador Web CDN Servidor Servicios API Base de Datos red de distribución de contenidos

La Evolución Navegador Web CDN Herramientas de Build Servicios API GIT CMS Sin Encabezado Base de Datos red de distribución de contenidos

The JAMstack JavaScript Cualquier cosa dinámico está manejado por JavaScript. Agnóstico del framework. APIs Los datos se accede a través de las API reutilizables a través de HTTPS. Markup Generado como HTML estático por medio de herramientas de build.

Pero ¿Por qué? El Rendimiento Es típico lanzar los archivos HTML, CSS y JavaScript a un CDN como contenido estático 1 2 Seguridad CMS, servidores, base de datos y otras vulnerabilidades son un problema menor 3 Herramienta agnóstica Elija el framework front-end, la herramienta de build (compilación) o la fuente de datos que prefiera 4 5 Workflow GIT Mas fácil de implementar y lanzar còdigo. Más fácil de contribuir. Menos dependencias (en su Experiencia de desarrollador Enfoque en el front-end y preocuparse menos por las bases de datos, dev ops, o back-end 6 Separación de intereses El front-end, el backend, los datos y los devops se pueden desacoplar por completo (decoupled)

Conceptos del JAMStack Los CMS Sin Encabezado Acelerando el Desarrollo Web con Vue.js Un Poco Sobre Docker + El Lanzamiento 1 2 3 4 Haciendo una inmersión profunda con el JAMStack y Vue.js

CMS Sin Encabezado Los CMS Sin Encabezado Un sistema de gestión de contenidos desacoplado de la experiencia del usuario final. Navegador Web Servicios API Front-End Base de Datos UI Admin

headlesscms.org

strapi.io

¿Por qué Strapi? Maneja la mayor parte de las cosas que no disfruto hacer manualmente Incluye API con Docs Puede generar un API desde la interfaz de administración o en su editor de código 1 2 GraphQL o Restful Elija qué interfaz API prefiere integrar con el front- end 3 Incluye autenticación Incluye opciones de autorización y permisos decentes para proteger los endpoints en el API 4 5 Incluye SMTP Configurar un servidor SMTP automaticamente Base de Datos Elija una base de datos relacional o non-relacional y Strapi la configurará 6 Cargas de archivos Maneja el almacenamiento de archivos en el servidor o a través de terceros (AWS, Cloudflare, etc.)

No content

No content

Setting up relational data Companies

Setting up relational data People

Setting up relational data Videos

Setting up relational data Generated APIs

Setting up relational data Generated APIs

localhost:1340/videos

Conceptos del JAMStack Los CMS Sin Encabezado Acelerando el Desarrollo Web con Vue.js Un Poco Sobre Docker + El Lanzamiento 1 2 3 4 Haciendo una inmersión profunda con el JAMStack y Vue.js

gridsome.org

¿Por qué Gridsome? Maneja la mayor parte de las cosas que no disfruto hacer manualmente (básicamente la versión Vue de gatsbyjs.org Generador de sitios estáticos Proporciona una estructura de aplicación lógica y equilibra la configuración frente a la personalización 1 2 Rápido Funciones de rendimiento integradas como división automática de código, captura previa y optimización de imágenes 3 Aplicación Web Progresiva (PWA) Genera automáticamente una aplicación web que cabe en una sola página (SPA) con todas las funciones de optimización integradas 4 5 Consumo de Datos Sencillo Utilice cualquier fuente de datos, desde API hasta archivos JSON locales Amigable con SEO Se carga primero como HTML estático con hidratación incorporada para las piezas del SPA 6 Manejado por Archivos Todo se basa en JavaScript del lado del cliente, API reutilizables y markup estático (pre-built)

El Flujo de Trabajo Navegador Web Gridsome Layouts Plantillas (templates) Componentes Producción Fuentes de Data Archivos Locales API CMS GraphQL

No content

Setup Configuración gridsome.config.js gridsome.server.js Archivos /assets (optional) – /fonts – /images – /js – /scss Producción /dist /components /data (optional) /layouts /templates

TEMPLATE 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17.

TEMPLATE query {} import SiteSEO from '~/components/SiteSEO' export default { mixins: [SiteSEO], } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17.

COMPONENT 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17.

COMPONENT export default { name: 'Modal', methods: { close() { this.$emit('close'); }, }, }; 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17.

COMPONENT .modal-fade-enter, .modal-fade-leave-active { opacity: 0; } .modal { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17.

PAGE 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17.

PAGE import videos from '@/data/videos.json' import Modal from '@/components/Modal.vue' import VideoPlayer from '@/components/Video.vue' export default { data() { return { videos, isModalVisible: false, } }, metaInfo: { title: 'A Powerful Merger' }, components: { Modal, 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17.

PAGE methods: { showModal() { this.isModalVisible = true; }, closeModal() { this.isModalVisible = false; } } } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17.

gridsome.server.js const axios = require('axios') module.exports = function (api) { api.loadSource(async ({ addCollection }) => { const { data } = await axios.get(‘https://localhost:1340/ videos') const posts = addCollection('Videos') for (const video of data) { videos({ id: video.id, title: video.title, description: video.description, innovatorName: video.innovator.name, innovatorCompany: video.innovator.company }) 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17.

Conceptos del JAMStack Los CMS Sin Encabezado Acelerando el Desarrollo Web con Vue.js Un Poco Sobre Docker + El Lanzamiento 1 2 3 4 Haciendo una inmersión profunda con el JAMStack y Vue.js

¿Por qué Docker? Lanzar más Rápido Facilita el lanzamiento de etornos (environment) aislados con una configuración mínima 1 2 Estandarizado El contenedor ya tiene información del servidor, dependencias y la aplicación está configurada 3 Portátil Facilita compartir instancias con otros desarrolladores y moverse a diferentes etornos (environments) Automatiza el lanzamiento de aplicaciones web como contenedores portátiles y autosuficientes que pueden ejecutarse en la nube (the cloud), en sus propios servidores y en el localhost.

github.com/strapi/strapi-docker

¿Dónde desplegar? Gridsome (front-end) Netlify (mas facíl) Github Pages Gitlab Pages Amazon S3 Tu Servidor Strapi /w Docker (data) Azure Amazon AWS Digital Ocean Heroku (mas facíl)

vuemastery.com

https://www.udemy.com/course/curso-practico-de- docker-y-microservicios-desde-cero/

Fin. Horas de Oficina Abiertas Los Viernes: 13:00 — 15:00 CEST officehours.io/people/bermonpainter Twitter/LinkedIn @bermonpainter