Explorando la arquitectura TypeScript-first de los marcos modernos

Rate this content
Bookmark

TypeScript va más allá de anotar la sintaxis. Exploraremos cómo los marcos modernos aprovechan la seguridad de tipo a nivel de proyecto para potenciar una mejor arquitectura, mayor estabilidad y velocidades más altas.

25 min
21 Sep, 2023

AI Generated Video Summary

Hola a todos. Hoy, les mostraré algunas de las características que implementan los marcos modernos o marcos que aprovechan TypeScript para mejorar la experiencia del desarrollador y del usuario. Cubriré algunas de las características que Expo con Expo Router y Next.js con AppRouter implementan. Hablemos de cómo configurar TypeScript en ambos, Expo y Next.js. Ambos marcos proporcionan una experiencia de desarrollo TypeScript-first. La característica más importante es el enrutamiento seguro de tipo, que mejora la productividad del desarrollador y la estabilidad de la aplicación. Los marcos proporcionan un componente de enlace incorporado para la generación de enlaces. Reduce el riesgo de errores tipográficos y arroja errores de tipo al enlazar a rutas inexistentes. En Expo, habilita el experimento .typed e importa el componente de enlace del paquete exporouter. Expo admite rutas estáticas y dinámicas, y arroja errores por parámetros incorrectos. ExpoRouter proporciona hooks como UseSegments y UseRouter para un mayor control. En Next.js, habilita typedRoutes en el archivo de configuración next. Podemos importar el componente de enlace del paquete next link y reiniciar el servidor de desarrollo después de actualizar el archivo de configuración next. Next.js genera automáticamente definiciones de ruta e incluye el archivo de tipo en la configuración TS. La autocompletación está disponible para el atributo href, que puede ser una cadena o un valor dinámico. Next.js proporciona hooks como use router para la navegación estática y router.push para prevenir la redirección a rutas rotas. Las rutas de captura en el enrutamiento seguro de tipo plantean un desafío para hacer cumplir la seguridad de tipo en el atributo href. TypeScript puede no arrojar un error para las rutas que pueden estar rotas o llevar a páginas no deseadas. Ten esto en cuenta al trabajar con rutas de captura. Antes de una construcción de producción, los tipos de ruta deben estar en su lugar para asegurar definiciones de tipo precisas. La generación de rutas es una tarea en curso que debe ocurrir en el momento adecuado para evitar errores en tiempo de construcción. Cuando se implementa correctamente, las rutas seguras de tipo pueden elevar la experiencia del desarrollador al prevenir enlaces rotos o rutas disfuncionales. En Next.js, los componentes del servidor y los componentes del cliente tienen diferentes limitaciones. Next.js proporciona una comprobación de errores automática para importar useState en componentes del servidor y hace cumplir la directiva useClient para prevenir el uso de código relacionado con el cliente en los lugares equivocados. Next.js también garantiza la seguridad de tipo al arrojar errores por opciones de configuración de segmento inválidas y requiere el atributo alt para los componentes de imagen para mejorar la accesibilidad. Los archivos de configuración en Expo y Next.js tienen diferentes enfoques para incorporar TypeScript, con Expo usando el gancho de requerimiento TS node y Next.js soportando la comprobación de tipo a través de jsdoc en el archivo de configuración JS. Al habilitar el enrutamiento seguro de tipo, detectamos posibles problemas en tiempo de compilación, asegurando rutas robustas y enlaces ininterrumpidos. Muchos otros marcos y herramientas aprovechan TypeScript para empoderar a los desarrolladores y entregar experiencias libres de errores a los usuarios.

1. Introducción a TypeScript en Next.js y Expo

Short description:

Hola a todos. Hoy les mostraré algunas de las características que implementan los marcos modernos o los marcos que aprovechan Typescript para mejorar la experiencia del desarrollador y del usuario. Cubriré algunas de las características que Expo con Expo Router y Next.js con AppRouter implementan. Hablemos de cómo configurar TypeScript en ambos, Expo y Next.js. Ambos marcos proporcionan una experiencia de desarrollo centrada en TypeScript. La característica más importante es el enrutamiento seguro por tipo, que mejora la productividad del desarrollador y la estabilidad de la aplicación.

Hola a todos. Soy Lydia Helle y hoy les mostraré algunas de las características que los modernos frameworks implementan o los frameworks que aprovechan Typescript implementan para no solo mejorar la experiencia del desarrollador, sino también la experiencia del usuario. Estoy segura de que han oído hablar de estas características antes, puede que las hayan utilizado. Así que esto es solo para recordarles que existen y darles un poco de apreciación. Y tal vez no las hayan utilizado antes, en cuyo caso espero que esta charla sea valiosa. Así que para esta charla, cubriré algunas de las características que Expo con Expo Router y Next.js con AppRouter implementan. Por supuesto, hay otros frameworks que implementan Typescript también y aprovechan características similares. Los mencionaré al final, pero por ahora solo quiero centrarme en Next.js y Expo. Así que antes de sumergirme en la parte de TypeScript de Next.js y Expo, solo quería presentar rápidamente Expo Router, si no han oído hablar de él antes, lo cual es probable si no están realmente interesados en el desarrollo nativo. Pero Expo Router es un enrutador basado en archivos para aplicaciones nativas y para aplicaciones web. Así que podemos usarlo para navegar fácilmente entre pantallas y rutas y reutilizar componentes en Android, iOS y web. Así que trae ese enrutamiento del sistema de archivos que podemos estar acostumbrados en la web a todas las plataformas. Si no lo han utilizado antes, recomiendo encarecidamente simplemente leer la documentación. Pueden iniciar rápidamente un proyecto de Expo Router utilizando el comando mpx create-expo-app. Recomiendo encarecidamente usar esa pestaña de plantilla porque entonces todo ya está instalado y es mucho más fácil comenzar con ello. Voy a suponer que ya han oído hablar de Next.js, que podemos inicializar utilizando mpx create-next-app-latest. Para esta charla, sin embargo, me centraré en Next.js 13 y principalmente en el enrutador de la aplicación. Por supuesto, si todavía están utilizando el enrutador de páginas, lo cual está completamente bien. También tenemos mucho soporte de TypeScript allí, pero por ahora solo me centraré en el enrutador de la aplicación. Hablemos de cómo configurar TypeScript en Expo y Next.js. Tanto Next.js como Expo proporcionan una experiencia de desarrollo centrada en TypeScript para construir su aplicación React. En Expo, al iniciar Expo Router a través de ese comando de configuración que acabo de mencionar, que de nuevo, recomiendo encarecidamente, se envía automáticamente con TypeScript ya instalado y configurado, por lo que podemos simplemente utilizar todas las características de inmediato. En Next.js, al inicializar un nuevo proyecto a través de los comandos de configuración te preguntará si te gustaría usar TypeScript como primera pregunta, y es sí por defecto, así que solo haz clic en sí. Así que ambos frameworks tienen un enfoque muy centrado en TypeScript. Por supuesto, también, tanto Next.js como Expo te permiten implementar rápidamente TypeScript o añadir soporte para TypeScript simplemente convirtiendo un archivo de JS a TypeScript o a TS, y esto instalará automáticamente todas las dependencias necesarias y configurará tu proyecto para que puedas usar TypeScript de inmediato en un proyecto ya existente. Ahora la parte más importante, hablemos de las características que obtenemos al tener TypeScript habilitado y configurado. La más importante es el enrutamiento seguro por tipo. Así que el enrutamiento seguro por tipo mejora la productividad del desarrollador y en general la estabilidad de tu aplicación asegurando la corrección de las referencias de ruta en toda tu aplicación porque tradicionalmente los desarrolladores tenían que definir explícitamente las rutas y asociarlas con vistas o componentes específicos, y este sistema por supuesto funciona, así es como siempre lo hemos hecho, pero es muy susceptible a errores humanos porque el desarrollador puede escribir fácilmente mal una ruta llevando a enlaces rotos o si estás migrando rutas o cambiándolas de nombre, es bastante fácil pasar por alto accidentalmente algunos de los tags de anclaje que todavía están enlazando a esa antigua ruta y eso habría creado un montón de enlaces rotos. Y aquí es donde TypeScript y el concepto de enrutamiento seguro por tipo entran en juego porque TypeScript que soporta esto escaneará el sistema de archivos de tu proyecto y generará dinámicamente tipos de TypeScript para cada ruta detectada. Y esto crea un entorno seguro basado en el estado actual de tu aplicación cada vez que actualizas

2. Componente de Enlace y Enrutamiento en Expo y Next.js

Short description:

Los frameworks proporcionan un componente de enlace integrado para la generación de enlaces. Reduce el riesgo de errores tipográficos y lanza errores de tipo al enlazar a rutas inexistentes. En Expo, habilita el experimento .typed e importa el componente de enlace del paquete exporouter. Expo admite rutas estáticas y dinámicas, y lanza errores para parámetros incorrectos. ExpoRouter proporciona hooks como UseSegments y UseRouter para un mayor control. En Next.js, habilita typedRoutes en el archivo de configuración next.

Y para hacer el sistema aún más amigable para el desarrollador, los frameworks generalmente proporcionan un componente de enlace integrado que está diseñado para la generación de enlaces. Y este componente tiene un atributo href que utiliza estos tipos que generamos en el paso anterior basado en el sistema de archivos. Y tu IDE puede usar esto para la autosugerencia, autocompletado, lo que reduce aún más el riesgo de errores tipográficos. Y lo más importante, si un desarrollador intenta enlazar a una ruta que no existe, lanzará ese error de tipo durante el proceso de construcción. Entonces veamos cómo podemos usar esto en Expo primero. Así que en Expo podemos utilizar esto asegurándonos primero de que el experimento .typed esté habilitado. Y después de haber hecho eso, podemos importar el componente de enlace del paquete exporouter. Para el propósito de esta demostración, simplemente crearé algunas rutas más, lo que podemos hacer creando un nuevo archivo con el nombre de la ruta. Así que, por ejemplo, contacto y ruta.

Entonces ahora cuando usamos el componente de enlace con el atributo href, inicialmente no verás los tipos porque tuvimos que iniciar el servidor de desarrollo. Porque Expo utiliza el observador de archivos del bundler para crear automáticamente declaraciones de ruta, que podemos ver en este archivo de tipos de expo autogenerado. Así que puedes ver como rutas estáticas, rutas dinámicas, todo eso. Y también puedes ver que Expo incluyó automáticamente este archivo en el ts-config. Así que TypeScript sabe que debe observar este archivo cuando estamos usando ese componente de enlace. Así que ahora volviendo al componente de enlace, verás que obtenemos las rutas autocompletadas. Cambia un nombre de ruta, por ejemplo, about a team, verás instantáneamente ese error de tipo. Así que esto es súper útil. Y podemos verlo simplemente en nuestro IDE. O, por supuesto, cuando estás ejecutando ese servidor de desarrollo, si tienes muchos archivos, y no lo captarás fácilmente en tu editor. Expo también admite rutas dinámicas. Así que simplemente vamos a crear una usando corchetes. Así que ahora cuando estamos usando el componente de enlace para enlazar a una ruta dinámica, Expo también lanzará un error si estás enlazando accidentalmente a una ruta dinámica con un parámetro incorrecto. Por ejemplo, ID aquí debería haber sido o ID en minúsculas aquí debería haber sido ID. Así que eso también es muy útil. Y además, ExpoRouter también viene con algunos hooks como UseSegments y UseRouter que te permiten tener aún más control sobre ese comportamiento de enrutamiento. Así que si usamos el router de UseRouter, podría, por ejemplo, decir como router.push, también utilizan los tipos que acabamos de generar. Así que siempre puedes estar seguro de que tus rutas son correctas incluso cuando estás redirigiendo o empujando todo ese tipo de cosas.

Ahora en Next.js. Next.js proporciona un enfoque similar. Así que para habilitar el enrutamiento de tipos, haz

3. Importando el Componente de Enlace y Enrutamiento en Next.js

Short description:

Podemos importar el componente de enlace del paquete next link y reiniciar el servidor de desarrollo después de actualizar el archivo de configuración next. Next.js genera automáticamente las definiciones de ruta e incluye el archivo de tipo en la configuración de TS. La autocompletación está disponible para el atributo href, que puede ser una cadena o un valor dinámico. Next.js proporciona hooks como use router para la navegación estática y router.push para prevenir la redirección a rutas rotas.

asegúrate de que el experimental.typedRoutes esté configurado como true en tu archivo de configuración next. Y luego podemos importar nuevamente el componente de enlace, esta vez del paquete next link. Y dado que actualizamos el archivo de configuración next, solo tendremos que reiniciar el servidor de desarrollo, que ahora volverá a escanear nuestro sistema de archivos para generar automáticamente estas definiciones de ruta en el archivo de tipo next. Puedes ver aquí, se ve bastante similar a lo que acabamos de ver. Tenemos las rutas estáticas, rutas dinámicas, todo eso. Y Next.js automáticamente incluye este archivo de tipo en el campo include en tu configuración de TS. Así que de nuevo, Tadascript sabe dónde buscar. Así que de nuevo obtenemos la autocompletación en el atributo href y el href puede ser nuevamente una cadena o este valor dinámico. Para Next.js, solo tenemos que importar el tipo de ruta de Next si estamos usando un valor dinámico como este. Y Next.js también viene con algunos hooks para la navegación estática. También como use router. Así que podemos usar router.push y mostrará todas las rutas de nuevo. Sí. Para asegurarnos de que no redirigimos a una ruta rota.

4. Desafíos con las Rutas Catch All

Short description:

Las rutas catch all en el enrutamiento seguro por tipo plantean un desafío para hacer cumplir la seguridad de tipo en el atributo href. TypeScript puede no lanzar un error para las rutas que pueden estar rotas o llevar a páginas no deseadas. Ten esto en cuenta al trabajar con rutas catch all.

Uno de los inconvenientes o más bien un caso límite, supongo, o cosas a tener en cuenta son las rutas catch all. Porque en esencia, una ruta catch all es una especie de mecanismo comodín. Ya sabes, valida y coincide con cualquier ruta dada. Y esto es un desafío para el enrutamiento seguro por tipo, porque si cualquier ruta se considera válida, ¿cómo haces cumplir la type safety en el atributo href? Entonces, ya sabes, TypeScript se queda un poco ciego en esas situaciones. Porque no sabe si una ruta particular corresponde a una página dinámica o no. Entonces, ahora, podemos esencialmente escribir cualquier ruta. Y puede estar rota o puede llevar a una página donde no queremos que la gente vaya. TypeScript no lanzará ese error. Entonces, tiene sentido. Y es un comportamiento esperado. Pero solo asegúrate. Como, tenlo en cuenta

5. Importancia de los Tipos de Rutas y Características de Next.js

Short description:

Antes de una construcción en producción, los tipos de rutas deben estar en su lugar para garantizar definiciones de tipo precisas. La generación de rutas es una tarea continua que debe ocurrir en el momento adecuado para evitar errores en tiempo de construcción. Cuando se implementan correctamente, las rutas seguras por tipo pueden mejorar la experiencia del desarrollador al prevenir enlaces rotos o rutas disfuncionales. La siguiente sección cubrirá características adicionales de TypeScript en Next.js que se relacionan con los paradigmas de renderizado y obtención de datos.

que esto podría suceder. Otra cosa importante a recordar, y esto es más para los autores, pero es cuando se generan los tipos. Porque antes de que se active una construcción en producción, que en la mayoría de los entornos de desarrollo ocurre en CI, los tipos de rutas ya deberían estar en su lugar. Porque eso ayuda a garantizar que la construcción en producción tenga acceso a las últimas rutas y a las definiciones de tipo más precisas. Entonces, generar rutas no es solo una tarea única. Sucede de manera continua. Y necesita suceder en el momento adecuado. De lo contrario, seguirás encontrándote con estos errores de tipo en tiempo de construcción.

Entonces, para resumir la parte de ruta segura por tipo, cuando se implementa y se gestiona correctamente, realmente puede elevar la developer experience. Porque a pesar de los mejores esfuerzos del desarrollador, a veces solo necesitamos ese mecanismo de salvaguarda para asegurarnos de que no introducimos inadvertidamente enlaces rotos o rutas disfuncionales. Entonces, la siguiente sección será solo sobre Next.js. Porque Next.js también viene con características adicionales de TypeScript que se relacionan con los nuevos paradigmas de renderizado, paradigmas de obtención de data. Y cubriré los que actualmente están soportados. Pero solo para que lo sepas, se agregarán más características en el futuro para mejorar la developer experience aún más.

6. Soporte de TypeScript y Archivos de Configuración en Next.js

Short description:

En Next.js, los componentes del servidor y los componentes del cliente tienen diferentes limitaciones. Next.js proporciona una comprobación de errores automática para la importación de useState en componentes del servidor y aplica la directiva useClientDirective para evitar el uso de código relacionado con el cliente en los lugares equivocados. Next.js también garantiza la seguridad de tipo al lanzar errores para opciones de configuración de segmento inválidas y requiere el atributo alt para los componentes de imagen para mejorar la accesibilidad. Los archivos de configuración en Expo y Next.js tienen diferentes enfoques para incorporar TypeScript, con Expo utilizando el gancho de requerimiento de nodo TS y Next.js soportando la comprobación de tipo a través de jsdoc en el archivo de configuración JS.

El primero está relacionado con los componentes del servidor y los componentes del cliente. No explicaré qué son los componentes del servidor y los componentes del cliente. Si no estás seguro, te recomiendo encarecidamente que leas la documentación para entender qué son. Pero en resumen, no siempre podemos usar como no podemos usar hooks de ciclo de vida o cualquier código relacionado con el cliente en componentes del servidor.

Entonces, primero, Next.js lanzará automáticamente un error si estás importando useState en un componente que no ha sido marcado con la directiva useClientDirective. Y esto es increíblemente útil porque no podemos usar hooks como useState o useEffect o cualquier cosa que debería estar en el cliente y los componentes del servidor. Entonces, en la mayoría de los casos, probablemente solo olvidaste hacer ese componente y los componentes del cliente. Así que esto ayuda a asegurar que no estamos olvidando eso, lo cual es bastante fácil de hacer. Y además, Next.js también lanzará un error de tipo si has usado la directiva useClientDirective en cualquier lugar que no sea en la parte superior de tu archivo. Como te dirá que lo muevas a la parte superior del archivo. Y este es fácil de olvidar o pasar por alto. Así que tener esa seguridad de tipo adicional ayuda a evitar estos errores confusos que pueden habernos costado muchas horas tratando de debug algo tan sencillo. Next.js también lanza un error si el o si tienes valores inválidos para las opciones de configuración de segmento. Así que las opciones de segmento de ruta te permiten configurar el comportamiento de una página, un diseño, o un manejador de ruta exportando variables. Y esas variables solo pueden tener valores específicos, como puedes ver aquí. Así que Next.js ayuda a asegurar que estás estableciendo estas variables exportadas a valores que son realmente válidos, lo cual también es muy útil. El soporte de TypeScript en Next.js también ayuda con la accessibility, por ejemplo, requiriendo que el atributo alt esté establecido en los componentes de imagen. Y esto significa que cada vez que usamos esos componentes de imagen, TypeScript te recordará que establezcas el alt que es, ya sabes, esencial para los lectores de pantalla y en general para la accessibility web. A menudo es algo que los desarrolladores pasan por alto. Así que tener este pequeño empujón ayuda a asegurar que, ya sabes, tu aplicación web es más inclusiva por defecto. Y por último, uno pequeño pero importante es los archivos de configuración. Así que los archivos de configuración deben ser un archivo JavaScript ya que no se analiza con Babel o TypeScript. Y la forma en que tanto Expo como Next.js manejan esto es un poco diferente. Así que en Expo para usar TypeScript en sus archivos de configuración como webpack metro o app, puedes usar el gancho de requerimiento de nodo TS, y primero tienes que instalar eso. Y esto te permite importar un archivo TypeScript en el archivo de configuración JS. Así que, por ejemplo, podemos crear un TypeScript en config.ts. Podemos importar el tipo de configuración de Expo y luego podemos escribir nuestra configuración como queramos y todo se auto completará y luego podemos importar este archivo en el archivo de configuración de la app usando TS node. Así que ahora todavía tenemos un archivo de configuración válido, pero también tenemos esa seguridad de tipo adicional al costo de tener un archivo adicional, pero eso puede valer la pena. Ahora en Next.js, así que el JS de configuración de Next.js te permite añadir un poco de comprobación de tipo en tu IDE usando jsdoc. Es esta línea de importación

7. Beneficios de TypeScript y Conclusión

Short description:

Al habilitar el enrutamiento seguro por tipo, detectamos posibles problemas en tiempo de compilación, asegurando rutas robustas y enlaces no rotos. Muchos otros marcos de trabajo y herramientas aprovechan TypeScript para empoderar a los desarrolladores y ofrecer experiencias libres de errores a los usuarios.

que ves aquí. Puede que lo hayas visto antes también en otros frameworks o herramientas. Así que ahora cuando lo importamos en la parte superior de nuestro archivo, también tenemos type safety. Así que esto no requiere un archivo adicional, pero usa jsdoc. Para concluir esta breve visión general, hemos visto cómo Xfo y Next.js utilizan TypeScript para mejorar la developer experience, lo que a su vez también mejora la user experience. Y al habilitar, ya sabes, el enrutamiento seguro por tipo, podemos detectar posibles problemas en tiempo de compilación, asegurando que nuestras rutas son robustas, nuestros enlaces no están rotos, nuestras aplicaciones son más resistentes al error humano. Por supuesto, hay muchos otros frameworks y herramientas que aprovechan TypeScript ofrecen características similares. Para mí, simplemente muestra cómo el ecosystem de desarrolladores está evolucionando hacia un futuro donde, ya sabes, los desarrolladores están empoderados por sus herramientas y podemos ofrecer experiencias libres de errores de tipo a nuestros usuarios. Así que gracias por unirte a mí hoy. Espero que haya sido útil. Y diviértete programando. Programando de forma segura, de tipo seguro, y siempre intenta ofrecer la mejor user experience.

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

React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
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!
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
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.
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
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.
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
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.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
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.
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!

Workshops on related topic

React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Featured WorkshopFree
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.
React Advanced Conference 2022React Advanced Conference 2022
148 min
Best Practices and Advanced TypeScript Tips for React Developers
Featured Workshop
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.
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
AI on Demand: Serverless AI
Featured WorkshopFree
In this workshop, we discuss the merits of serverless architecture and how it can be applied to the AI space. We'll explore options around building serverless RAG applications for a more lambda-esque approach to AI. Next, we'll get hands on and build a sample CRUD app that allows you to store information and query it using an LLM with Workers AI, Vectorize, D1, and Cloudflare Workers.
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
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.
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
TypeScript Congress 2022TypeScript Congress 2022
116 min
Advanced TypeScript types for fun and reliability
Workshop
If you're looking to get the most out of TypeScript, this workshop is for you! In this interactive workshop, we will explore the use of advanced types to improve the safety and predictability of your TypeScript code. You will learn when to use types like unknown or never. We will explore the use of type predicates, guards and exhaustive checking to make your TypeScript code more reliable both at compile and run-time. 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.
Are you familiar with the basics of TypeScript and want to dive deeper? Then please join me with your laptop in this advanced and interactive workshop to learn all these topics and more.
You can find the slides, with links, here: http://theproblemsolver.nl/docs/ts-advanced-workshop.pdf
And the repository we will be using is here: https://github.com/mauricedb/ts-advanced