Jamstack: Volviendo a las raíces

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 web 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 que ventajas nos ofrece en comparación a las aplicaciones "Server Side Rendered". También hablaremos sobre los distintos tipos de herramientas que tenemos a nuestro alcance para crear aplicaciones web basadas mayormente en el contenido pre-generado.

Transcript

1. Jamstack:
   Volviendo a las raíces
   

   View Slide

2. Facundo Giuliani
   Web fgiuliani.com
   Twitter @facundozurdo
   GitHub @fgiuliani
   Ingeniero en Sistemas
   Team Leader @ MultiTracks.com
   Auth0 Ambassador - GitKraken Ambassador -
   Cloudinary Media Developer Expert
   

   View Slide

3. View Slide

4. Tim Berners-Lee
   

   View Slide

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

   View Slide

6. View Slide

7. View Slide

8. http://spacejam.com
   

   View Slide

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

   View Slide

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

    View Slide

11. View Slide

12. View Slide

13. View Slide

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

    View Slide

15. View Slide

16. View Slide

17. Aplicación web que interactúa con el
    usuario reescribiendo la página web
    actual, con nueva información enviada
    desde el servidor
    Single Page Application
    

    View Slide

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

    View Slide

19. 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

20. 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

21. Un paso
    adelante atrás
    

    View Slide

22. View Slide

23. View Slide

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

    View Slide

25. Jamstack
    

    View Slide

26. 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

27. View Slide

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

    View Slide

29. Desplegar esos archivos en CDNs
    

    View Slide

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

    View Slide

31. View Slide

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

    View Slide

33. View Slide

34. View Slide

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

    View Slide

36. View Slide

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

    View Slide

38. View Slide

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

    View Slide

40. View Slide

41. ◆ Aplicaciones Serverless: AWS Lambda, Azure Functions,
    Google Cloud Functions
    ◆ Formularios: Formspree, Typeform, Netlify Forms
    ◆ Bases de datos: FaunaDB, Firebase, Supabase
    ◆ Autenticación: Auth0, Firebase Authentication
    Servicios API
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

45. View Slide

46. Gracias!
    Web fgiuliani.com Twitter @facundozurdo GitHub @fgiuliani
    

    View Slide