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.

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