Generando tipos sin trepar un árbol

Rate this content
Bookmark

¿Cómo generas tipos dinámicamente? ¿Cómo escribes un script que crea código TypeScript? El enfoque que la mayoría de las personas recomendaría es utilizar manipulaciones del Árbol de Sintaxis Abstracta. Estaba trabajando con una fecha límite para implementar tipos para nuestro cliente OpenAPI, y habría perdido nuestra ventana de lanzamiento. Necesitaba algo diferente y más fácil de construir. Afortunadamente, un amigo me recomendó una biblioteca que no conocía: code-block-writer. Me enamoré de ella a primera vista.

Matteo Collina
Matteo Collina
30 min
21 Sep, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla explora los desafíos y beneficios de generar tipos para APIs. El orador discute la necesidad de una mejor experiencia para el cliente y la popularidad de generar clientes. También explica el uso de OpenAPI para generar clientes de API REST y el uso de Cold Block Writer para la generación de código. La charla cubre el proceso de definir tipos para parámetros y respuestas, generar el cliente y la solicitud, y utilizar el cliente generado. El orador también menciona la validación en producción y los desafíos iniciales con TypeScript.

Available in English

1. Introducción a la Generación de Tipos

Short description:

Hola a todos. Soy Matteo Collina, cofundador y CTO de Platformatic, y hoy voy a hablar de algo que me pone un poco nervioso, la generación de tipos. Entradas. ¿Por qué? Vamos a profundizar en ello. Así que, la primera pregunta para todos ustedes es, ¿cuántas cuerdas necesitan para subir a un árbol? Esta es una pregunta fundamental y vamos a intentar responderla en esta charla.

hablar de algo que me pone un poco nervioso, la generación de tipos. Entradas. ¿Por qué? Vamos a profundizar en ello. Así que, la primera pregunta para todos ustedes es, ¿cuántas cuerdas necesitan para subir a un árbol? Esta es una pregunta fundamental y vamos a intentar responderla en esta charla. Así que, vamos. Lo primero, un par de cosas sobre mí. Soy Matteo Collina, parte del Comité de Dirección Técnica de Node.js, también miembro de la Junta Directiva de la Fundación Open Source Open JS. He creado un montón de bibliotecas, ayudado a mantener nodos, probablemente usando algunas de mis software dado que se descargaron 17 mil millones de veces el año pasado, así que sí, tal vez. Así que, algunas de mis decisiones afectan a algunas personas, así que espero no romper a demasiados de ustedes durante esta charla o después. De todos modos, vamos y saltemos. He escrito muchos módulos, mantengo muchos módulos en NPM, muchas descargas, lo que sea que importe. Por cierto, si alguna vez usas uno de ellos, si quieres patrocinarme en GitHub, todo es apreciado. Tengo una pequeña confesión que hacer. ¿Qué? ¿Qué? Bueno, antes de 2022, casi nunca usé TypeScript. Y aquí estoy hablando en el Congreso de TypeScript. ¿Qué es eso? Es realmente fascinante. Evité y pasé por alto esta tecnología tanto tiempo como pude. ¿Qué pasó en 2022? Bueno, empecé una nueva empresa, y era una experiencia de desarrollo para empresas. Así que sí, tuve que adentrarme en TypeScript. De hecho, todo se basa en algo que había hecho anteriormente, que es Fastify, que es un proyecto dentro de la Fundación Open Source también. Y se trata de construir APIs. Soy un ingeniero de back-end de profesión y lo que quiero es ayudar a las personas y cómo ayudar a las personas con mi herramienta, ya sabes, para construir y usar APIs de manera mejor y hacerlo más rápido y más fácil de desarrollar, mantener, escalar, como quieras llamarlo. Así que sí, típicamente el flujo típico cuando uno de tus miembros del equipo o alguien más está comenzando a escribir tus APIs, tienes una API en un extremo y típicamente eres un ingeniero de back-end escribiendo algunas consultas SQL complejas o algunas consultas complejas de MongoDB, lo que quieras, luego generan, escriben algo de documentación a partir de esa API y luego tu cliente, tu ingeniero, codifica su cliente. Entonces, ¿cómo se relaciona esto con la generación de tipos? Sí, permítanme presentar el problema primero. Esto es más o menos lo que Plasformatic quiere simplificar y mejorar cómo creamos software de back-end. Típicamente lo que queremos hacer es mover, permitirte moverte muy rápidamente de A a B utilizando tantos rieles como sea posible, rieles de protección para todos ustedes para moverse muy rápido. Y luego, ya sabes, puedes llevar tu viejo SUV exactamente donde quieras ir. Así que, queremos ayudar a los desarrolladores a deshacerse de todo el trabajo pesado indiferenciado de construir tus aplicaciones JS. Como parte de eso, en algún momento, nos enfocamos en trabajar

2. The Need for a Better Client Experience

Short description:

Lo que descubrimos al hablar con mucha gente fue que tener un cliente para las APIs era fundamental para una buena experiencia de desarrollo. La generación de clientes se ha vuelto popular recientemente con bibliotecas como tRPC y TS Rest. Sin embargo, estas bibliotecas introducen un acoplamiento estrecho entre el cliente y el código del servidor, lo que dificulta la escalabilidad y la evolución. Necesitamos una mejor experiencia de cliente que permita flexibilidad y el uso de diferentes versiones de TypeScript.

mucho en las APIs y mejorar dos APIs que se habían escrito. Lo que descubrimos al hablar con mucha gente fue que, ya sabes, oh, pero tener un cliente para esas APIs era realmente fundamental para proporcionar una buena experiencia y agilizar el desarrollo. Entonces, lo que sucedió fue que, ya sabes, a la mayoría de las personas realmente les gusta mucho más este flujo. Así que, en lugar de tener que llamar al cliente y preparar documentation para la API, solo quiero presionar un botón y generar un cliente. De hecho, esto ha sido tan popular desde hace mucho tiempo, y de alguna manera lo perdimos un poco en el camino, porque, ya sabes, recuerdo generar clientes para mis APIs cuando hacía WSDL y SOAP hace mucho tiempo. Así que, ya sabes, probablemente no sea una gran comparación, pero lo es. De todos modos, esto ha sido extremadamente popular recientemente. De hecho, esto ha sido popularizado en gran medida por algunas bibliotecas nuevas. Una es tRPC, que es fantástica, proporciona una experiencia de developer experience fantástica. Te permite exponer tu... crea una llamada RPC desde el servidor al... desde el cliente al servidor de una manera completamente segura en cuanto a tipos. Es genial, ¿vale? Solo tiene una desventaja significativa, que es el acoplamiento de tipos introducido en el... el código de tu frontend con el código de tu backend, también utiliza un protocolo propietario para comunicarse. Así que sí, es muy estrecho. Es un acoplamiento muy estrecho entre el cliente y el servidor. Hay otra biblioteca llamada TS Rest, que también es genial, una biblioteca fantástica, pero tiene otro pequeño... todavía otro pequeño problema, que es que necesitas especificar el contrato entre tu cliente y tu servidor en su propia definición de espacio de tipos. Nuevamente, para consumir la biblioteca, necesitas tener una dependencia de código fuente en el servidor. Así que nuevamente, para mí, esto introduce un acoplamiento estrecho entre los dos. De hecho, el problema aquí es el concepto de ya sabes, lo que sucede en la mayoría de los equipos con los que he trabajado y desarrollado y demás, es que básicamente tienes alguna API que es desarrollada más o menos por un equipo y hay otro grupo de personas que, ya sabes, crea y consume o que consume esas APIs. Y esos grupos típicamente están más o menos separados en la mayoría de las empresas y en la mayoría de las organizaciones. Entonces, integrar todo junto, crear un acoplamiento estrecho entre todo eso hace que sea muy difícil descomponer y escalar y seguir evolucionando las cosas. Y por cierto, no hay nada que criticar a esas bibliotecas, que son fantásticas. Solo estoy hablando de por qué creo que necesitamos una mejor experiencia de cliente para las APIs. Entonces, ¿dónde nos quedamos? Bueno, algo que queremos proporcionar es una experiencia de desarrollador fantástica pero sin ningún acoplamiento estrecho. Entonces, sin ningún código compartido, esencialmente, entre el servidor y el cliente, para que puedas usar y consumir otras APIs. Y así, uno puede usar TypeScript 4.9 y el otro puede usar TypeScript 6 en el futuro. Y pueden evolucionar y tener diferentes versiones, diferentes cosas. Todo es divertido y perfecto. Entonces, ¿cómo podemos generar esta developer experience? Comencé este viaje,

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Scaling Up with Remix and Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
TypeScript and React: Secrets of a Happy Marriage
React Advanced Conference 2022React Advanced Conference 2022
21 min
TypeScript and React: Secrets of a Happy Marriage
Top Content
TypeScript and React are inseparable. What's the secret to their successful union? Quite a lot of surprisingly strange code. Learn why useRef always feels weird, how to wrangle generics in custom hooks, and how union types can transform your components.
Making JavaScript on WebAssembly Fast
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
Remix Flat Routes – An Evolution in Routing
Remix Conf Europe 2022Remix Conf Europe 2022
16 min
Remix Flat Routes – An Evolution in Routing
Top Content
This talk introduces the new Flat Routes convention that will most likely be the default in a future version of Remix. It simplifies the existing convention as well as gives you new capabilities.

Workshops on related topic

React, TypeScript, and TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Best Practices and Advanced TypeScript Tips for React Developers
React Advanced Conference 2022React Advanced Conference 2022
148 min
Best Practices and Advanced TypeScript Tips for React Developers
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
Are you a React developer trying to get the most benefits from TypeScript? Then this is the workshop for you.In this interactive workshop, we will start at the basics and examine the pros and cons of different ways you can declare React components using TypeScript. After that we will move to more advanced concepts where we will go beyond the strict setting of TypeScript. You will learn when to use types like any, unknown and never. We will explore the use of type predicates, guards and exhaustive checking. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring.
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
WorkshopFree
Hussien Khayoon
Kahvi Patel
2 authors
Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want?
In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.
Deep TypeScript Tips & Tricks
Node Congress 2024Node Congress 2024
83 min
Deep TypeScript Tips & Tricks
Top Content
Workshop
Josh Goldberg
Josh Goldberg
TypeScript has a powerful type system with all sorts of fancy features for representing wild and wacky JavaScript states. But the syntax to do so isn't always straightforward, and the error messages aren't always precise in telling you what's wrong. Let's dive into how many of TypeScript's more powerful features really work, what kinds of real-world problems they solve, and how to wrestle the type system into submission so you can write truly excellent TypeScript code.
Testing Web Applications Using Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
WorkshopFree
Gleb Bahmutov
Gleb Bahmutov
This workshop will teach you the basics of writing useful end-to-end tests using Cypress Test Runner.
We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data.
Anyone who knows JavaScript programming language and has NPM installed would be able to follow along.
Build a powerful DataGrid in few hours with Ag Grid
React Summit US 2023React Summit US 2023
96 min
Build a powerful DataGrid in few hours with Ag Grid
WorkshopFree
Mike Ryan
Mike Ryan
Does your React app need to efficiently display lots (and lots) of data in a grid? Do your users want to be able to search, sort, filter, and edit data? AG Grid is the best JavaScript grid in the world and is packed with features, highly performant, and extensible. In this workshop, you’ll learn how to get started with AG Grid, how we can enable sorting and filtering of data in the grid, cell rendering, and more. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid into your React application.
We all know that rolling our own grid solution is not easy, and let's be honest, is not something that we should be working on. We are focused on building a product and driving forward innovation. In this workshop, you'll see just how easy it is to get started with AG Grid.
Prerequisites: Basic React and JavaScript
Workshop level: Beginner