Tweet
Tweet

Slide 1

Slide 1 text

soy parte de la comunidad it! speaker_! facundo_giuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

AGENDA! + . . . . . . . . . . . . SITIOS WEB ESTÁTICOS SITIOS WEB DINÁMICOS SERVER SIDE RENDERING CLIENT SIDE RENDERING JAMSTACK Características, componentes, servicios y herramientas

Slide 4

Slide 4 text

@facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS

Slide 5

Slide 5 text

@facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS http://info.cern.ch/hypertext/WWW/TheProject.html

Slide 6

Slide 6 text

@facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS

Slide 7

Slide 7 text

@facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS

Slide 8

Slide 8 text

@facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS http://spacejam.com

Slide 9

Slide 9 text

@facundozurdo @facundozurdo facundogiuliani SITIOS WEB ESTÁTICOS Sitios que son entregados al navegador tal como están almacenados en el servidor

Slide 10

Slide 10 text

@facundozurdo @facundozurdo facundogiuliani SITIOS WEB DINÁMICOS Sitios web donde parte de su contenido es generado dinámicamente, cuando sea necesario

Slide 11

Slide 11 text

@facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS

Slide 12

Slide 12 text

@facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS

Slide 13

Slide 13 text

@facundozurdo @facundozurdo facundogiuliani SERVER SIDE RENDERING El contenido HTML es generador por el servidor web

Slide 14

Slide 14 text

@facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS

Slide 15

Slide 15 text

@facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS

Slide 16

Slide 16 text

@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

Slide 17

Slide 17 text

@facundozurdo @facundozurdo facundogiuliani El contenido HTML es renderizado directamente en el navegador usando JavaScript CLIENT SIDE RENDERING

Slide 18

Slide 18 text

@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

Slide 19

Slide 19 text

@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

Slide 20

Slide 20 text

@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

Slide 21

Slide 21 text

@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

Slide 22

Slide 22 text

@facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS Un paso adelante atrás

Slide 23

Slide 23 text

@facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS

Slide 24

Slide 24 text

@facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS

Slide 25

Slide 25 text

@facundozurdo @facundozurdo facundogiuliani . . . . . . . . . . . . RÁPIDOS SITIOS WEB ESTÁTICOS BAJOS COSTOS FÁCILES DE MANTENER SEGUROS FÁCILES DE ESCALAR ESTABLES

Slide 26

Slide 26 text

@facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS JAMSTACK

Slide 27

Slide 27 text

@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

Slide 28

Slide 28 text

@facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS

Slide 29

Slide 29 text

@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

Slide 30

Slide 30 text

@facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS Desplegar esos archivos en CDNs

Slide 31

Slide 31 text

@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

Slide 32

Slide 32 text

@facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS

Slide 33

Slide 33 text

@facundozurdo @facundozurdo facundogiuliani STATIC SITE GENERATOR Software que produce y despliega sitios estáticos usando distintas fuentes de datos y templates

Slide 34

Slide 34 text

@facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS

Slide 35

Slide 35 text

@facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS

Slide 36

Slide 36 text

@facundozurdo @facundozurdo facundogiuliani CONTENT MANAGEMENT SYSTEM Aplicación o conjunto de programas que se usan para crear y gestionar contenido digital

Slide 37

Slide 37 text

@facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS

Slide 38

Slide 38 text

@facundozurdo @facundozurdo facundogiuliani HEADLESS CMS Un CMS donde el repositorio de contenido está separado de la capa de presentación

Slide 39

Slide 39 text

@facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS

Slide 40

Slide 40 text

@facundozurdo @facundozurdo facundogiuliani BUILD, DEPLOYMENT & HOSTING Servicios para compilar, integrar, desplegar y alojar aplicaciones web

Slide 41

Slide 41 text

@facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS

Slide 42

Slide 42 text

@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

Slide 43

Slide 43 text

@facundozurdo @facundozurdo facundogiuliani . . . . . . . . . . . . MOTORES DE BÚSQUEDA: Algolia, Azure Search SERVICIOS API E-COMMERCE: Snipcart, Shopify COMENTARIOS: Commento, Mouthful IMAGEN Y VIDEO: Cloudinary

Slide 44

Slide 44 text

@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

Slide 45

Slide 45 text

@facundozurdo @facundozurdo facundogiuliani . . . . . . . . . . . . DIFERENTES COSTOS PARA EVALUAR JAMSTACK - PROBLEMAS DEPENDENCIAS EXTERNAS TIEMPO DE COMPILACIÓN "ATÓMICA" DIFICULTAD PARA EDITORES DE CONTENIDO

Slide 46

Slide 46 text

@facundozurdo @facundozurdo facundogiuliani JAMSTACK: EL RETORNO DE LOS SITIOS ESTÁTICOS

Slide 47

Slide 47 text

GRACIAS! hasta la próxima!! @facundozurdo @facundozurdo facundogiuliani