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

Jamstack: Volviendo a las raíces

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.

Facundo Giuliani

November 19, 2020
Tweet

More Decks by Facundo Giuliani

Other Decks in Programming

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