Jamstack: El retorno de los sitios estáticos

Volvieron los sitios estáticos! Con herramientas y conceptos desarrollados en los últimos años podemos sacar ventaja de ciertas características de los sitios web estáticos y crear aplicaciones web más performantes, más seguras, más escalables y más baratas.
"Jamstack" es un término que se volvió popular últimamente. Cada vez hay más herramientas, servicios y frameworks que nos ayudan a desarrollar aplicaciones web siguiendo ese enfoque. Vamos a hablar de esta arquitectura y que ventajas nos ofrece en comparación a las aplicaciones "Server Side Rendered". También hablaremos sobre los distintos tipos de herramientas que tenemos a nuestro alcance para crear aplicaciones web basadas mayormente en el contenido pre-generado.

Transcript

1. soy parte de la comunidad it!
   speaker_!
   facundo_giuliani
   JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
   

   View Slide

2. FOTO
   SPEAKER
   CUADRADA
   soy parte de la comunidad it!
   @facundozurdo
   @facundozurdo
   facundogiuliani
   Facundo Giuliani!
   SENIOR DEVELOPER AND TEAM LEADER / MultiTracks.com
   Auth0 Ambassador
   GitKraken Ambassador
   Cloudinary Media Developer Expert
   Web - fgiuliani.com
   Twitter - @facundozurdo
   GitHub - @fgiuliani
   

   View Slide

3. AGENDA!
   +
   .
   .
   .
   .
   .
   .
   .
   .
   .
   .
   .
   .
   SITIOS WEB ESTÁTICOS
   SITIOS WEB DINÁMICOS
   SERVER SIDE RENDERING
   CLIENT SIDE RENDERING
   JAMSTACK
   Características, componentes, servicios y herramientas
   

   View Slide

4. @facundozurdo
   @facundozurdo
   facundogiuliani
   JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
   

   View Slide

5. @facundozurdo
   @facundozurdo
   facundogiuliani
   JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
   http://info.cern.ch/hypertext/WWW/TheProject.html
   

   View Slide

6. @facundozurdo
   @facundozurdo
   facundogiuliani
   JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
   

   View Slide

7. @facundozurdo
   @facundozurdo
   facundogiuliani
   JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
   

   View Slide

8. @facundozurdo
   @facundozurdo
   facundogiuliani
   JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
   http://spacejam.com
   

   View Slide

9. @facundozurdo
   @facundozurdo
   facundogiuliani
   SITIOS WEB ESTÁTICOS
   Sitios que son entregados al navegador tal como están
   almacenados en el servidor
   

   View Slide

10. @facundozurdo
    @facundozurdo
    facundogiuliani
    SITIOS WEB DINÁMICOS
    Sitios web donde parte de su contenido es generado
    dinámicamente, cuando sea necesario
    

    View Slide

11. @facundozurdo
    @facundozurdo
    facundogiuliani
    JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
    

    View Slide

12. @facundozurdo
    @facundozurdo
    facundogiuliani
    JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
    

    View Slide

13. @facundozurdo
    @facundozurdo
    facundogiuliani
    SERVER SIDE RENDERING
    El contenido HTML es generador por el servidor web
    

    View Slide

14. @facundozurdo
    @facundozurdo
    facundogiuliani
    JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
    

    View Slide

15. @facundozurdo
    @facundozurdo
    facundogiuliani
    JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
    

    View Slide

16. @facundozurdo
    @facundozurdo
    facundogiuliani
    SINGLE PAGE APPLICATION
    Aplicación web que interactúa con el usuario reescribiendo la
    página web actual, con nueva información enviada desde el
    servidor
    

    View Slide

17. @facundozurdo
    @facundozurdo
    facundogiuliani
    El contenido HTML es renderizado directamente en el
    navegador usando JavaScript
    CLIENT SIDE RENDERING
    

    View Slide

18. @facundozurdo
    @facundozurdo
    facundogiuliani
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    MEJORES INTERACCIONES
    CLIENT SIDE RENDERING - PROS
    RENDERIZADO MÁS RÁPIDO DESPUÉS DE CARGA INICIAL
    MENOS USO DEL SERVIDOR WEB
    COMPONENTES REUTILIZABLES
    

    View Slide

19. @facundozurdo
    @facundozurdo
    facundogiuliani
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    CARGA INICIAL MÁS LENTA
    CLIENT SIDE RENDERING - CONS
    SEO NO PERFORMANTE SI NO SE IMPLEMENTA BIEN
    DEPENDENCIA DE LIBRERÍAS EXTERNAS
    

    View Slide

20. @facundozurdo
    @facundozurdo
    facundogiuliani
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    CARGA INICIAL MÁS RÁPIDA
    SERVER SIDE RENDERING - PROS
    MEJOR SEO / SOCIAL MEDIA OPTIMIZATION
    MÁS SEGURO (MENOS CÓDIGO DEL LADO DEL CLIENTE)
    MENOS USO DEL DISPOSITIVO CLIENTE
    

    View Slide

21. @facundozurdo
    @facundozurdo
    facundogiuliani
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    SERVIDORES WEB MÁS SOBRECARGADOS
    SERVER SIDE RENDERING - CONS
    RENDERIZADO GENERAL DE LA PÁGINA MÁS LENTO
    RECARGA COMPLETA DE PÁGINA EN CAMBIOS DE RUTA
    PÁGINA CARGA ANTES, PERO SIN INTERACCIÓN COMPLETA
    

    View Slide

22. @facundozurdo
    @facundozurdo
    facundogiuliani
    JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
    Un paso adelante atrás
    

    View Slide

23. @facundozurdo
    @facundozurdo
    facundogiuliani
    JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
    

    View Slide

24. @facundozurdo
    @facundozurdo
    facundogiuliani
    JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
    

    View Slide

25. @facundozurdo
    @facundozurdo
    facundogiuliani
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    RÁPIDOS
    SITIOS WEB ESTÁTICOS
    BAJOS COSTOS
    FÁCILES DE MANTENER
    SEGUROS
    FÁCILES DE ESCALAR
    ESTABLES
    

    View Slide

26. @facundozurdo
    @facundozurdo
    facundogiuliani
    JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
    JAMSTACK
    

    View Slide

27. @facundozurdo
    @facundozurdo
    facundogiuliani
    JAMSTACK
    Una nueva manera de crear sitios y aplicaciones web con
    mejor performance, más seguridad, costos más bajos de
    escalabilidad y una mejor experiencia de desarrollo
    

    View Slide

28. @facundozurdo
    @facundozurdo
    facundogiuliani
    JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
    

    View Slide

29. @facundozurdo
    @facundozurdo
    facundogiuliani
    JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
    Generar archivos estáticos cacheables en tiempo de
    compilación, siempre que sea posible
    

    View Slide

30. @facundozurdo
    @facundozurdo
    facundogiuliani
    JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
    Desplegar esos archivos en CDNs
    

    View Slide

31. @facundozurdo
    @facundozurdo
    facundogiuliani
    JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
    Usar JavaScript del lado del cliente para llamar APIs externas y
    aplicaciones serverless, para las interacciones y carga de datos
    

    View Slide

32. @facundozurdo
    @facundozurdo
    facundogiuliani
    JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
    

    View Slide

33. @facundozurdo
    @facundozurdo
    facundogiuliani
    STATIC SITE GENERATOR
    Software que produce y despliega sitios estáticos usando
    distintas fuentes de datos y templates
    

    View Slide

34. @facundozurdo
    @facundozurdo
    facundogiuliani
    JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
    

    View Slide

35. @facundozurdo
    @facundozurdo
    facundogiuliani
    JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
    

    View Slide

36. @facundozurdo
    @facundozurdo
    facundogiuliani
    CONTENT MANAGEMENT SYSTEM
    Aplicación o conjunto de programas que se usan para crear y
    gestionar contenido digital
    

    View Slide

37. @facundozurdo
    @facundozurdo
    facundogiuliani
    JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
    

    View Slide

38. @facundozurdo
    @facundozurdo
    facundogiuliani
    HEADLESS CMS
    Un CMS donde el repositorio de contenido está separado de la
    capa de presentación
    

    View Slide

39. @facundozurdo
    @facundozurdo
    facundogiuliani
    JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
    

    View Slide

40. @facundozurdo
    @facundozurdo
    facundogiuliani
    BUILD, DEPLOYMENT & HOSTING
    Servicios para compilar, integrar, desplegar y alojar
    aplicaciones web
    

    View Slide

41. @facundozurdo
    @facundozurdo
    facundogiuliani
    JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
    

    View Slide

42. @facundozurdo
    @facundozurdo
    facundogiuliani
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    APLICACIONES SERVERLESS: AWS Lambda, Azure Functions, Google
    Cloud Functions
    SERVICIOS API
    FORMULARIOS: Formspree, Typeform, Netlify Forms
    BASES DE DATOS: FaunaDB, Firebase, Supabase
    AUTENTICACIÓN: Auth0, Firebase Authentication
    

    View Slide

43. @facundozurdo
    @facundozurdo
    facundogiuliani
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    MOTORES DE BÚSQUEDA: Algolia, Azure Search
    SERVICIOS API
    E-COMMERCE: Snipcart, Shopify
    COMENTARIOS: Commento, Mouthful
    IMAGEN Y VIDEO: Cloudinary
    

    View Slide

44. @facundozurdo
    @facundozurdo
    facundogiuliani
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    MEJOR PERFORMANCE
    JAMSTACK - PROS
    SERVIDORES MÁS BARATOS
    MEJOR CACHE
    MÁS SEGURIDAD
    FÁCIL DE ESCALAR
    MEJOR SEO
    MEJOR EXPERIENCIA DE DESARROLLO
    

    View Slide

45. @facundozurdo
    @facundozurdo
    facundogiuliani
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    DIFERENTES COSTOS PARA EVALUAR
    JAMSTACK - PROBLEMAS
    DEPENDENCIAS EXTERNAS
    TIEMPO DE COMPILACIÓN "ATÓMICA"
    DIFICULTAD PARA EDITORES DE CONTENIDO
    

    View Slide

46. @facundozurdo
    @facundozurdo
    facundogiuliani
    JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
    

    View Slide

47. GRACIAS!
    hasta la próxima!!
    @facundozurdo
    @facundozurdo
    facundogiuliani
    

    View Slide