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.

Facundo Giuliani

May 21, 2021
Tweet

More Decks by Facundo Giuliani

Other Decks in Programming

Transcript

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

    View Slide

  2. View Slide

  3. Ingeniero en Sistemas
    Full Stack Developer
    Auth0 Ambassador
    Cloudinary Media Developer Expert
    GitKraken Ambassador
    Web fgiuliani.com
    Twitter @facundozurdo
    GitHub @fgiuliani
    Facundo Giuliani

    View Slide

  4. View Slide

  5. Tim Berners-Lee

    View Slide

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

    View Slide

  7. View Slide

  8. View Slide

  9. http://spacejam.com/

    View Slide

  10. Sitios Web Estáticos
    Sitios que son entregados al navegador tal como están
    almacenados en el servidor

    View Slide

  11. Sitios Web Dinámicos
    Sitios web donde parte de su contenido es generado
    dinámicamente, cuando sea necesario

    View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. Server Side Rendering
    El contenido HTML es generador por el servidor web

    View Slide

  16. View Slide

  17. View Slide

  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

    View Slide

  19. Client Side Rendering
    El contenido HTML es renderizado directamente en el
    navegador usando JavaScript

    View Slide

  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.

    View Slide

  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.

    View Slide

  22. Un paso adelante atrás

    View Slide

  23. View Slide

  24. View Slide

  25. Sitios Web Estáticos
    ◆ Rápidos
    ◆ Bajos costos
    ◆ Fáciles de mantener
    ◆ Seguros
    ◆ Fáciles de escalar
    ◆ Estables

    View Slide

  26. JAMSTACK

    View Slide

  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

    View Slide

  28. View Slide

  29. Generar archivos estáticos cacheables
    en tiempo de compilación, siempre que
    sea posible

    View Slide

  30. Desplegar esos archivos en CDNs

    View Slide

  31. Usar JavaScript del lado del cliente para
    llamar APIs externas y aplicaciones
    serverless, para las interacciones y
    carga de datos

    View Slide

  32. View Slide

  33. Static Site Generator
    Software que produce y despliega sitios estáticos usando
    distintas fuentes de datos y templates

    View Slide

  34. View Slide

  35. View Slide

  36. Content Management System
    Aplicación o conjunto de programas que se usan para
    crear y gestionar contenido digital

    View Slide

  37. View Slide

  38. Headless CMS
    Un CMS donde el repositorio de contenido está separado
    de la capa de presentación

    View Slide

  39. View Slide

  40. Build, Deployment & Hosting
    Servicios para compilar, integrar, desplegar y alojar
    aplicaciones web

    View Slide

  41. View Slide

  42. View Slide

  43. View Slide

  44. View Slide

  45. View Slide

  46. View Slide

  47. View Slide

  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

    View Slide

  49. Servicios API
    ◆ Motor de búsqueda: Algolia, Azure Search
    ◆ e-Commerce: Snipcart, Shopify
    ◆ Comentarios: Commento, Mouthful
    ◆ Image y Video: Cloudinary

    View Slide

  50. Jamstack
    PROS
    ◆ Mejor Performance
    ◆ Servidores baratos
    ◆ Mejor Cache
    ◆ Más Seguridad
    ◆ Fácil de escalar
    ◆ Mejor SEO
    ◆ Mejor experiencia de desarrollo

    View Slide

  51. Jamstack
    PROBLEMAS
    ◆ Diferentes costos para evaluar
    ◆ Dependencias Externas
    ◆ Tiempo de compilación "atómica"
    ◆ Dificultad para editores de contenido

    View Slide

  52. View Slide

  53. Web fgiuliani.com
    Twitter @facundozurdo
    GitHub @fgiuliani
    Jamstack, sitios estáticos y Azure

    View Slide