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
3. Ingeniero en Sistemas Full Stack Developer Auth0 Ambassador Cloudinary Media Developer Expert GitKraken Ambassador Web fgiuliani.com Twitter @facundozurdo GitHub @fgiuliani Facundo Giuliani
5. Tim Berners-Lee
6. http://info.cern.ch/hypertext/WWW/TheProject.html
9. http://spacejam.com/
10. Sitios Web Estáticos Sitios que son entregados al navegador tal como están almacenados en el servidor
11. Sitios Web Dinámicos Sitios web donde parte de su contenido es generado dinámicamente, cuando sea necesario
15. Server Side Rendering El contenido HTML es generador por el servidor web
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
19. Client Side Rendering El contenido HTML es renderizado directamente en el navegador usando JavaScript
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.
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.
22. Un paso adelante atrás
25. Sitios Web Estáticos ◆ Rápidos ◆ Bajos costos ◆ Fáciles de mantener ◆ Seguros ◆ Fáciles de escalar ◆ Estables
26. JAMSTACK
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
29. Generar archivos estáticos cacheables en tiempo de compilación, siempre que sea posible
30. Desplegar esos archivos en CDNs
31. Usar JavaScript del lado del cliente para llamar APIs externas y aplicaciones serverless, para las interacciones y carga de datos
33. Static Site Generator Software que produce y despliega sitios estáticos usando distintas fuentes de datos y templates
36. Content Management System Aplicación o conjunto de programas que se usan para crear y gestionar contenido digital
38. Headless CMS Un CMS donde el repositorio de contenido está separado de la capa de presentación
40. Build, Deployment & Hosting Servicios para compilar, integrar, desplegar y alojar aplicaciones web
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
49. Servicios API ◆ Motor de búsqueda: Algolia, Azure Search ◆ e-Commerce: Snipcart, Shopify ◆ Comentarios: Commento, Mouthful ◆ Image y Video: Cloudinary
50. Jamstack PROS ◆ Mejor Performance ◆ Servidores baratos ◆ Mejor Cache ◆ Más Seguridad ◆ Fácil de escalar ◆ Mejor SEO ◆ Mejor experiencia de desarrollo
51. Jamstack PROBLEMAS ◆ Diferentes costos para evaluar ◆ Dependencias Externas ◆ Tiempo de compilación "atómica" ◆ Dificultad para editores de contenido
53. Web fgiuliani.com Twitter @facundozurdo GitHub @fgiuliani Jamstack, sitios estáticos y Azure