Haciendo una inmersión profunda con el JAMStack y Vue.js

Transcript

1. Haciendo una inmersión profunda con el JAMStack y Vue.js @bermonpainter | #codemotion
2. 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
3. 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
4. La Evolución Navegador Web Servidor
5. La Evolución Navegador Web Servidor Base de Datos
6. La Evolución Navegador Web CDN Servidor Base de Datos red de distribución de contenidos
7. La Evolución Navegador Web CDN Servidor Servicios API Base de Datos red de distribución de contenidos
8. La Evolución Navegador Web CDN Herramientas de Build Servicios API GIT CMS Sin Encabezado Base de Datos red de distribución de contenidos
9. 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.
10. 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)
11. 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
12. 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
13. headlesscms.org
14. strapi.io
15. ¿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.)
18. Setting up relational data Companies
19. Setting up relational data People
20. Setting up relational data Videos
21. Setting up relational data Generated APIs
22. Setting up relational data Generated APIs
23. localhost:1340/videos
24. 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
25. gridsome.org
26. ¿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)
27. El Flujo de Trabajo Navegador Web Gridsome Layouts Plantillas (templates) Componentes Producción Fuentes de Data Archivos Locales API CMS GraphQL
29. Setup Configuración gridsome.config.js gridsome.server.js Archivos /assets (optional) – /fonts – /images – /js – /scss Producción /dist /components /data (optional) /layouts /templates
30. TEMPLATE <template> <main> <transition name="fade" appear> <article> <slot/> </article> </transition> <nav class="primary-nav"> <g-link class="home-action" to="/"> <svg></svg> </g-link> </nav> </main> </template> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17.
31. TEMPLATE <static-query> query {} </static-query> <script> import SiteSEO from '~/components/SiteSEO' export default { mixins: [SiteSEO], } </script> <style> </style> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17.
32. COMPONENT <template> <transition name="modal-fade"> <div class="modal"> <div class="modal-content"> <button type=“button" @click="close"></button> <div class="video-wrapper"> <slot /> </div> </div> </div> </transition> </template> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17.
33. COMPONENT <script> export default { name: 'Modal', methods: { close() { this.$emit('close'); }, }, }; </script> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17.
34. COMPONENT <style lang="scss"> .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; } </style> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17.
35. PAGE <template> <Layout> <div class="video-main"> <div class="video-main-details powerfulmerger"> <h1 class="video-main-title">{{title}}</h1> <h2 class="video-main-people">{{innovatorName}} from {{innovatorCompany}}</h2> <p class="video-main-description">{{description}}</p> <button @click="showModal" class="video-main-action"> <span>Watch Video</span> </button> </div> <div class="video-main-bottom-gradient"></div> </div> <Modal v-show="isModalVisible" @close="closeModal"> <iframe src="" width="640px" height="360px"></iframe> </Modal> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17.
36. PAGE <script> 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.
37. PAGE methods: { showModal() { this.isModalVisible = true; }, closeModal() { this.isModalVisible = false; } } } </script> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17.
38. 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.
39. 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
40. ¿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.
41. github.com/strapi/strapi-docker
42. ¿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)
43. vuemastery.com
44. https://www.udemy.com/course/curso-practico-de- docker-y-microservicios-desde-cero/
45. Fin. Horas de Oficina Abiertas Los Viernes: 13:00 — 15:00 CEST officehours.io/people/bermonpainter Twitter/LinkedIn @bermonpainter