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

NetCoreConf - Jamstack, static sites y Azure

NetCoreConf - Jamstack, static sites y Azure

Do you remember Microsoft FrontPage? Static web pages are back with the Jamstack! With some of the tools and concepts developed in the last years, we can get advantage of features that static web pages offer and get web apps with better performance, more security, easier scaling, and cheaper costs.

Facundo Giuliani

February 27, 2021
Tweet

More Decks by Facundo Giuliani

Other Decks in Technology

Transcript

  1. 2021
    Netcoreconf
    27/02/202
    1
    Jamstack, static sites y Azure
    Facundo Giuliani
    Full Stack Developer
    @facundozurdo

    View Slide

  2. #netcoreconf
    SPONSORS
    2021

    View Slide

  3. #netcoreconf
    2021
    Facundo Giuliani
    Ingeniero en Sistemas
    Senior Developer and Team Leader @ MultiTracks.com
    Auth0 Ambassador
    GitKraken Ambassador
    Cloudinary Media Developer Expert
    Web fgiuliani.com
    Twitter @facundozurdo
    GitHub @fgiuliani

    View Slide

  4. #netcoreconf
    2021

    View Slide

  5. #netcoreconf
    2021
    Tim Berners-Lee

    View Slide

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

    View Slide

  7. #netcoreconf
    2021

    View Slide

  8. #netcoreconf
    2021

    View Slide

  9. #netcoreconf
    2021
    http://spacejam.com/

    View Slide

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

    View Slide

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

    View Slide

  12. #netcoreconf
    2021

    View Slide

  13. #netcoreconf
    2021

    View Slide

  14. #netcoreconf
    2021

    View Slide

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

    View Slide

  16. #netcoreconf
    2021

    View Slide

  17. #netcoreconf
    2021

    View Slide

  18. #netcoreconf
    2021
    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. #netcoreconf
    2021
    Client Side Rendering
    El contenido HTML es renderizado
    directamente en el navegador usando
    JavaScript

    View Slide

  20. #netcoreconf
    2021
    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. #netcoreconf
    2021
    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. #netcoreconf
    2021
    Un paso adelante atrás

    View Slide

  23. #netcoreconf
    2021

    View Slide

  24. #netcoreconf
    2021

    View Slide

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

    View Slide

  26. #netcoreconf
    2021
    Jamstack

    View Slide

  27. #netcoreconf
    2021
    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. #netcoreconf
    2021

    View Slide

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

    View Slide

  30. #netcoreconf
    2021
    Desplegar esos archivos en CDNs

    View Slide

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

    View Slide

  32. #netcoreconf
    2021

    View Slide

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

    View Slide

  34. #netcoreconf
    2021

    View Slide

  35. #netcoreconf
    2021

    View Slide

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

    View Slide

  37. #netcoreconf
    2021

    View Slide

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

    View Slide

  39. #netcoreconf
    2021

    View Slide

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

    View Slide

  41. #netcoreconf
    2021

    View Slide

  42. #netcoreconf
    2021

    View Slide

  43. #netcoreconf
    2021

    View Slide

  44. #netcoreconf
    2021

    View Slide

  45. #netcoreconf
    2021

    View Slide

  46. #netcoreconf
    2021

    View Slide

  47. #netcoreconf
    2021

    View Slide

  48. #netcoreconf
    2021
    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. #netcoreconf
    2021
    ◆ Motor de búsqueda: Algolia, Azure Search
    ◆ e-Commerce: Snipcart, Shopify
    ◆ Comentarios: Commento, Mouthful
    ◆ Image y Video: Cloudinary
    Servicios API

    View Slide

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

    View Slide

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

    View Slide

  52. #netcoreconf
    2021

    View Slide

  53. #netcoreconf
    SPONSORS
    2021

    View Slide

  54. Thank´s
    More information:
    [email protected]
    @Netcoreconf
    Visit on:
    netcoreconf.com

    View Slide