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

Azure Days ConoSur - Jamstack, sitios estáticos y Azure

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.

Facundo Giuliani

May 21, 2021
Tweet

More Decks by Facundo Giuliani

Other Decks in Programming

Transcript

  1. Ingeniero en Sistemas Full Stack Developer Auth0 Ambassador Cloudinary Media

    Developer Expert GitKraken Ambassador Web fgiuliani.com Twitter @facundozurdo GitHub @fgiuliani Facundo Giuliani
  2. Sitios Web Dinámicos Sitios web donde parte de su contenido

    es generado dinámicamente, cuando sea necesario
  3. 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
  4. 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.
  5. 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.
  6. Sitios Web Estáticos ◆ Rápidos ◆ Bajos costos ◆ Fáciles

    de mantener ◆ Seguros ◆ Fáciles de escalar ◆ Estables
  7. 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
  8. Usar JavaScript del lado del cliente para llamar APIs externas

    y aplicaciones serverless, para las interacciones y carga de datos
  9. Static Site Generator Software que produce y despliega sitios estáticos

    usando distintas fuentes de datos y templates
  10. Content Management System Aplicación o conjunto de programas que se

    usan para crear y gestionar contenido digital
  11. 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
  12. Servicios API ◆ Motor de búsqueda: Algolia, Azure Search ◆

    e-Commerce: Snipcart, Shopify ◆ Comentarios: Commento, Mouthful ◆ Image y Video: Cloudinary
  13. Jamstack PROS ◆ Mejor Performance ◆ Servidores baratos ◆ Mejor

    Cache ◆ Más Seguridad ◆ Fácil de escalar ◆ Mejor SEO ◆ Mejor experiencia de desarrollo
  14. Jamstack PROBLEMAS ◆ Diferentes costos para evaluar ◆ Dependencias Externas

    ◆ Tiempo de compilación "atómica" ◆ Dificultad para editores de contenido