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

Jamstack: El retorno de los sitios estáticos

Jamstack: El retorno de los sitios estáticos

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 26, 2020
Tweet

More Decks by Facundo Giuliani

Other Decks in Programming

Transcript

  1. FOTO SPEAKER CUADRADA soy parte de la comunidad it! @facundozurdo

    @facundozurdo facundogiuliani Facundo Giuliani! SENIOR DEVELOPER AND TEAM LEADER / MultiTracks.com Auth0 Ambassador GitKraken Ambassador Cloudinary Media Developer Expert Web - fgiuliani.com Twitter - @facundozurdo GitHub - @fgiuliani
  2. AGENDA! + . . . . . . . .

    . . . . SITIOS WEB ESTÁTICOS SITIOS WEB DINÁMICOS SERVER SIDE RENDERING CLIENT SIDE RENDERING JAMSTACK Características, componentes, servicios y herramientas
  3. @facundozurdo @facundozurdo facundogiuliani SITIOS WEB DINÁMICOS Sitios web donde parte

    de su contenido es generado dinámicamente, cuando sea necesario
  4. @facundozurdo @facundozurdo facundogiuliani 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
  5. @facundozurdo @facundozurdo facundogiuliani . . . . . . .

    . . . . . MEJORES INTERACCIONES CLIENT SIDE RENDERING - PROS RENDERIZADO MÁS RÁPIDO DESPUÉS DE CARGA INICIAL MENOS USO DEL SERVIDOR WEB COMPONENTES REUTILIZABLES
  6. @facundozurdo @facundozurdo facundogiuliani . . . . . . .

    . . . . . CARGA INICIAL MÁS LENTA CLIENT SIDE RENDERING - CONS SEO NO PERFORMANTE SI NO SE IMPLEMENTA BIEN DEPENDENCIA DE LIBRERÍAS EXTERNAS
  7. @facundozurdo @facundozurdo facundogiuliani . . . . . . .

    . . . . . CARGA INICIAL MÁS RÁPIDA SERVER SIDE RENDERING - PROS MEJOR SEO / SOCIAL MEDIA OPTIMIZATION MÁS SEGURO (MENOS CÓDIGO DEL LADO DEL CLIENTE) MENOS USO DEL DISPOSITIVO CLIENTE
  8. @facundozurdo @facundozurdo facundogiuliani . . . . . . .

    . . . . . SERVIDORES WEB MÁS SOBRECARGADOS SERVER SIDE RENDERING - CONS RENDERIZADO GENERAL DE LA PÁGINA MÁS LENTO RECARGA COMPLETA DE PÁGINA EN CAMBIOS DE RUTA PÁGINA CARGA ANTES, PERO SIN INTERACCIÓN COMPLETA
  9. @facundozurdo @facundozurdo facundogiuliani . . . . . . .

    . . . . . RÁPIDOS SITIOS WEB ESTÁTICOS BAJOS COSTOS FÁCILES DE MANTENER SEGUROS FÁCILES DE ESCALAR ESTABLES
  10. @facundozurdo @facundozurdo facundogiuliani 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
  11. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS

    Generar archivos estáticos cacheables en tiempo de compilación, siempre que sea posible
  12. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS

    Usar JavaScript del lado del cliente para llamar APIs externas y aplicaciones serverless, para las interacciones y carga de datos
  13. @facundozurdo @facundozurdo facundogiuliani STATIC SITE GENERATOR Software que produce y

    despliega sitios estáticos usando distintas fuentes de datos y templates
  14. @facundozurdo @facundozurdo facundogiuliani CONTENT MANAGEMENT SYSTEM Aplicación o conjunto de

    programas que se usan para crear y gestionar contenido digital
  15. @facundozurdo @facundozurdo facundogiuliani HEADLESS CMS Un CMS donde el repositorio

    de contenido está separado de la capa de presentación
  16. @facundozurdo @facundozurdo facundogiuliani . . . . . . .

    . . . . . APLICACIONES SERVERLESS: AWS Lambda, Azure Functions, Google Cloud Functions SERVICIOS API FORMULARIOS: Formspree, Typeform, Netlify Forms BASES DE DATOS: FaunaDB, Firebase, Supabase AUTENTICACIÓN: Auth0, Firebase Authentication
  17. @facundozurdo @facundozurdo facundogiuliani . . . . . . .

    . . . . . MOTORES DE BÚSQUEDA: Algolia, Azure Search SERVICIOS API E-COMMERCE: Snipcart, Shopify COMENTARIOS: Commento, Mouthful IMAGEN Y VIDEO: Cloudinary
  18. @facundozurdo @facundozurdo facundogiuliani . . . . . . .

    . . . . . MEJOR PERFORMANCE JAMSTACK - PROS SERVIDORES MÁS BARATOS MEJOR CACHE MÁS SEGURIDAD FÁCIL DE ESCALAR MEJOR SEO MEJOR EXPERIENCIA DE DESARROLLO
  19. @facundozurdo @facundozurdo facundogiuliani . . . . . . .

    . . . . . DIFERENTES COSTOS PARA EVALUAR JAMSTACK - PROBLEMAS DEPENDENCIAS EXTERNAS TIEMPO DE COMPILACIÓN "ATÓMICA" DIFICULTAD PARA EDITORES DE CONTENIDO