Enlaces seguros para Node.js con Rust y WebAssembly

Rate this content
Bookmark
Slides

Esta charla te enseñará cómo escribir módulos de Node.js críticos para el rendimiento sin la carga de distribuir artefactos dependientes de la plataforma y usar la cadena de herramientas C/C++. Descubrirás cómo integrar sin problemas código Rust en tu aplicación Node.js + TypeScript utilizando WebAssembly. También aprenderás cómo evitar los problemas típicos de serialización de WebAssembly y entenderás cuándo otras alternativas como Neon o Napi.rs son preferibles. Juntos, cruzaremos el puente del lenguaje entre Rust y Node.js mientras preservamos la familiaridad de la experiencia de desarrollo que estás acostumbrado.

Alberto Schiabel
Alberto Schiabel
22 min
17 Apr, 2023

Video Summary and Transcription

Esta charla explora los enlaces de TypeScript para NodeJS con Rust y WebAssembly, proporcionando un enfoque alternativo para crear módulos nativos de NodeJS y generar automáticamente tipos. Se adentra en el uso de WebAssembly y Rust para módulos de TypeScript, mostrando cómo se pueden definir e importar funciones Rust utilizando la biblioteca wasm.bindgen. La charla también destaca los desafíos de la conversión de cadenas entre Rust y JavaScript, las limitaciones de soporte de los tipos de datos Rust en JavaScript y la integración perfecta de las funciones Rust en aplicaciones TypeScript utilizando tspy. Concluye con la recomendación de TSFI para enlaces seguros y muestra su uso en un motor de búsqueda de texto completo basado en TypeScript con soporte de WebAssembly.

Available in English

1. Introducción

Short description:

Esto es TypeScript Bindings para NodeJS con Rust y WebAssembly. Buscaremos un enfoque alternativo y más fácil para crear módulos nativos de NodeJS, al mismo tiempo que generamos automáticamente los tipos para ellos.

Hola a todos, y gracias a Node Congress por tenerme aquí. Esto es TypeScript Bindings para NodeJS con Rust y WebAssembly. Buscaremos un enfoque alternativo y más fácil para crear módulos nativos de NodeJS, al mismo tiempo que generamos automáticamente los tipos para ellos.

Un poco sobre mí. Soy Alberto Schibel. Soy de Venecia, Italia. Soy un ingeniero de software en Prisma donde he portado varios módulos de Rust a WebAssembly. También soy consultor y trabajo con NodeJS, TypeScript y Rust. Puedes encontrarme en línea en j.com.io. También puedes encontrar las diapositivas

2. WebAssembly y Rust para Módulos de TypeScript

Short description:

WebAssembly, o WASM, es una abstracción de bajo nivel para la CPU en la que se ejecuta tu código. Es un bytecode rápido y compacto diseñado para lograr una velocidad cercana a la nativa y optimizado para un inicio rápido y una huella de memoria pequeña. Es un objetivo de compilación portátil para muchos lenguajes, incluido Rust. Rust es consistentemente votado como el mejor lenguaje para WebAssembly. Veamos cómo podemos crear módulos de TypeScript a partir de él.

para esta charla en mi página de GitHub. Entonces, el elefante en la habitación, ¿qué es WebAssembly y cómo es útil? Bueno, WebAssembly, o WASM, es básicamente una abstracción de bajo nivel para la CPU en la que se ejecuta tu código. Es un bytecode rápido y compacto en el sentido de que es un formato binario portátil para una máquina virtual que modela las operaciones de carga y almacenamiento de números en la memoria lineal. Está diseñado para lograr una velocidad cercana a la nativa y también está optimizado para un inicio rápido y una huella de memoria pequeña. Fue creado por los proveedores de navegadores para portar código C++ a la web sin degradación del rendimiento y ahora es un objetivo de compilación portátil para muchos lenguajes, incluidos Rust, Go y muchos otros. Eso significa que puedes compilar tu código a WASM una vez y luego ejecutar el mismo artefacto compilado en diferentes plataformas. Por ejemplo, Node.js admite WebAssembly desde la versión 8 y ahora puedes importar un módulo WASM exactamente como importarías un paquete estándar de npm. Y ¿por qué es útil un único objetivo de compilación portátil? Considera Node.js, un popular complemento NAPI que compila estilos SAS a CSS. Para admitir múltiples configuraciones del sistema, arquitecturas e incluso versiones de Node.js, esta biblioteca debe compilarse por separado para cada una de estas configuraciones. Esto significa 35 objetivos de compilación diferentes y hace que cada nueva implementación sea una tarea que consume tiempo y recursos. Aquellos de ustedes que usan Prisma probablemente sepan que estamos en una situación similar con el CLI de TypeScript y una biblioteca que descarga algunos binarios compilados de Rust bajo demanda. Esto es lo que nos hizo considerar WebAssembly y adoptarlo tanto como para simplificar nuestro proceso de implementación. Y si alguna vez has intentado escribir complementos nativos de Node.js, probablemente sepas que no es un proceso sencillo. A veces, no jib falla con mensajes de error crípticos y, francamente, las herramientas necesarias para construir e importar módulos de C++ no son tan amigables para los humanos como lo que los desarrolladores de Node.js están acostumbrados a utilizar. Entonces, esta es quizás una de las principales razones por las que Rust es consistentemente votado como el mejor lenguaje para WebAssembly. Entonces, veamos cómo podemos crear los módulos de TypeScript a partir de él. Y para aquellos de ustedes que son nuevos en Rust, definamos algunos conceptos básicos, ¿de acuerdo? Entonces, cualquier cosa que uses un paquete de json para, lo colocarías en un archivo cargo.toml en un proyecto de Rust. Lo que normalmente llamas paquetes de npm son cajas en Rust y operas con ellas a través del comando cargo CLI. Por ejemplo, para compilar código Rust, usarías el comando cargo build y especificarías el objetivo de compilación. En nuestro caso, es Wasm 32 desconocido, desconocido. Utiliza un espacio de direccionamiento de 32 bits y no está vinculado a ningún proveedor de sistema operativo o arquitectura de CPU en particular. Si queremos mover más que solo datos numéricos a través del puente de WebAssembly, necesitaremos una herramienta de enlace. Es tanto un CLI como una biblioteca de Rust. Cuando lo instalas, debes especificar una versión particular, porque aún no sigue la versión semántica. Esto significa que la versión que especificas en tu archivo cargo.toml debe coincidir con la versión de Wasm que tienes instalada en tu máquina. Además, para admitir WebAssembly, debes marcar tu tipo de caja como c.lib. Esto le indicará a Rust que compile tu código como una biblioteca dinámica que puede ser cargada por un runtime compatible con C, como Node.js. Entonces, compilar Rust a WebAssembly es un proceso de dos pasos. Primero, debes ejecutar cargo.build para crear un artefacto de WebAssembly compilado, que tendrá la extensión .wasm, y luego agregarás wasm.bindgen para generar los enlaces de Node.js y TypeScript que utilizarás para importar el módulo wasm compilado. Por supuesto, si wasm.bindgen admitiera todas las estructuras de datos comúnmente utilizadas de Rust y las convenciones de TypeScript, esta charla ya habría terminado, y claramente ese no es el caso. Entonces veamos cómo podemos solucionar esto.

3. Funciones de Rust y WebAssembly

Short description:

Definamos funciones de Rust que tomen un número, lo dupliquen y lo devuelvan. La sintaxis de Rust puede ser abrumadora, pero podemos importar la biblioteca wasm.bindgen y generar enlaces para las funciones. Tenemos funciones para enteros de 64 bits y números de punto flotante. La declaración de TypeScript generada conserva los nombres de las funciones y asigna los tipos de números correspondientes.

Entonces, para nuestro primer ejemplo, veamos cómo podemos definir funciones de Rust que tomen un número, lo dupliquen y lo devuelvan al llamador. Sé que la sintaxis de Rust puede ser abrumadora, así que ten paciencia. Primero importamos la biblioteca wasm.bindgen. Luego le decimos a Rust que genere enlaces para la función que sigue, que se compilará a WebAssembly. Y cada vez que veas un código con un hashtag y un corchete cuadrado, eso significa que es una macro de Rust, un tipo especial de función que se expande para generar código en tiempo de compilación. Definimos una función pública, duplicate underscore U64, que toma un entero de 64 bits asignado, lo multiplica por dos y lo devuelve. La otra función es similar, pero utiliza números de punto flotante en su lugar. Y wasm.bindgen genera la siguiente declaración de TypeScript que ves en la parte inferior. Vemos que los nombres de las funciones se conservan tal cual. Los números U64 se asignan a BigInt y los números F32 son simplemente números en TypeScript porque realmente no tienen un tipo dedicado.

4. Funciones de Conversión de Cadenas

Short description:

Aquí tienes un ejemplo con cadenas. Tenemos una función que convierte una cadena a mayúsculas y otra función que convierte un entero de 64 bits con signo en una representación de cadena. Es importante tener en cuenta las diferencias de codificación entre Rust y JavaScript para las cadenas.

tipo de punto flotante. Aquí tienes un ejemplo similar con cadenas. A la izquierda, tenemos una función de dos mayúsculas que toma una cadena y devuelve una nueva cadena en mayúsculas. Observa que en este caso, especificamos un nombre personalizado para la función de los enlaces de JS y usamos la macro WasBinds para eso. A la derecha, tenemos una función NtlString que toma un entero de 64 bits con signo y devuelve una representación de cadena de este. Ten en cuenta que las cadenas en Rust están codificadas en UTF8. Sin embargo, en JavaScript, están codificadas en UTF16. Y esto es algo de lo que debes ser consciente, especialmente si estás manipulando cadenas que pueden contener emojis o caracteres no latinos.

5. Using Functions in TypeScript

Short description:

¿Qué sucede cuando intentamos usar estas funciones en TypeScript? Si pasamos tipos compatibles, funcionan como se espera. Pero si evitamos las validaciones de TypeScript y pasamos tipos incompatibles, obtendremos errores en tiempo de ejecución. Las estructuras de datos complejas como las estructuras tienen un comportamiento inesperado al generar enlaces de TypeScript. El código generado filtra detalles internos y carece de un constructor. Envolver cadenas en una estructura causa errores de compilación. Las enumeraciones funcionan uno a uno con las enumeraciones de TypeScript, pero pueden ser problemáticas. Las uniones discriminadas, o uniones objetivo, no son compatibles con WasBindgen.

¿Qué sucede cuando intentamos usar estas funciones en TypeScript? Bueno, si pasamos tipos compatibles con las declaraciones de TypeScript, funcionan como se espera en tiempo de ejecución. Pero si escapamos de las validaciones de TypeScript disfrazando una cadena como un número entero grande y llamamos a la función 'n to string' con eso, bueno, en ese caso obtendremos un error de sintaxis en tiempo de ejecución porque la función espera un número pero se está llamando con una cadena.

¿Qué sucede si necesitamos estructuras de datos más complejas? Aquí tienes un ejemplo con nuestra estructura 'scholars' que envuelve valores como números, caracteres o booleanos. Digamos que queremos una función que extraiga el valor de uno de los campos, a saber, la letra. Si tuviéramos que escribir manualmente los enlaces de TypeScript para esto, definiríamos escalares como un diccionario tipado que llamamos 'construct' en su lugar y escribiríamos el campo 'letter' como una cadena porque TypeScript realmente no distingue entre cadenas de un solo carácter y cadenas de varios caracteres. Sin embargo, esto no es lo que hace WasBindgen y esto es lo que obtiene, lo que crea y aunque los cuatro miembros de la estructura tienen los tipos que esperamos, en realidad obtenemos una definición de clase escalar, no un tipo de diccionario. Además, vemos algunos detalles internos que se filtran en el código generado y eso es principalmente el método 'free' que no toma ningún argumento y no devuelve ningún valor. Esto no es algo que hayamos escrito en nuestro tipo Rust. Esto es algo que hace WasBindgen. ¿También te das cuenta de que falta algo más? Bueno, esta clase no tiene un constructor, ¿cómo creamos instancias de ella desde Node.js? Bueno, podemos intentar llamar al constructor JS predeterminado y asignar los campos manualmente. También necesitamos especificar una implementación predeterminada para este método 'free'. Sin embargo, si hacemos esto y pasamos una instancia de la clase Scalar a la función 'get letter', bueno, esto fallará en tiempo de ejecución con un error críptico: 'NullPointerPassToRust'. Resulta que podemos solucionar esto definiendo manualmente un constructor en Rust que tome los cuatro miembros de la estructura como argumentos utilizando la macro constructor y llamando al constructor desde TypeScript. Está claro que esta no es la mejor experiencia que podemos obtener, ¿verdad? Requiere código de plantilla y no es ergonómico para los desarrolladores de TypeScript. Por cierto, observa que el campo 'letter' se trunca automáticamente a una cadena de un solo carácter, aunque lo inicialicemos con una cadena más larga. Y ¿qué sucede si envolvemos cadenas en una estructura, de manera similar a como lo hicimos con los estudiosos? Este código no se compilará. Eso se debe a que las cadenas en Rust no se pueden copiar y WasBindgen necesitará copiar cadenas. Y una forma de solucionar el problema es hacer que WasBindgen clone la cadena con un atributo de macro dedicado, 'getter with clone', pero esto no es algo de lo que un desarrollador de TypeScript deba preocuparse. Es un detalle interno del que no necesitamos ser conscientes. Aún así, obtenemos un enlace de clase en lugar de un tipo de diccionario y hemos visto lo engorroso y torpe que es de usar. ¿Qué hay de las enumeraciones? Mientras que las enumeraciones de estilo C se traducen uno a uno a enumeraciones de TypeScript, por lo que podemos ver que WasBindgen funciona sin problemas en este caso. Sin embargo, las enumeraciones a menudo se consideran una mala práctica en la comunidad de TypeScript, ya que son un poco difíciles de razonar debido a que el tiempo de ejecución de JavaScript no tiene noción de enumeraciones, ¿verdad? Por lo tanto, eso podría llevar a errores inesperados. Idealmente, preferiríamos obtener una unión de tipos literales, como la que vemos en la parte superior derecha. ¿Qué hay de las uniones discriminadas, o uniones objetivo? Son un patrón popular en TypeScript, especialmente cuando se codifican tipos de datos algebraicos. Y resulta que Rust las admite en forma de variantes de enumeración. En este ejemplo, tenemos el tipo 'Either' que en un momento dado codifica un resultado numérico exitoso, con un constructor 'Ok', o un mensaje de error, con un constructor 'Error'. Sin embargo, las variantes de enumeración no son compatibles con WasBindgen, como nos indica el mensaje de error del compilador, por lo que no podemos usarlas tal como están.

6. Supporting Rust Data Types in JavaScript

Short description:

WasBindgen proporciona soporte parcial para vectores, pero solo para tipos numéricos. Es limitado y no es ideal para los desarrolladores de TypeScript. Serde es una biblioteca no estándar que proporciona utilidades de serialización y deserialización para Rust. Nos permite trabajar con más tipos de datos de Rust en JavaScript al exponer funciones que consumen y devuelven cadenas codificadas en JSON. La SerDeWasmBindingCrate ofrece un enfoque más eficiente con integración binaria nativa, admitiendo variantes de enumeración, generando vectores y mapas. Sin embargo, el uso de argumentos de valor js en funciones de Rust sacrifica la seguridad de tipos.

Finalmente, WasBindgen proporciona soporte parcial para vectores homogéneos, pero solo para tipos numéricos, que se traducen a instancias de matrices tipadas. Y son esencialmente útiles solo cuando se manipulan datos binarios en bruto. Están bastante lejos de las matrices de propósito general estándar que normalmente deseamos. Además, los vectores de tipos no primitivos, vectores anidados o tuplas no son compatibles en absoluto. Entonces, WasBindgen proporciona las herramientas básicas para portar bibliotecas de Rust a Node.js. Pero no es ergonómico ni ideal para los desarrolladores de TypeScript y en general es bastante limitado. ¿Podemos hacerlo mejor que esto?

Bueno, la primera biblioteca no estándar que todo desarrollador de Rust suele encontrar es Serde, que proporciona macros y utilidades para serializar y deserializar tipos comunes de Rust en varios formatos con un mínimo de código repetitivo. Un primer paso para admitir más tipos de datos de Rust en JavaScript es exponer funciones que consuman y devuelvan cadenas codificadas en JSON, que luego podemos analizar y convertir en cadenas en Rust a través de los rasgos de serialización y deserialización de Serde. También he enumerado las dependencias que necesitamos agregar a nuestro archivo cargo.toml y nuestras versiones para la conveniencia de todos. Así es como funcionaría. Primero importamos Serde, luego lo aplicamos a una estructura o enumeración de Rust para que se vuelva automáticamente serializable y deserializable. Piensa en esos rasgos como interfaces necesarias para traducir estructuras de datos a formatos como JSON, y piensa en la macro derive como algo que implementa esos rasgos por nosotros. Luego definimos una función pública de cadena a cadena con la macro WasmBindgen que ya hemos usado. Luego analizamos la cadena de entrada que asumimos que está codificada en JSON en la estructura de estudiosos que definimos anteriormente. Calculamos el resultado y lo serializamos de nuevo a JSON. Y luego lo devolvemos al llamador. Observa que el enlace de TypeScript está técnicamente tipificado, pero no es muy útil, ya que podríamos pasar cualquier JSON o incluso una cadena que no sea JSON en absoluto y TypeScript aún lo aceptará en tiempo de compilación, aunque resultará en un error en tiempo de ejecución. La serialización JSON puede ser costosa en la práctica, por lo que SerDeWasmBindingCrate propuso un enfoque más eficiente que proporciona una integración binaria nativa de SerDe con WasmBinding. Por cierto, el proyecto es mantenido actualmente por CloudFlare y nuevamente, dado que se basa en Serde, obtenemos soporte para muchos otros tipos que podemos usar en JavaScript. Las diferencias notables con el enfoque básico de WasmBinding son que las variantes de enumeración se pueden traducir a uniones etiquetadas. Obtenemos soporte para generar vectores y también soporte para mapas.

De manera similar al ejemplo anterior, podemos definir una estructura escalar. En realidad, esto es un subconjunto del ejemplo. Podemos exponer una función pública que tome el valor escalar como entrada y devuelva su campo de letra a WasmBinding. Sin embargo, observa que esta vez los argumentos de Rust están tipificados como valor js, que modela cualquier valor que se pueda pasar o recibir de JavaScript. Luego depende de nosotros convertir estos valores js en tipos reales. Y lo haremos usando la utilidad Std WasmBinds from value y luego podemos convertir este resultado nuevamente en un valor js. Y sin entrar en demasiados detalles, vemos que la firma de la función nos dice que el resultado es un valor js o un tipo de error específico proporcionado por Std WasmBinds. Específicamente, es un WasmError. Sin embargo, si usamos este enfoque, perdemos por completo la seguridad de tipos, ya que el valor js puede

7. Integración perfecta con tspy

Short description:

Descubrimos tspy, una herramienta mágica que genera enlaces seguros y ergonómicos para integrar sin problemas funciones de Rust en aplicaciones de TypeScript con WebAssembly. Elimina la necesidad de conversiones manuales y proporciona enlaces fuertes de tipos tardíos. Demostraremos su uso con variantes de Enum y el proceso de serialización. WebAssembly es ideal para tareas intensivas de CPU y lógica compleja, pero carece de soporte de entrada-salida. TSFI es la mejor solución para enlaces seguros de tipos, aunque depende en gran medida de la magia de macros. Los contenedores genéricos como vectores y mapas hash requieren especificar el tipo genérico y envolverlos en una estructura o variante de Enum. Echa un vistazo al ejemplo de uso de TSFI en Lira, un motor de búsqueda de texto completo basado en TypeScript con soporte de WebAssembly.

literalmente ser cualquier valor. Por lo tanto, está tipado como 'any' en TypeScript y no es realmente útil. Así que comenzamos este viaje en un esfuerzo por integrar sin problemas funciones de Rust para estructuras de datos en aplicaciones de TypeScript con WebAssembly. Y parece que deberíamos rendirnos. A menos que tal vez haya una herramienta mágica que pueda ayudarnos generando enlaces seguros de tipos y ergonómicos. Bueno, afortunadamente esa herramienta existe. Se llama tspy y, sinceramente, me encanta. Admite todo lo que hemos visto hasta ahora, pero no necesita ninguna conversión manual y viene con enlaces fuertes de tipos tardíos. Veremos en un segundo que vamos a necesitar un poco más de macros para que las cosas funcionen. Pero aún así, es una gran mejora respecto a los enfoques anteriores. También debemos tener en cuenta que necesitamos instalar tspy con la marca de función JS, lo que nos dará una integración nativa de JavaScript. De lo contrario, utilizará la serialización JSON de forma predeterminada.

Como demostración, adaptaremos el ejemplo anterior utilizando variantes de Enum, que queríamos que se tradujeran a uniones objetivo en TypeScript. Entonces, vemos que necesitamos derivar los rasgos de SerDes, así como el nuevo rasgo de tspy. También necesitamos usar una nueva macro de tspy para indicar a Wasp bind que compile algunos tipos de datos, ya sabes, un tipo de datos que de otra manera no sería compatible con Wasp binding. De hecho, Wasp ABI significa Interfaz Binaria de Aplicación WebAssembly y describe cómo llamar a funciones entre lenguajes en WebAssembly. Luego definimos la variante either familiar con un giro que es común a todos los enfoques que usan SerDe. Necesitamos decirle a Rust cómo serializar esto en una variante porque, ya sabes, esto podría suceder de muchas maneras y para obtener uniones de etiquetas idiomáticas como las que vemos a la derecha, tenemos que decirle a Rust que el nombre de la variante debe asociarse con su clave dominante, es decir, la etiqueta de guion bajo, y que el contenido de la variante, que se define entre los paréntesis del constructor, debe asociarse a una propiedad llamada valor. Luego podemos definir una función que, por ejemplo, tome una instancia de either y devuelva su representación en cadena. Observa que realmente no requiere que escribamos ningún código de plantilla de conversión de tipos y se traduce en una definición limpia de TypeScript. Al igual que SerD vs BindGen, podemos definir un valor either en JavaScript sin necesidad de ningún constructor. Simplemente podemos crearlo en el momento como un diccionario. Pero esta vez obtenemos garantías de TypeScript, por lo que podemos aprovechar el compilador de TypeScript para evitar escribir errores tipográficos en nuestros tipos de datos. Así que resumamos lo que hemos aprendido hasta ahora. WebAssembly está aquí para quedarse, y es bueno para tareas intensivas de CPU que de lo contrario serían demasiado lentas en JavaScript puro, o para trasladar lógica compleja ya existente a la web. Piensa en Figma. Sin embargo, actualmente proporciona casi ningún soporte de entrada-salida. Entonces, si necesitas interactuar con el mundo exterior desde tus funciones, es mejor que te quedes con NAPI por el momento. Hemos iterado a través de varios enfoques para portar funciones de Rust a Node.js, y hemos observado que hay limitaciones o una experiencia de desarrollo incómoda, especialmente para aplicaciones de TypeScript. Finalmente, hemos visto que la mejor solución para enlaces seguros de tipos, TSFI, todavía es relativamente nueva. Una advertencia es que su código fuente depende en gran medida de la magia de macros, ¿verdad? Y eso podría ser un obstáculo para alguien. Además, para cualquier conjunto de enfoques, y eso incluye TSFI, no puedes simplemente usar contenedores genéricos como vectores o mapas hash directamente en una función que enlaces a WebAssembly. En realidad, primero debes especificar el tipo genérico. Entonces, tienes que hacer, tienes que decir, un vector de cadenas y luego tienes que envolverlo en una estructura o variante de Enum que luego expones a SerDe a través de los rasgos serializados o deserializados y luego lo usas en tu función. Y si quieres ver un ejemplo de TSFI siendo utilizado en la práctica, puedes revisar una solicitud de extracción en línea que introdujo soporte de WebAssembly a Lira, un motor de búsqueda de texto completo escrito en TypeScript por Mikhail Eriva, que creo que también habló aquí en el Congreso de Node. Mikhail Eriva estaba bastante satisfecho con las mejoras de rendimiento. Y eso es todo por mi parte. Soy Bertos Ghebel, puedes encontrarme en Twitter y GitHub, también puedes encontrar material adicional y ejemplos de código para esta charla en mi repositorio, node-congress-2023. No dudes en hacer preguntas adicionales ahora mismo o más tarde en Twitter, y gracias por tu atención.

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

Utilising Rust from Vue with WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.
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.
It's a Jungle Out There: What's Really Going on Inside Your Node_Modules Folder
Node Congress 2022Node Congress 2022
26 min
It's a Jungle Out There: What's Really Going on Inside Your Node_Modules Folder
Top Content
Do you know what’s really going on in your node_modules folder? Software supply chain attacks have exploded over the past 12 months and they’re only accelerating in 2022 and beyond. We’ll dive into examples of recent supply chain attacks and what concrete steps you can take to protect your team from this emerging threat.
You can check the slides for Feross' talk here.
React's Most Useful Types
React Day Berlin 2023React Day Berlin 2023
21 min
React's Most Useful Types
Top Content
We don't think of React as shipping its own types. But React's types are a core part of the framework - overseen by the React team, and co-ordinated with React's major releases.In this live coding talk, we'll look at all the types you've been missing out on. How do you get the props type from a component? How do you know what ref a component takes? Should you use React.FC? And what's the deal with JSX.Element?You'll walk away with a bunch of exciting ideas to take to your React applications, and hopefully a new appreciation for the wonders of React and TypeScript working together.
Towards a Standard Library for JavaScript Runtimes
Node Congress 2022Node Congress 2022
34 min
Towards a Standard Library for JavaScript Runtimes
Top Content
You can check the slides for James' talk here.

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.
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.
Node.js Masterclass
Node Congress 2023Node Congress 2023
109 min
Node.js Masterclass
Top Content
Workshop
Matteo Collina
Matteo Collina
Have you ever struggled with designing and structuring your Node.js applications? Building applications that are well organised, testable and extendable is not always easy. It can often turn out to be a lot more complicated than you expect it to be. In this live event Matteo will show you how he builds Node.js applications from scratch. You’ll learn how he approaches application design, and the philosophies that he applies to create modular, maintainable and effective applications.

Level: intermediate
Build and Deploy a Backend With Fastify & Platformatic
JSNation 2023JSNation 2023
104 min
Build and Deploy a Backend With Fastify & Platformatic
WorkshopFree
Matteo Collina
Matteo Collina
Platformatic allows you to rapidly develop GraphQL and REST APIs with minimal effort. The best part is that it also allows you to unleash the full potential of Node.js and Fastify whenever you need to. You can fully customise a Platformatic application by writing your own additional features and plugins. In the workshop, we’ll cover both our Open Source modules and our Cloud offering:- Platformatic OSS (open-source software) — Tools and libraries for rapidly building robust applications with Node.js (https://oss.platformatic.dev/).- Platformatic Cloud (currently in beta) — Our hosting platform that includes features such as preview apps, built-in metrics and integration with your Git flow (https://platformatic.dev/). 
In this workshop you'll learn how to develop APIs with Fastify and deploy them to the Platformatic Cloud.
0 to Auth in an Hour Using NodeJS SDK
Node Congress 2023Node Congress 2023
63 min
0 to Auth in an Hour Using NodeJS SDK
WorkshopFree
Asaf Shen
Asaf Shen
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.JS backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.
Table of contents- A quick intro to core authentication concepts- Coding- Why passwordless matters
Prerequisites- IDE for your choice- Node 18 or higher