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

Azure Days ConoSur - Jamstack, sitios estáticos y Azure

Azure Days ConoSur - Jamstack, sitios estáticos y Azure

¿Recuerdas aMicrosoft FrontPage? ¡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 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 qué ventajas nos ofrece. También vamos a recorrer servicios y herramientas de Azure que podemos usar para facilitar la creación de aplicaciones web bajo este paradigma.

Da36a51e8d743e587bf1c9317e65a68e?s=128

Facundo Giuliani

May 21, 2021
Tweet

Transcript

  1. Jamstack, sitios estáticos y Azure Facundo Giuliani Full Stack Developer

    | @facundozurdo
  2. None
  3. Ingeniero en Sistemas Full Stack Developer Auth0 Ambassador Cloudinary Media

    Developer Expert GitKraken Ambassador Web fgiuliani.com Twitter @facundozurdo GitHub @fgiuliani Facundo Giuliani
  4. None
  5. Tim Berners-Lee

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

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

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

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

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

    servidor web
  16. None
  17. None
  18. 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
  19. Client Side Rendering El contenido HTML es renderizado directamente en

    el navegador usando JavaScript
  20. 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.
  21. 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.
  22. Un paso adelante atrás

  23. None
  24. None
  25. Sitios Web Estáticos ◆ Rápidos ◆ Bajos costos ◆ Fáciles

    de mantener ◆ Seguros ◆ Fáciles de escalar ◆ Estables
  26. JAMSTACK

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

    sea posible
  30. Desplegar esos archivos en CDNs

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

    y aplicaciones serverless, para las interacciones y carga de datos
  32. None
  33. Static Site Generator Software que produce y despliega sitios estáticos

    usando distintas fuentes de datos y templates
  34. None
  35. None
  36. Content Management System Aplicación o conjunto de programas que se

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

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

    alojar aplicaciones web
  41. None
  42. None
  43. None
  44. None
  45. None
  46. None
  47. None
  48. Servicios API ◆ Aplicaciones Serverless: AWS Lambda, Google Cloud Functions

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

    e-Commerce: Snipcart, Shopify ◆ Comentarios: Commento, Mouthful ◆ Image y Video: Cloudinary
  50. Jamstack PROS ◆ Mejor Performance ◆ Servidores baratos ◆ Mejor

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

    ◆ Tiempo de compilación "atómica" ◆ Dificultad para editores de contenido
  52. None
  53. Web fgiuliani.com Twitter @facundozurdo GitHub @fgiuliani Jamstack, sitios estáticos y

    Azure