Construyendo aplicaciones full-stack en el Edge

Hola a todos. Wow, muchas gracias a todos. Así que sí, tengo cinco minutos. Así que vamos a empezar. Voy a hablar sobre la construcción de aplicaciones Full Stack en el borde en cinco minutos, ¿verdad? Ok, genial.

Lo primero, mi nombre es Obina. Soy cineasta de fin de semana. Así que si me ven con una cámara por aquí, solo pidan permiso, por supuesto. Últimamente estoy haciendo muchas cosas, y pueden encontrarme en Twitter como Obina Speaks. Esta es una foto mía antes de que mi cabello explotara.

Así que sí, quieres construir una aplicación, pero ¿cómo? ¿Verdad? Antes de empezar a hablar de todas las cosas increíbles que están sucediendo ahora mismo en la industria, retrocedamos y veamos cómo sería una aplicación básica o qué implicaría. Tendrías algunos clientes, algún servidor web que interactúa entre sí. Pasarías JSON de un lado a otro, o se complicaría más al agregar servicios. Oh, ahí va mi teléfono. Sí. Me gusta que todos se rían, porque sí, eso es bueno.

Así que sí, servicios. Tenemos servicios, y todos ellos se conectan entre sí. Y de alguna manera, cuanto más avanzas, más cosas tienes que aprender, y más cosas tienes que agregar. Y lo básico de todo esto es que tienes la vista del cliente, el front end, las APIs, una capa de acceso adata datos, una database, y manejo de errores y cosas así. Pero luego se vuelve un poco confuso. Porque si eres como yo, y solo escribes código de front end, y ahora hay un montón de cosas que necesito aprender, porque todos dicen que es genial, y no van a tener que aprender algo más, y hay un nuevo curso y hay una nueva pestaña, y hay una nueva pestaña, dices, oh, wow. ¿Cómo voy a construir esa startup? Pero lo que sucede actualmente en esta industria, es que la línea entre el front end y el back end se está volviendo borrosa. Tenía este tweet de alguien que perdí. Pero en realidad, estos son los tweets de alguien a las 3AM. Y me hizo preguntarme, ¿qué estaba haciendo despierto a las 3AM? ¿Por qué estaba pensando en esto? Tal vez está construyendo una startup. No lo sé. Pero así es como se ve la línea ahora. Los ingenieros de front end están construyendo aplicaciones Full Stack, y les mostraré una de mis aplicaciones más secretas. Y todo esto sin tener que aprender cómo escalar una database o aprender cosas nuevas que probablemente solo usarán en proyectos ocasionales.

Y me gusta que esta línea ahora sea una especie de cuerda de saltar. Porque estamos entrando en una nueva era de desarrollo web. Y hemos pasado de tener roles claramente definidos a tener personas que construyen tanto aplicaciones de front end como de back end utilizando APIs y servicios, lo que me lleva al punto de la JAMstack.

¿Alguien ha oído hablar de la JAMstack? Una muestra de manos. Sí. Mi gente está aquí. Eso es bueno. Si no has oído hablar de ello, se trata de usar JavaScript y APIs y confiar en los servicios para escalar. Así que escribe tu código. Escribe lo que puedas. Despliégalo. Deja que alguien más que tenga un servidor más grande y más empleados se preocupe por la escalabilidad y todo eso.

Y desde que comenzamos a usar este nuevo paradigma, nos estamos adentrando en algo más realmente emocionante, el Edge. Dun-nuh-nuh-nuh. Sí, necesitaba poner sonido para eso. Pero sí, tenemos el Edge, ¿verdad? Que es esta cosa realmente genial que todos siguen preguntando, bueno, he oído hablar de esto, pero ¿qué es el Edge? Así que Neil tuvo que hablar de ello. También intentaré explicarlo desde el concepto de la informática en el Edge, que exactamente significa que la estructura de datos , dije estructura, almacenamiento, ahora se está llevando al lugar donde también se genera para que tengas algo genial que se vea así.

Así que si quieres hablar del Edge o tratar de entenderlo, piensa en estos pequeños puntos como centros de datos donde puedo desplegar una función sin servidor o una función en el Edge ahora. Y luego tendrías, cuando despliego esto, no va a ir a un US East 1 o alguna región y obviamente tener a alguien en Singapur o Lagos accediendo a datos desde un lugar en los Estados Unidos. Ahora, estará en una red global. Este es solo un ejemplo. Diferentes empresas tienen todos estos servicios, como Fastly, Fly.io, Deno. También está haciendo lo mismo. Esto es solo datos de Cloudflare. Quiero decir, la representación de lo que tienen como centros de datos.

Y con estas mejoras vienen los hechos simples. Todo lo que hacemos como ingenieros, de alguna manera u otra, se relaciona con ofrecer experiencias de alta calidad a los clientes de todo el mundo con baja latencia. Olvidé agregar esto. Mi sitio web es más rápido que el tuyo, así que sí. Y lo que me encanta de esta industria es que nunca estamos haciendo realmente algo nuevo, en sí mismo.

Simplemente estamos reemplazando algunas conexiones antiguas por otras más rápidas, llantas que giran, y eso es bueno. Entonces, algunas de las cosas en las que hemos mejorado es pasar de serverless a sin origen, por eso expliqué eso, desplegar funciones en el edge, mejorar el almacenamiento en caché del edge, y todas esas cosas, y obtener ubicaciones de database, ser más conscientes de dónde estás almacenando cosas, dónde se está utilizando, cómo lo estás entregando a los usuarios, y todas esas cosas.

Tengo una demostración muy rápida, y voy a mostrarte algo. Si quieres ver cómo se ve la aplicación, escanea esto. Este es mi proyecto muy, muy, muy secreto que te estoy mostrando. Porque quiero decir, todos ustedes han sido increíbles. Así que si los dioses de la demostración me lo permiten, voy a mostrarte algo muy simple. Así que tengo esta aplicación que realmente se ve así, si la estás viendo desde tu teléfono o computadora portátil. Así es como se ve. Es solo un chat simple. Agrega un comentario. Deja un comentario. Dale me gusta a un amigo. Todas esas cosas. Algunos de mis amigos ya lo probaron. Y esta aplicación está impulsada con tecnología Edge.

Así que tengo algunas funciones sin servidor, si alguna vez has escrito funciones sin servidor, ¿alguien ha desplegado funciones sin servidor? Por favor, levanten la mano. Sí. OK. Gracias. Muchas gracias. Sí, tienes funciones sin servidor, básicamente como JavaScript desplegado en el servidor de otra persona. Pero en este caso, esto se despliega en capas de datos y centros de datos en todo el mundo. Así que si estás en Londres ahora y tal vez desplegaste en la red de Cloudflare, por ejemplo, hay esta cosa realmente genial en workers.cloudflare.com donde puedes ver los segundos de ping que tomaría para que tus funciones se activen. Así que esta función, la última vez que la revisé, estaba a 9 milisegundos de distancia de donde estamos. Así que eso es bastante rápido. Y si envío la misma aplicación a alguien en Lagos, por ejemplo, no tendrían que obtenerla de un centro de datos aquí en Londres. Así que eso es por qué son geniales. Y luego tengo algo muy simple que estoy haciendo aquí, que es donde almaceno comentarios en una tienda de clave-valor. Y sabes lo que no te dicen es que estas luces están muy calientes.

Así que estoy sudando. Pero sí. Entonces, puse, oh, gracias. Oh, eso fue muy amable. Así que sí. Pones, como, la información, como los comentarios y cosas así. Almaceno eso en una kvstore.

Y la forma en que estoy utilizando Cloudflare como punto de referencia, esto no significa que solo las personas lo hagan. Sin embargo, tienes esta tienda de clave-valor almacenada en diferentes centros de datos. Así que estoy almacenando en caché donde se crea el data para que pueda ser recuperado más cerca de eso. Pero aún se replica a sí mismo.

Y luego también tengo estas funciones que están desplegadas en la red edge también. Y si escaneaste el código QR, deberías poder ver que el código está en GitHub. Es de código abierto. Siéntete libre de dejarme un comentario. Mi TypeScript no es muy bueno. No me juzgues. Pero también tengo esta cosa aquí llamada un objeto duradero, que es literalmente, si escuchas la charla de Senio, las partes de colaboración en tiempo real de lo que hizo, verías algún uso de este fragmento de código aquí. Y sí, eso es un poco de la demostración que quería mostrar. Pero espera, la diapositiva final es la más importante. Muchas gracias por escuchar. Y que la fuerza te acompañe.