Haciendo Magia: Construyendo un Marco de Trabajo Primero-TypeScript

Rate this content
Bookmark

Voy a profundizar en los internos de Nuxt para describir cómo hemos construido un marco de trabajo primero-TypeScript que está profundamente integrado con el IDE del usuario y la configuración de comprobación de tipos para ofrecer seguridad de tipo de pila completa de extremo a extremo, sugerencias para diseños, middleware y más, opciones de configuración de tiempo de ejecución tipadas e incluso enrutamiento tipado. Además, destacaré lo que más me emociona hacer en los días venideros y cómo TypeScript hace eso posible no solo para nosotros sino para cualquier autor de bibliotecas.

Daniel Roe
Daniel Roe
31 min
21 Sep, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Daniel Rowe discute la construcción de un marco de trabajo primero-TypeScript en el Congreso TypeScript y comparte su participación en varios proyectos. Nuxt es un marco de trabajo progresivo construido sobre Vue.js, con el objetivo de reducir la fricción y la distracción para los desarrolladores. Aprovecha TypeScript para la inferencia y aspira a ser la fuente de verdad para los proyectos. Nuxt proporciona seguridad de tipo y extensibilidad a través de la integración con TypeScript. Migrar a TypeScript ofrece beneficios de mantenimiento a largo plazo y puede descubrir errores ocultos. Nuxt se centra en mejorar las herramientas existentes y encuentra inspiración en marcos de trabajo como TRPC.

Available in English

1. Introducción y Antecedentes

Short description:

Daniel Rowe, mantenedor de NUXT y autor de bibliotecas de código abierto, discute la construcción de un marco de trabajo basado en TypeScript en el Congreso de TypeScript. Comparte su participación en varios proyectos, como Fontane, Magic Regular Expressions y Elk. Daniel invita a la audiencia a conectarse con él en su sitio web en roe.dev y ofrece asistencia con preguntas, ayuda y contribuciones de código abierto. También menciona su ubicación en el Reino Unido y el clima impredecible.

Cómo funciona TypeScript Hola. Es un verdadero placer estar aquí en el Congreso de TypeScript hablando sobre cómo hacer magia, construyendo un marco de trabajo basado en TypeScript. Mi nombre es Daniel Rowe. Soy autor de bibliotecas de open-source y mantenedor de NUXT, que es un marco para construir aplicaciones web. También estoy involucrado en algunas otras cosas desde Fontane, que ayuda a reducir el desplazamiento acumulativo del diseño con fuentes web personalizadas, hasta Magic Regular Expressions, que es una reimaginación de cómo podrían ser los proyectos, basado en gran medida en la magia de TypeScript, hasta Elk, que es un cliente para Mastodon, una red social distribuida. También soy un Google GDE y un Microsoft MVP. Puedes ponerte en contacto conmigo en mi sitio web en roe.dev. Si hay algo con lo que puedo ayudarte, me encantaría. Estoy accesible si tienes preguntas, o necesitas ayuda, o quieres contribuir al código abierto. Por cualquier motivo, sería realmente agradable decir hola. Vivo en el Reino Unido, en el noreste de Inglaterra, en un encantador entorno rural, a orillas de un río, a la sombra de un antiguo bosque. Tengo tres gatos y un perro, y este es el lugar donde estoy ahora. Y probablemente, cuando te pongas en contacto o me envíes un mensaje, me encontrarás en esta misma situación. Ha estado lloviendo un poco hoy, pero también hace sol. Así que eso es una buena indicación del clima del Reino Unido, si no estás familiarizado con él.

2. Integración del marco Nuxt y TypeScript

Short description:

Nuxt es un marco progresivo construido sobre Vue.js, que proporciona una experiencia de desarrollador fluida con las mejores prácticas y configurabilidad. El objetivo es reducir la fricción y la distracción, permitiendo a los desarrolladores centrarse en su código. El uso de TypeScript a nivel central tiene como objetivo mejorar esta experiencia, con un enfoque en ser la fuente de verdad, aprovechando la inferencia, permitiendo la ampliación y revelando la verdad del proyecto al usuario final.

Y probablemente te estés preguntando qué es Nuxt, si no te has encontrado con él antes. Es un marco progresivo construido sobre Vue.js. Vue es la capa de renderizado para el front end, pero es full stack. Por lo tanto, también tiene un motor de servidor llamado Nitro, que ahora es un marco por sí mismo y también es utilizado por otros meta-frameworks.

Una de las cosas clave para Nuxt es la developer experience. Por lo tanto, se trata de hacer algo que sea fácil de usar, que tenga las best practices incorporadas, pero que no imponga una alta barrera de entrada, pero al mismo tiempo sea configurable y te permita extenderlo según lo necesites, a medida que creces y tienes diferentes requisitos, debería crecer contigo.

Hace unos años, empezamos a reconstruir Nuxt. Y una de las cosas en las que trabajamos que queríamos hacer era pensar en cómo podríamos hacer Nuxt aún más mágico. Y creo que la magia es una característica realmente importante de un marco que me gustaría usar. Sé que a veces puede usarse en un sentido peyorativo, pero creo que la magia es algo que queremos en términos de developer experience. Y para mí, son realmente estas dos cualidades. Se trata de reducir la fricción, manteniéndote en un solo contexto, y de reducir la distracción. Por lo tanto, adoptando un principio más minimalista.

Entonces, dondequiera que cambies de contexto, si eres un desarrollador y estás escribiendo código, las ideas fluyen a través de ti y hacia afuera, si hay algo que te detiene de eso, ya sea que tengas que ir a la documentation para averiguar algo, o necesites revisar en otra parte de tu proyecto para entender si puedes hacer lo que estás intentando hacer, eso va a ralentizarte y crear una sensación de frustración. Y lo mismo es cierto, creo, con la distracción. Entonces, cuando te encuentras teniendo que mantener una configuración de bundler compleja o repetir el código una y otra vez, incluso cuando abres un nuevo componente y ves 20 líneas de importaciones en la parte superior antes de que incluso veas el código que quieres ver, todo eso, creo, puede interponerse en el camino del estado de flujo, algo que te hace sentir productivo y disfrutar y prosperar en lo que estás haciendo. Y por lo tanto, creo que la magia es una de las cosas que podemos hacer, puede proporcionarnos ofertas de marcos que pueden mejorar dramáticamente la experiencia de los desarrolladores.

Entonces, cuando llegamos, como decía, a reconstruir Nuxt desde cero, para nosotros, se trataba de pensar, ¿cómo podemos usar TypeScript para hacer este tipo de magia? Porque construir el marco, escribirlo en TypeScript es prácticamente una apuesta segura. Pero, ¿qué podríamos hacer si apuntáramos a tener TypeScript incorporado a un nivel mucho más central para que el marco en sí sea nativo de TypeScript? Y se me ocurrieron estas cuatro posibilidades diferentes, y podrías tener otras, y más podrían irme más tarde. Pero pensé que estas serían una guía útil para seguir. Y la primera es que tiene que ser diseñado para ser la fuente de verdad en un proyecto. El marco necesita ser diseñado para la inferencia, por lo que aprovecha al máximo TypeScript para hacer lo que puede hacer. Necesita ser diseñado para la ampliación. Y necesita ser diseñado para revelar toda la verdad del proyecto tanto como sea posible al usuario final. Entonces, ¿qué quiero decir? Primero, diseñado como una fuente de verdad. Entonces, en el momento en que clonas un nuevo proyecto en cualquier marco, a menudo encontrarás que hay una página en la documentation llamada usando con TypeScript. Y en esta página, entonces hay una tsConfig. Y puedes ir a la página y copiar y pegarla en tu proyecto. O tal vez tienes una plantilla donde ya está. Y desde ese momento, tu configuración de TypeScript comienza a divergir de la realidad de la biblioteca.

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

A Guide to React Rendering Behavior
React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
React Compiler - Understanding Idiomatic React (React Forget)
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
Full Stack Documentation
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
Interactive web-based tutorials have become a staple of front end frameworks, and it's easy to see why — developers love being able to try out new tools without the hassle of installing packages or cloning repos.But in the age of full stack meta-frameworks like Next, Remix and SvelteKit, these tutorials only go so far. In this talk, we'll look at how we on the Svelte team are using cutting edge web technology to rethink how we teach each other the tools of our trade.

Workshops on related topic

React Hooks Tips Only the Pros Know
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
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.
Designing Effective Tests With React Testing Library
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Top Content
Featured Workshop
Josh Justice
Josh Justice
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
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.
Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.