Jamstack: Volviendo a las raíces

Jamstack: Volviendo a las raíces

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 19, 2020
Tweet

Transcript

  1. Jamstack: Volviendo a las raíces

  2. Facundo Giuliani Web fgiuliani.com Twitter @facundozurdo GitHub @fgiuliani Ingeniero en

    Sistemas Team Leader @ MultiTracks.com Auth0 Ambassador - GitKraken Ambassador - Cloudinary Media Developer Expert
  3. 3

  4. Tim Berners-Lee

  5. http://info.cern.ch/hypertext/WWW/TheProject.html

  6. None
  7. None
  8. http://spacejam.com

  9. Sitios Web Estáticos Sitios que son entregados al navegador tal

    como están almacenados en el servidor
  10. Sitios Web Dinámicos Sitios web donde parte de su contenido

    es generado dinámicamente, cuando sea necesario
  11. None
  12. None
  13. None
  14. Server Side Rendering El contenido HTML es generador por el

    servidor web
  15. None
  16. None
  17. Aplicación web que interactúa con el usuario reescribiendo la página

    web actual, con nueva información enviada desde el servidor Single Page Application
  18. Client Side Rendering El contenido HTML es renderizado directamente en

    el navegador usando JavaScript
  19. Client Side Rendering PROS CONS ◆ Mejores interacciones. ◆ Renderizado

    más rápido después de carga inicial. ◆ Menos uso del servidor web. ◆ Componentes reutilizables. ◆ Carga inicial más lenta. ◆ SEO no performante si no se implementa bien. ◆ Dependencia de librerías externas.
  20. Server Side Rendering PROS CONS ◆ Carga inicial más rápida.

    ◆ Mejor SEO / Social Media Optimization. ◆ Más seguro (menos código del lado del cliente). ◆ Menos uso del dispositivo cliente. ◆ Servidores web más sobrecargados. ◆ Renderizado general más lento. ◆ Recarga completa de página en cambio de ruta. ◆ Página carga antes, pero sin interacción completa.
  21. Un paso adelante atrás

  22. None
  23. None
  24. ◆ Rápidos ◆ Bajos costos ◆ Fáciles de mantener Sitios

    Web Estáticos ◆ Seguros ◆ Fáciles de escalar ◆ Estables
  25. Jamstack

  26. 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
  27. None
  28. Generar archivos estáticos cacheables en tiempo de compilación, siempre que

    sea posible
  29. Desplegar esos archivos en CDNs

  30. Usar JavaScript del lado del cliente para llamar APIs externas

    y aplicaciones serverless, para las interacciones y carga de datos
  31. None
  32. Software que produce y despliega sitios estáticos usando distintas fuentes

    de datos y templates Static Site Generator
  33. None
  34. None
  35. Content Management System Aplicación o conjunto de programas que se

    usan para crear y gestionar contenido digital
  36. None
  37. Headless CMS Un CMS donde el repositorio de contenido está

    separado de la capa de presentación
  38. None
  39. Build, Deployment & Hosting Servicios para compilar, integrar, desplegar y

    alojar aplicaciones web
  40. None
  41. ◆ Aplicaciones Serverless: AWS Lambda, Azure Functions, Google Cloud Functions

    ◆ Formularios: Formspree, Typeform, Netlify Forms ◆ Bases de datos: FaunaDB, Firebase, Supabase ◆ Autenticación: Auth0, Firebase Authentication Servicios API
  42. ◆ Motor de búsqueda: Algolia, Azure Search ◆ e-Commerce: Snipcart,

    Shopify ◆ Comentarios: Commento, Mouthful ◆ Image y Video: Cloudinary Servicios API
  43. ◆ Mejor Performance ◆ Servidores baratos ◆ Mejor Cache Jamstack

    ◆ Más Seguridad ◆ Fácil de escalar ◆ Mejor SEO PROS ◆ Mejor experiencia de desarrollo
  44. Jamstack PROBLEMAS ◆ Diferentes costos para evaluar ◆ Dependencias Externas

    ◆ Tiempo de compilación "atómica" ◆ Dificultad para editores de contenido
  45. None
  46. Gracias! Web fgiuliani.com Twitter @facundozurdo GitHub @fgiuliani