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

Jamstack: El retorno de los sitios estáticos

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.

Da36a51e8d743e587bf1c9317e65a68e?s=128

Facundo Giuliani

November 26, 2020
Tweet

Transcript

  1. soy parte de la comunidad it! speaker_! facundo_giuliani JAMSTACK: EL

    RETORNO DE LOS SITIOS ESTÁTICOS
  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
  3. AGENDA! + . . . . . . . .

    . . . . SITIOS WEB ESTÁTICOS SITIOS WEB DINÁMICOS SERVER SIDE RENDERING CLIENT SIDE RENDERING JAMSTACK Características, componentes, servicios y herramientas
  4. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS

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

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

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

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

    http://spacejam.com
  9. @facundozurdo @facundozurdo facundogiuliani SITIOS WEB ESTÁTICOS Sitios que son entregados

    al navegador tal como están almacenados en el servidor
  10. @facundozurdo @facundozurdo facundogiuliani SITIOS WEB DINÁMICOS Sitios web donde parte

    de su contenido es generado dinámicamente, cuando sea necesario
  11. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS

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

  13. @facundozurdo @facundozurdo facundogiuliani SERVER SIDE RENDERING El contenido HTML es

    generador por el servidor web
  14. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS

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

  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
  17. @facundozurdo @facundozurdo facundogiuliani El contenido HTML es renderizado directamente en

    el navegador usando JavaScript CLIENT SIDE RENDERING
  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
  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
  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
  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
  22. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS

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

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

  25. @facundozurdo @facundozurdo facundogiuliani . . . . . . .

    . . . . . RÁPIDOS SITIOS WEB ESTÁTICOS BAJOS COSTOS FÁCILES DE MANTENER SEGUROS FÁCILES DE ESCALAR ESTABLES
  26. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS

    JAMSTACK
  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
  28. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS

  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
  30. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS

    Desplegar esos archivos en CDNs
  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
  32. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS

  33. @facundozurdo @facundozurdo facundogiuliani STATIC SITE GENERATOR Software que produce y

    despliega sitios estáticos usando distintas fuentes de datos y templates
  34. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS

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

  36. @facundozurdo @facundozurdo facundogiuliani CONTENT MANAGEMENT SYSTEM Aplicación o conjunto de

    programas que se usan para crear y gestionar contenido digital
  37. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS

  38. @facundozurdo @facundozurdo facundogiuliani HEADLESS CMS Un CMS donde el repositorio

    de contenido está separado de la capa de presentación
  39. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS

  40. @facundozurdo @facundozurdo facundogiuliani BUILD, DEPLOYMENT & HOSTING Servicios para compilar,

    integrar, desplegar y alojar aplicaciones web
  41. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS

  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
  43. @facundozurdo @facundozurdo facundogiuliani . . . . . . .

    . . . . . MOTORES DE BÚSQUEDA: Algolia, Azure Search SERVICIOS API E-COMMERCE: Snipcart, Shopify COMENTARIOS: Commento, Mouthful IMAGEN Y VIDEO: Cloudinary
  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
  45. @facundozurdo @facundozurdo facundogiuliani . . . . . . .

    . . . . . DIFERENTES COSTOS PARA EVALUAR JAMSTACK - PROBLEMAS DEPENDENCIAS EXTERNAS TIEMPO DE COMPILACIÓN "ATÓMICA" DIFICULTAD PARA EDITORES DE CONTENIDO
  46. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS

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