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.
This talk has been presented at TypeScript Congress 2023, check out the latest edition of this JavaScript Conference.
FAQ
Expo Router es un enrutador basado en archivos para aplicaciones nativas y web. Permite navegar fácilmente entre pantallas y rutas, reutilizando componentes en Android, iOS y web. Para comenzar un proyecto con Expo Router, puedes utilizar el comando 'mpx create-expo-app' y seleccionar la plantilla adecuada, que ya incluye todo lo necesario para empezar.
Para iniciar un proyecto en Next.js con soporte para TypeScript, puedes utilizar el comando 'mpx create-next-app-latest'. Durante el proceso de configuración, se te preguntará si deseas usar TypeScript, y la opción por defecto es 'sí'. Simplemente debes confirmar para continuar con la configuración.
El enrutamiento seguro por tipo es una característica soportada por TypeScript que mejora la productividad del desarrollador y la estabilidad de la aplicación. Asegura que las referencias de ruta sean correctas, minimizando errores humanos como enlaces rotos o incorrectos. TypeScript genera dinámicamente tipos para cada ruta detectada, lo que permite una integración más segura y precisa en el desarrollo.
En frameworks como Expo y Next.js, el componente de enlace utiliza los tipos generados por TypeScript para ofrecer autocompletado y autosugerencia de rutas, reduciendo el riesgo de errores tipográficos. Si un desarrollador intenta enlazar a una ruta que no existe, se generará un error de tipo durante el proceso de compilación, mejorando la robustez del código.
Los componentes del servidor y los componentes del cliente en Next.js son tipos de componentes que tienen restricciones específicas sobre dónde y cómo pueden usarse. Los componentes del servidor no pueden utilizar hooks de ciclo de vida o código del lado del cliente, como useState o useEffect. Next.js emite errores automáticos si se intenta usar estos hooks en componentes del servidor.
Para añadir soporte para TypeScript en proyectos existentes de Next.js o Expo, puedes simplemente cambiar la extensión de un archivo de .js a .ts. Esto iniciará la instalación de las dependencias necesarias y configurará el proyecto para que puedas comenzar a usar TypeScript inmediatamente.
Las rutas 'catch all' presentan un desafío para el enrutamiento seguro por tipo porque validan cualquier ruta, lo que dificulta la aplicación de la seguridad de tipo en el atributo href. TypeScript no puede detectar si una ruta lleva a una página dinámica o no, por lo que es importante ser consciente de este comportamiento al usar rutas 'catch all'.
El uso de TypeScript en frameworks modernos como Expo y Next.js mejora significativamente la experiencia del desarrollador y la robustez de las aplicaciones. Proporciona seguridad de tipo, previene errores comunes y optimiza el proceso de desarrollo al detectar problemas en tiempo de compilación, lo que resulta en aplicaciones más estables y confiables.
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.
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.
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
Today's Talk focuses on React's best types and JSX. It covers the types of JSX and React components, including React.fc and React.reactnode. The discussion also explores JSX intrinsic elements and react.component props, highlighting their differences and use cases. The Talk concludes with insights on using React.componentType and passing components, as well as utilizing the react.element ref type for external libraries like React-Select.
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.
¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.
¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
TypeScript no es solo tipos e interfaces. Únete a esta masterclass para dominar características más avanzadas de TypeScript que harán tu código a prueba de balas. Cubriremos tipos condicionales y notación de inferencia, cadenas de plantillas y cómo mapear sobre tipos de unión y propiedades de objetos/arrays. Cada tema se demostrará en una aplicación de muestra que se escribió con tipos básicos o sin tipos en absoluto y juntos mejoraremos el código para que te familiarices más con cada característica y puedas llevar este nuevo conocimiento directamente a tus proyectos. Aprenderás:- - ¿Qué son los tipos condicionales y la notación de inferencia?- ¿Qué son las cadenas de plantillas?- Cómo mapear sobre tipos de unión y propiedades de objetos/arrays.
TypeScript tiene un sistema de tipos poderoso con todo tipo de características sofisticadas para representar estados de JavaScript salvajes y extravagantes. Pero la sintaxis para hacerlo no siempre es sencilla, y los mensajes de error no siempre son precisos al decirte qué está mal. Vamos a profundizar en cómo funcionan muchas de las características más poderosas de TypeScript, qué tipos de problemas del mundo real resuelven, y cómo dominar el sistema de tipos para que puedas escribir código TypeScript verdaderamente excelente.
En esta masterclass, discutimos los méritos de la arquitectura sin servidor y cómo se puede aplicar al espacio de la IA. Exploraremos opciones para construir aplicaciones RAG sin servidor para un enfoque más lambda-esque a la IA. A continuación, nos pondremos manos a la obra y construiremos una aplicación CRUD de muestra que te permite almacenar información y consultarla utilizando un LLM con Workers AI, Vectorize, D1 y Cloudflare Workers.
¿Eres un desarrollador de React tratando de obtener los máximos beneficios de TypeScript? Entonces esta es la masterclass para ti.En esta masterclass interactiva, comenzaremos desde lo básico y examinaremos los pros y contras de las diferentes formas en que puedes declarar componentes de React usando TypeScript. Después de eso, pasaremos a conceptos más avanzados donde iremos más allá de la configuración estricta de TypeScript. Aprenderás cuándo usar tipos como any, unknown y never. Exploraremos el uso de predicados de tipo, guardias y comprobación exhaustiva. Aprenderás sobre los tipos mapeados incorporados, así como cómo crear tus propias utilidades de mapa de tipo nuevo. Y comenzaremos a programar en el sistema de tipos de TypeScript usando tipos condicionales e inferencia de tipos.
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal. QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala. En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.
React Summit Remote Edition 2021
Remix Conf Europe 2022
React Summit 2023
JSNation 2022
React Day Berlin 2023
React Advanced 2021
React Summit US 2023
Node Congress 2024
DevOps.js Conf 2024
Comments