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.

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:
    info@netcoreconf.com
    @Netcoreconf
    Visit on:
    netcoreconf.com
    

    View Slide