NetCoreConf - Jamstack, static sites y Azure

Do you remember Microsoft FrontPage? Static web pages are back with the Jamstack! With some of the tools and concepts developed in the last years, we can get advantage of features that static web pages offer and get web apps with better performance, more security, easier scaling, and cheaper costs.

Transcript

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