NetCoreConf - Jamstack, static sites y Azure

Slide 1

Slide 1 text

2021 Netcoreconf 27/02/202 1 Jamstack, static sites y Azure Facundo Giuliani Full Stack Developer @facundozurdo

Slide 2

Slide 2 text

#netcoreconf SPONSORS 2021

Slide 3

Slide 3 text

#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

Slide 4

Slide 4 text

#netcoreconf 2021

Slide 5

Slide 5 text

#netcoreconf 2021 Tim Berners-Lee

Slide 6

Slide 6 text

#netcoreconf 2021 http://info.cern.ch/hypertext/WWW/TheProject.html

Slide 7

Slide 7 text

#netcoreconf 2021

Slide 8

Slide 8 text

#netcoreconf 2021

Slide 9

Slide 9 text

#netcoreconf 2021 http://spacejam.com/

Slide 10

Slide 10 text

#netcoreconf 2021 Sitios Web Estáticos Sitios que son entregados al navegador tal como están almacenados en el servidor

Slide 11

Slide 11 text

#netcoreconf 2021 Sitios Web Dinámicos Sitios web donde parte de su contenido es generado dinámicamente, cuando sea necesario

Slide 12

Slide 12 text

#netcoreconf 2021

Slide 13

Slide 13 text

#netcoreconf 2021

Slide 14

Slide 14 text

#netcoreconf 2021

Slide 15

Slide 15 text

#netcoreconf 2021 Server Side Rendering El contenido HTML es generador por el servidor web

Slide 16

Slide 16 text

#netcoreconf 2021

Slide 17

Slide 17 text

#netcoreconf 2021

Slide 18

Slide 18 text

#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

Slide 19

Slide 19 text

#netcoreconf 2021 Client Side Rendering El contenido HTML es renderizado directamente en el navegador usando JavaScript

Slide 20

Slide 20 text

#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.

Slide 21

Slide 21 text

#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.

Slide 22

Slide 22 text

#netcoreconf 2021 Un paso adelante atrás

Slide 23

Slide 23 text

#netcoreconf 2021

Slide 24

Slide 24 text

#netcoreconf 2021

Slide 25

Slide 25 text

#netcoreconf 2021 Sitios Web Estáticos ◆ Rápidos ◆ Bajos costos ◆ Fáciles de mantener ◆ Seguros ◆ Fáciles de escalar ◆ Estables

Slide 26

Slide 26 text

#netcoreconf 2021 Jamstack

Slide 27

Slide 27 text

#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

Slide 28

Slide 28 text

#netcoreconf 2021

Slide 29

Slide 29 text

#netcoreconf 2021 Generar archivos estáticos cacheables en tiempo de compilación, siempre que sea posible

Slide 30

Slide 30 text

#netcoreconf 2021 Desplegar esos archivos en CDNs

Slide 31

Slide 31 text

#netcoreconf 2021 Usar JavaScript del lado del cliente para llamar APIs externas y aplicaciones serverless, para las interacciones y carga de datos

Slide 32

Slide 32 text

#netcoreconf 2021

Slide 33

Slide 33 text

#netcoreconf 2021 Static Site Generator Software que produce y despliega sitios estáticos usando distintas fuentes de datos y templates

Slide 34

Slide 34 text

#netcoreconf 2021

Slide 35

Slide 35 text

#netcoreconf 2021

Slide 36

Slide 36 text

#netcoreconf 2021 Content Management System Aplicación o conjunto de programas que se usan para crear y gestionar contenido digital

Slide 37

Slide 37 text

#netcoreconf 2021

Slide 38

Slide 38 text

#netcoreconf 2021 Headless CMS Un CMS donde el repositorio de contenido está separado de la capa de presentación

Slide 39

Slide 39 text

#netcoreconf 2021

Slide 40

Slide 40 text

#netcoreconf 2021 Build, Deployment & Hosting Servicios para compilar, integrar, desplegar y alojar aplicaciones web

Slide 41

Slide 41 text

#netcoreconf 2021

Slide 42

Slide 42 text

#netcoreconf 2021

Slide 43

Slide 43 text

#netcoreconf 2021

Slide 44

Slide 44 text

#netcoreconf 2021

Slide 45

Slide 45 text

#netcoreconf 2021

Slide 46

Slide 46 text

#netcoreconf 2021

Slide 47

Slide 47 text

#netcoreconf 2021

Slide 48

Slide 48 text

#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

Slide 49

Slide 49 text

#netcoreconf 2021 ◆ Motor de búsqueda: Algolia, Azure Search ◆ e-Commerce: Snipcart, Shopify ◆ Comentarios: Commento, Mouthful ◆ Image y Video: Cloudinary Servicios API

Slide 50

Slide 50 text

#netcoreconf 2021 Jamstack PROS ◆ Mejor Performance ◆ Servidores baratos ◆ Mejor Cache ◆ Más Seguridad ◆ Fácil de escalar ◆ Mejor SEO ◆ Mejor experiencia de desarrollo

Slide 51

Slide 51 text

#netcoreconf 2021 Jamstack PROBLEMAS ◆ Diferentes costos para evaluar ◆ Dependencias Externas ◆ Tiempo de compilación "atómica" ◆ Diﬁcultad para editores de contenido

Slide 52

Slide 52 text

#netcoreconf 2021

Slide 53

Slide 53 text

#netcoreconf SPONSORS 2021

Slide 54

Slide 54 text

Thank´s More information: [email protected] @Netcoreconf Visit on: netcoreconf.com