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.

Transcript

1. soy parte de la comunidad it! speaker_! facundo_giuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
2. 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
3. AGENDA! + . . . . . . . . . . . . SITIOS WEB ESTÁTICOS SITIOS WEB DINÁMICOS SERVER SIDE RENDERING CLIENT SIDE RENDERING JAMSTACK Características, componentes, servicios y herramientas
4. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
5. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS http://info.cern.ch/hypertext/WWW/TheProject.html
6. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
7. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
8. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS http://spacejam.com
9. @facundozurdo @facundozurdo facundogiuliani SITIOS WEB ESTÁTICOS Sitios que son entregados al navegador tal como están almacenados en el servidor
10. @facundozurdo @facundozurdo facundogiuliani SITIOS WEB DINÁMICOS Sitios web donde parte de su contenido es generado dinámicamente, cuando sea necesario
11. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
12. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
13. @facundozurdo @facundozurdo facundogiuliani SERVER SIDE RENDERING El contenido HTML es generador por el servidor web
14. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
15. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
16. @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
17. @facundozurdo @facundozurdo facundogiuliani El contenido HTML es renderizado directamente en el navegador usando JavaScript CLIENT SIDE RENDERING
18. @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
19. @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
20. @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
21. @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
22. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS Un paso adelante atrás
23. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
24. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
25. @facundozurdo @facundozurdo facundogiuliani . . . . . . . . . . . . RÁPIDOS SITIOS WEB ESTÁTICOS BAJOS COSTOS FÁCILES DE MANTENER SEGUROS FÁCILES DE ESCALAR ESTABLES
26. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS JAMSTACK
27. @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
28. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
29. @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
30. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS Desplegar esos archivos en CDNs
31. @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
32. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
33. @facundozurdo @facundozurdo facundogiuliani STATIC SITE GENERATOR Software que produce y despliega sitios estáticos usando distintas fuentes de datos y templates
34. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
35. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
36. @facundozurdo @facundozurdo facundogiuliani CONTENT MANAGEMENT SYSTEM Aplicación o conjunto de programas que se usan para crear y gestionar contenido digital
37. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
38. @facundozurdo @facundozurdo facundogiuliani HEADLESS CMS Un CMS donde el repositorio de contenido está separado de la capa de presentación
39. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
40. @facundozurdo @facundozurdo facundogiuliani BUILD, DEPLOYMENT & HOSTING Servicios para compilar, integrar, desplegar y alojar aplicaciones web
41. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
42. @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
43. @facundozurdo @facundozurdo facundogiuliani . . . . . . . . . . . . MOTORES DE BÚSQUEDA: Algolia, Azure Search SERVICIOS API E-COMMERCE: Snipcart, Shopify COMENTARIOS: Commento, Mouthful IMAGEN Y VIDEO: Cloudinary
44. @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
45. @facundozurdo @facundozurdo facundogiuliani . . . . . . . . . . . . DIFERENTES COSTOS PARA EVALUAR JAMSTACK - PROBLEMAS DEPENDENCIAS EXTERNAS TIEMPO DE COMPILACIÓN "ATÓMICA" DIFICULTAD PARA EDITORES DE CONTENIDO
46. @facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS
47. GRACIAS! hasta la próxima!! @facundozurdo @facundozurdo facundogiuliani