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
   

   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