$30 off During Our Annual Pro Sale. View Details »

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

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

Bermon Painter

April 21, 2021
Tweet

More Decks by Bermon Painter

Other Decks in Programming

Transcript

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

    View Slide

  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

    View Slide

  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

    View Slide

  4. La Evolución
    Navegador Web Servidor

    View Slide

  5. La Evolución
    Navegador Web Servidor Base de Datos

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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.

    View Slide

  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)

    View Slide

  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

    View Slide

  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

    View Slide

  13. headlesscms.org

    View Slide

  14. strapi.io

    View Slide

  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.)

    View Slide

  16. View Slide

  17. View Slide

  18. Setting up
    relational data
    Companies

    View Slide

  19. Setting up
    relational data
    People

    View Slide

  20. Setting up
    relational data
    Videos

    View Slide

  21. Setting up
    relational data
    Generated APIs

    View Slide

  22. Setting up
    relational data
    Generated APIs

    View Slide

  23. localhost:1340/videos

    View Slide

  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

    View Slide

  25. gridsome.org

    View Slide

  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)

    View Slide

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

    View Slide

  28. View Slide

  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

    View Slide

  30. TEMPLATE














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

    View Slide

  31. TEMPLATE

    query {}

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

    View Slide

  32. COMPONENT












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

    View Slide

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

    View Slide

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

    View Slide

  35. PAGE




    {{title}}
    {{innovatorName}} from
    {{innovatorCompany}}
    {{description}}

    Watch Video







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

    View Slide

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

    View Slide

  37. 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.

    View Slide

  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.

    View Slide

  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

    View Slide

  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.

    View Slide

  41. github.com/strapi/strapi-docker

    View Slide

  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)

    View Slide

  43. vuemastery.com

    View Slide

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

    View Slide

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

    View Slide