Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

7559f6cff1f5efc2d210965febd4d71c?s=128

Bermon Painter

April 21, 2021
Tweet

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.)
  16. None
  17. None
  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
  28. None
  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