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