Video Summary and Transcription
Alex presenta tRPC, un conjunto de herramientas para crear fácilmente APIs seguras de extremo a extremo, con autocompletado de puntos finales de API e información inferida desde el backend al frontend. tRPC funciona de la misma manera en React Native y se puede adoptar de forma incremental. El ejemplo muestra la comunicación del backend con una base de datos utilizando consultas y validadores, con tipos inferidos al frontend y la recuperación de datos realizada utilizando Prisma ORM.
1. Introducción a tRPC y Desarrollo de API
Hola, soy Alex. Estoy aquí para hablar sobre full stack, React y tRPC. He estado creando sitios web durante mucho tiempo y trabajando con React desde 2016 más o menos. Estoy aquí para presentar tRPC, un conjunto de herramientas para crear API de tipo seguro de extremo a extremo de manera muy fácil. Cuando escribes el back-end de tRPC, tienes un enrutador donde anidas todas tus consultas. Y cuando usamos esto en nuestro front-end, obtenemos la autocompletación de todos nuestros puntos finales de API y los datos inferidos de la función en el back-end al front-end.
Hola, soy Alex. Estoy aquí para hablar sobre full stack, React, y tRPC. He estado creando sitios web durante mucho tiempo y trabajando con React desde 2016 más o menos. También he trabajado un poco como desarrollador de iOS y demás. Y hoy estoy aquí para hablar sobre las API. Sé que esto es una Conferencia de Contenido, pero por favor, aguanten conmigo. Te darás cuenta de que no es tan difícil. Entonces, para desglosarlo, comencemos con la pregunta, ¿qué es una API? Entonces, en el contexto de HTTP, muy simplificado, una API es solo una forma de llamar a funciones en otra computadora. Y la forma en que hacemos y usamos las API hoy en día podría parecer algo así. Comenzamos con un contrato de API o esquema, porque queremos tener alguna garantía de que nuestra API está realmente devolviendo lo que queremos que devuelva. Y luego podríamos hacer algo de generación de código para ayudar a nuestra lógica de back-end en lo que necesita devolver. Luego, una vez que hemos hecho nuestro back-end, escribimos una consulta de API en nuestro front-end. Que luego podría tener algo de generación de código adjunto para generar un buen gancho de uso de consulta que podemos usar al final. Entonces, creo que hay bastantes pasos para hacer una API hoy en día. Y la razón de esto, como lo veo, es que hemos desacoplado completamente nuestro back-end y front-end, o más bien que los hemos hecho disjuntos. Pero, ¿y si nuestro back-end y front-end no tuvieran que estar desacoplados? Hay herramientas hoy en día donde podemos escribir el mismo tipo de lenguaje en el front-end y back-end y móvil. Y una de esas herramientas es TypeScript. Entonces, TypeScript es un buen lenguaje que puedes usar en todas partes, y he estado trabajando duro durante los últimos diez meses para crear un conjunto de herramientas para simplificar el tipo de desarrollo de API con tus aplicaciones React. Y, sí, estoy aquí para presentar tRPC. tRPC es un conjunto de herramientas para crear API de tipo seguro de extremo a extremo de manera muy fácil. Voy a profundizar para mostrarles cómo se ve. Entonces, cuando escribes el back-end de tRPC, comienzas algo así. Tienes un enrutador donde anidas todas tus consultas. Aquí hay una consulta llamada hello. Llamamos a esto un procedimiento en tRPC. También puedes verlo como un punto final. Y todo lo que hace esta función es devolver algunos datos. Y cuando luego usamos esto en nuestro front-end, obtenemos de inmediato la autocompletación de todos nuestros puntos finales de API y obtenemos los datos inferidos de tu función en el back-end a tu front-end. Y esto no se basa en solo un poco de abuso en el compilador de TypeScript. Y es un envoltorio delgado alrededor de ReactQuery.
2. tRPC en React Native y Ejemplo Complejo
tRPC funciona de la misma manera en React Native. Puedes adoptarlo de forma incremental o no hacerlo en absoluto. En este ejemplo, el backend se comunica con una base de datos utilizando una consulta de post por ID y un validador para los datos de entrada. Los tipos se infieren al frontend, y se utiliza el ORM Prisma para recuperar datos de la base de datos.
Y lo que ves aquí funciona exactamente de la misma manera en React Native. Y si quieres, puedes adoptar tRPC a tu proyecto de forma incremental, o no puedes usarlo en absoluto si no quieres hacerlo. Así que veamos un ejemplo un poco más complejo. Aquí tenemos un backend que realmente está hablando con una base de datos. Así que puedes ver aquí que tenemos una consulta de post por ID, y eso toma algunos datos de entrada data a través de un validador, y puedes ver que los tipos de ese validador se infieren directamente al front end. Y luego al final, puedes ver que estamos hablando con nuestra base de datos a través de un ORM llamado Prisma, y eso devuelve algunos datos que también se infieren directamente en el frontend. Así que empecé a trabajar en este proyecto de código abierto para rascarme mi propia picazón alrededor de enero, y desde entonces, ha ganado bastante tracción y muchas empresas ya lo están utilizando en producción. Está realmente bien probado y me encantaría que lo comprobaras. Se está utilizando ahora mismo para todo, desde reservas de vacunación COVID hasta compañías de seguros y aplicaciones de entrega de comestibles. Obviamente, esto son charlas relámpago. Quiero poder cubrir todas las características de TRPCs para mencionar algunas de las cosas que puedes hacer, como tener ayudantes de mutación. Esto es similar a la forma en que tenemos el uso de consulta, cosas de uso de consulta que acabo de mostrarte. Podemos hacer SSR sin dolor y podemos hacer muchas otras cosas también. Me encantaría escuchar de ti. Si amas u odias TRPC, puedes contactarme en Twitter en Alex.js o por correo electrónico en Alex en TRPC.io. Fue sí. ¡Gracias!
Comments