La improbable amistad entre React y Rust

Rate this content
Bookmark
26 min
20 Oct, 2023

Comments

Sign in or register to post your comment.

AI Generated Video Summary

Esta charla explora la improbable amistad entre React y Rust, mostrando cómo pueden usarse juntos. El orador demuestra la codificación en vivo y explica el proceso de llamar a las funciones de Rust desde JavaScript utilizando el marco de Tauri. La charla también cubre la recuperación de información del sistema y detalles del disco utilizando la biblioteca sysinfo de Rust. El orador enfatiza la importancia de la serialización y muestra un botón y un lector de tarjetas SD como ejemplos de aplicaciones prácticas.

1. Obsesión con los Aeropuertos

Short description:

Estoy extrañamente obsesionado con los aeropuertos. Pensé lo mismo sobre los aeropuertos. Eso no es cierto porque luego fui a Luton y mi vida cambió para peor.

Entonces, vamos a sumergirnos. Bueno, en realidad no tengo que hacer nada en la computadora, así que podemos simplemente — sí, ahí vamos. Ese es mi ratón, como pueden ver, y quiero decir que yo — no soy un experto en obsesionado con los aeropuertos. Estoy extrañamente obsesionado con los aeropuertos. Todavía estoy esperando a la gente, así que voy a hablar de aeropuertos durante, como, un minuto. Entonces, como, sé que hay algunas personas aquí de Portugal y cuando eres de Portugal, asumes que todo lo que hace tu país es, como, por debajo de la media de otros países de la UE, así que pensé lo mismo sobre los aeropuertos. Eso no es cierto porque luego fui a Luton y mi vida cambió para peor. Fue como un momento de realización. Pensé, oh, Portugal no es tan malo. Quiero decir, todavía me fui, pero seguro.

2. La improbable amistad entre React y Rust

Short description:

Voy a hablar sobre la improbable amistad entre React y Rust. Mi nombre es Sarah y soy ingeniera fundadora en Axo.dev. Hacemos herramientas de desarrollo principalmente para la comunidad de Rust. Rust no es tan malo. Si algo se construye, entonces es muy probable que funcione. Estoy aquí para hacer que mires el código de Rust y te quedes como... ¿Qué diablos? Vamos a hablar sobre Tari, un constructor de aplicaciones nativas que no utiliza JavaScript en el backend.

Vale. Dame un poco de tiempo para que la gente entre. Pero, sí. Entonces, voy a hablar sobre la improbable amistad entre React y Rust.

Hace unos seis meses, permíteme presentarme. Entonces, mi nombre es Sarah, o Sarah, pero si me llamas Sara, te responderé en portugués y no tendrás idea de lo que está pasando, así que por favor llámame Sarah. Eso confunde a mi cerebro. Mi nombre es Sarah y soy, de nuevo, originalmente de Portugal. Soy ingeniera fundadora en Axo.dev. Axo.dev es una empresa muy pequeña. Estamos completamente... Olvidé mi teléfono. Nathaniel, ¿puedes traerme mi teléfono? Nathaniel no está allí. ¿Señor? ¿Puedo tener mi teléfono? ¡Necesito mi trampa! Estaba tratando de ser un adulto y decir, no voy a llevar mi teléfono a una charla.

Vale. Entonces, ambos... Básicamente hacemos mucho como... Quiero decir, puedes... Si mi madre pregunta, digo que trabajo en computadoras. Digo que hacemos herramientas de desarrollo principalmente para la comunidad de Rust. Entonces, he estado haciendo Rust. Y Rust no es tan malo. No voy a decir que es fácil. Pero te acostumbras. Te acostumbras a lo bueno que es en términos de... Si algo se construye, entonces es muy probable que funcione. Y eso es agradable. ¿Verdad? Eso es muy agradable.

Entonces, ¿cuál es mi propósito aquí hoy? Estoy aquí para hacer que mires el código de Rust. Estoy aquí para hacer que lo mires y te quedes como... ¿Qué diablos? Y te quedes como... Oh, así es como se sintió cuando fue a Luton. Sí, así es como me sentí cuando fui a Luton. No he vuelto a Luton. Me niego a volver a Luton. Sé que ahora hay un tranvía, y no tienes que tomar el autobús. No me importa. No volveré a Luton. Vale. Entonces, vamos a hablar de Tari.

Vale. No puedo ver a nadie, así que voy a pedirte que hagas un poco de ruido si has oído hablar de Tari. Vale. No tengo idea de qué porcentaje es eso. Así que todavía voy a hablar de ello. Entonces, Tari es... Entonces, todos conocen Electron. Tari es la misma idea. Puedes construir aplicaciones nativas, pero en lugar de usar JavaScript en el backend, como un animal... Estoy bromeando.

3. Rust, JavaScript y Codificación en Vivo

Short description:

Rust es rápido y tiene una buena integración con el sistema operativo. Hay una mayor superposición entre JavaScript y Rust de lo que podrías pensar. La semana pasada, estuve presentando en Eurorust y había una masterclass de React en Bruselas al mismo tiempo. Ahora, pasemos a la codificación en vivo donde crearemos una pequeña aplicación para mostrar información del sistema.

Usas Rust. Entonces, lo que es agradable de esto es que, en primer lugar, Rust es rápido. Pero también, Rust tiene una muy buena integración con tu sistema operativo, porque Rust es un lenguaje de nivel de sistema. Entonces, sabes lo que eso significa. Pero el punto es, es agradable.

También... Oh, mierda, olvidé hacer la broma. Gracias a todos por estar aquí en este hermoso día, el día que sale Super Mario Wonder. Y aparentemente también Spider-Man. Que es la nueva discusión de Barbie Oppenheimer. Además, hay una mayor superposición entre JavaScript y Rust de lo que podrías pensar. También, de hecho, la semana pasada, estuve presentando en Eurorust. No daré charlas sobre Rust, porque me corregirán. Pero estuve presentando en Eurorust, porque mucha gente de mi empresa estaba allí. Y no es mi empresa. Mucha gente de la empresa en la que trabajo estaba allí. Y exactamente el mismo día, había una masterclass de React. En Bruselas. Nunca he estado en Bruselas. No es como el lugar donde todos van. No es Londres. No es París. ¿Cuántas personas han ido a Bruselas? Y si eres de Bélgica, eso no cuenta. Mira, vi una mano. Nadie va a Bruselas. Pero había dos conferencias exactamente al mismo tiempo. Porque pensaron, los de JavaScript, que no habría superposición. Y resulta que mucha gente que hace Rust viene de JavaScript. Lo cual es interesante. No sé lo que significa, pero es interesante. Vale.

Así que ahora vamos a hacer codificación en vivo. Porque no me gusta escuchar mi propia voz durante 20 minutos. Así que vamos a hacer un poco de codificación en vivo. Y básicamente vamos a hacer una pequeña... Este es mi talk.md. Aquí vamos. Vamos a hacer una pequeña aplicación que te muestre información del sistema de mi ordenador. Sí. Quiero decir, eso es todo. Así que tengo una aplicación Tari bastante básica aquí. He descargado un par de paquetes para el frontend. He descargado principalmente... Lo importante que descargué fue... Para el frontend, descargué Mantine UI para que no tengas que verme escribiendo CSS, y mierda, las cosas no parecen una mierda. Y hice algunos componentes para que las cosas no parezcan una mierda. Para que suene más increíble. Y ellos están como, oh mierda, ella hizo eso en el escenario. Sí. También descargué Serde.

4. Descargando Sysinfo-rs y Serde

Short description:

Descargué dos cosas: Sysinfo-rs y Serde. Serde es como JSON.parse con superpoderes y tipos que te matarán. Rust no tiene ninguno como TypeScript. Los dos archivos que necesito están en las carpetas source y sourced Tauri.

Eso es para la parte de Rust. Descargué dos cosas. Sysinfo-rs, que obtiene información de tu ordenador, y Serde. Una forma fácil de explicar Serde es si JSON.parse tuviera superpoderes y pudieras tipificarlo. Eso es básicamente Serde. Imagina todo lo que tienes en JavaScript, pero con tipos. Pero no como los tipos de TypeScript. Como, tipos que te matarán. TypeScript... No hay ningún any en Rust. ¿Quieres un any? No. No, en serio. Es muy doloroso. Y a veces es muy doloroso. Creo que hay algunas formas malditas de hacerlo.

Entonces, como puedes ver o no puedes ver... Espera. ¿Cómo es el... ¿Debería ponerlo más grande? Gracias. Vale. ¿Debería poner un tema claro para asustar a todos? Espera. Vamos. Tema de color... Night owl light. Ahí vamos. No voy a hacer esto. No me odio a mí mismo. Tanto. Tengo problemas de autoestima. Pero no son tan grandes.

Vale. Los únicos dos archivos que realmente necesito son estos dos. Así que realmente puedo hacer esto. Hermoso. Y... Ahí vamos. Estuve en Bélgica. Hablan francés. En esa parte. Por favor, no me corrijas. Sé que también hablan holandés. Vale. Entonces... Tenemos... Realmente necesito mostrarte las carpetas. Tenemos principalmente dos carpetas. Tenemos una source y tenemos una sourced Tauri. Lo que significa que la source es tu JavaScript y la sourced Tauri es ¿qué? Tus archivos Tauri. Que son archivos Rust. Archivos Rust y NRS.

5. Instalando la Extensión de Rust y Ejecutando la Aplicación

Short description:

Instala la extensión de Rust para VS Code. Así que vamos a iniciar esta aplicación. Ejecuta Yarn Tari Dev. Ejecutará tu servidor de desarrollo en Tari. Ahora dice hola, React Advanced. Tenemos una función llamada getInfo que devuelve una cadena que dice hola desde Rust. Pero, ¿cómo devolvemos esto? Además, las cadenas son dolorosas en Rust.

Instala la extensión de Rust para VS Code. De lo contrario, tu vida nunca... Por favor... Por el amor de Dios. Por todo. Es la que te dice todas estas cosas. ¿Cuáles son los tipos que se devuelven y todo ese tipo de cosas? Así que si vas a usar Rust, por favor hazlo. Y sí.

Así que vamos a iniciar esta aplicación. Así que solo voy a ejecutar... Eso es pequeño. Y eso no hace nada. ¿Sabes qué? Solo voy a ejecutar... No necesito esto para nada más. Eso es todo. Eso es realmente todo. ¿Qué dice eso? Vale. Así que ejecuta Yarn Tari Dev. Inicia tu... Sí, ¿hace Yarn Dev? ¿O npm ejecuta Tari? No me importa. El punto es, se ejecuta... Ignora estas advertencias. Sé que están ahí. Todo es parte de un plan. Todo saldrá al final. Yarn Tari Dev ejecutará tu servidor de desarrollo en Tari. Así que la parte de Rust y la parte de JavaScript. ¡Genial! Entonces, ¿dónde demonios está mi cosa? Ahí está. Vale, genial. Así que ahora dice, hola, React Advanced. ¡Hemos hecho una aplicación! Esa fue la pausa para el aplauso que nadie hizo. Gracias. Vaya, Jesucristo. Todos vinieron de Luton, veo. Bueno, también... Lo siento. Mi cerebro fue a... Había un tipo que hizo un cartel de bienvenida a Luton, y lo puso en un campo vacío cerca de Earthrow, y acabo de pensar en eso. Ese tipo es un jodido héroe. No creo que pueda maldecir en las conferencias de GitNation, y olvidé eso. Así que dice hola React Advanced. Eso no es muy impresionante porque está aquí. Todos podemos hacer esta parte de React. Vale, pero tengo una función aquí que es getInfo, que devolverá nuestra información, lo prometo. Y eso dice, devuelve una cadena que dice hola desde Rust, y eso es lo que realmente deberíamos estar devolviendo, ¿verdad? Pero no lo estamos. ¿Y cómo se llama realmente a esto? Ah, también, una cosa importante, main.rs es lo mismo que index.js. Puedes pensar en ello de esa manera. Así que Rust buscará main.rs. Entonces, ¿cómo devolvemos esto? Además, ¿por qué demonios tengo que escribir string from? Vale, si vas a hacer Rust, necesitas saber que las cadenas son dolorosas.

6. Llamando a las Funciones de Rust con Invoke

Short description:

Llegaremos a esa parte en una parte que es realmente un poco absurda, pero las cadenas en Rust son dolorosas. Entonces, ¿cómo llamamos a esto? Hacemos un use effect. Todo esto es en honor a Super Mario Wonder. Vale, entonces voy a crear un use effect. Y voy a crear una función llamada get info. Entonces, ¿cómo llamamos realmente a las funciones de Rust? Hay algo llamado invoke que viene de Tory que puedes usar para llamar a las funciones de Rust. Primero vamos a crear un estado. Entonces const info set info equals use state. Y luego lo que quiero hacer es decir vale, entonces const a lo que sea await invoke. Y voy a decir vale, invoca system info. Y vamos a hacer console.log. Oh, lo llamo i por alguna razón. Devolvamos info que no estamos usando. Y get info aquí. Eso suena bien. Déjame llamar a get info aquí. Déjame ejecutar esto cada vez que todo cambia. Oh, hay otra diferencia. Utiliza Firefox en lugar de Chrome. Y ahora realmente necesito llamarlo aquí. Entonces const info equals es así. Info. Equals use info.

Llegaremos a esa parte en una parte que es realmente un poco absurda, pero las cadenas en Rust son dolorosas. Hay como cuatro tipos de cadenas, y sí, eso es todo. Además, escribir esto es lo mismo que escribir esto. Si tu última línea no tiene un punto y coma, Rust asume que lo estás devolviendo.

Entonces, ¿cómo llamamos a esto? Hacemos un use effect. Todo esto es en honor a Super Mario Wonder. Todas estas voces. Vale, entonces voy a crear un use effect. ¿Por qué voy a crear un hook? Porque así es como escondes tu vergüenza. Const use info. Ahí vamos. Y quiero llamar a un use effect al inicio de esto. Y voy a crear una función llamada get info. Entonces const get info equals. Y esto necesita ser async. Ahí vamos. Vale, genial. Entonces, ¿cómo llamamos realmente a las funciones de Rust? ¿Y por qué hay un error en mi función de Rust? Oh, porque dejé esto. Vale, genial. Vale, ¿cómo llamo realmente a las funciones de Rust? Entonces, hay algo llamado invoke que viene de Tory que puedes usar para llamar a las funciones de Rust. Así que todos los invokes son por defecto async. Por eso esto es async.

Entonces, primero que nada, vamos a crear un estado. Entonces const info set info equals use state. Ahí vamos. Y luego lo que quiero hacer es decir vale, entonces const a lo que sea await invoke. Así que puedo importar invoke de Tory apps API. Y luego no hay autocompletado, en realidad. Así que solo voy a tener que venir aquí y ver cuál es el nombre de la función que exporté. Y puedes ver eso porque dice Tory command. Así que eso significa que es un comando que puedo llamar en JavaScript. Y voy a decir vale, invoca system info. Y vamos a hacer console.log. Oh, lo llamo i por alguna razón. Devolvamos info que no estamos usando. Y get info aquí. Eso suena bien. Entonces, déjame llamar a get info aquí. Y déjame ejecutar esto cada vez que todo cambia. Eso no era. ¿Cómo hice eso? Eso fue impresionante. Genial. Entonces. Oh, hay otra diferencia. Utiliza Firefox en lugar de Chrome. Entonces. Y ahora realmente necesito llamarlo aquí. Entonces const info equals es así. Info. Equals use info.

7. Devolviendo Información del Sistema

Short description:

¿Lo llamé use info? Lo hice. Y obtenemos un low de rust. Eso es genial. ¿Debería devolver esto? Probablemente. Solo ignora todos los errores, porque no tengo idea de qué son, y no estamos hablando de ellos ahora. Tengo un propósito, y estoy terminando esto.

¿Lo llamé use info? Lo hice. Mira eso. Surgiendo con los mismos nombres. Y obtenemos un low de rust. Eso es genial. ¿Debería devolver esto? Probablemente. Vale. Así que voy a hacer set info igual a I. Y luego puedo hacer esto. Así que en lugar de decir un low React advance, no sé por qué puse dos. Pido disculpas. ¿Cómo me atrevo? Todavía hay dos en este lado. Dios mío. Y ahora dice un low de rust. Vale. Genial. Solo ignora todos los errores, porque no tengo idea de qué son, y no estamos hablando de ellos ahora. Tengo un propósito, y estoy terminando esto. Vale.

8. Serializando Datos en Tari: Una Guía Práctica

Short description:

Todo lo que sale de Tari a JavaScript debe ser serializable. Serdai te permite crear cosas serializables. Queremos devolver la información del sistema, que incluye el nombre, la versión del kernel, la versión del sistema operativo y el nombre del host. Para especificar el tipo de retorno, usamos 'información del sistema'. Necesitamos invocar 'sysinfo' para obtener la información del sistema.

Así que hay una cosa que es muy importante saber sobre Tari. Es que todo lo que sale de Tari a JavaScript debe ser serializable. Y lo que quiero decir con serializable es que puedes hacer un JSON parse de ello, básicamente. Y eso es importante debido a esta cosa que instalé llamada Serdai, que permite crear cosas serializables. Así que hice algunos trucos. Es este truco. Vale. Así que esto es lo que vamos a devolver. ¿Verdad? Primero voy a comentar esta parte del retorno. Pero vamos a repasar esto. Así que esto significa que puede ser serializable, y será serializado por Serdai. Y vamos a devolver un sistema. Vamos a devolver la información del sistema que tiene el sistema en él, que tiene el nombre, que es usualmente, como, MacBook Pro. Bla, bla, bla. Versión del kernel. Tiene una versión del sistema operativo y tiene un nombre de host. Oh, no, ese es el que... Descubriremos cuál es cuál. Llegaremos allí. No te preocupes por ello. Vale. Genial. Así que esto es lo que queremos devolver. ¿Y cómo especificas realmente algo que quieres devolver? Así que en este caso, estoy devolviendo una cadena, pero quiero devolver una estructura, que puedes pensar como una interfaz o un tipo. En realidad, todavía no sé la diferencia entre una interfaz y un tipo, y no creo que nadie lo haga. Y moriré en esta colina. Así que simplemente dices, como, vale, quiero devolver un sistema de retorno. No, no, no, no, no. ¿Cómo lo llamé? Quiero devolver la información del sistema. Vale, así que para eso, primero necesitamos obtener nuestra información del sistema, ¿verdad? Eso sería importante. Así que si guardo ahora, obtendré un error inmediato que dice, chica, eso no es una información del sistema. Y yo estoy como, ¿sabes qué? No lo es. Pero lo haré uno. Vale. Así que lo primero que necesito hacer es invocar sysinfo, que es la biblioteca que estoy usando. Y para hacer eso, digo, vale, que esto sea igual a sistema, que ya está importado. Así que puedes verlo aquí. Pero si lo quito, esto debería importarlo automáticamente. Así que si hago sistema, sí, ese es el segundo. Ahí vamos. Eso lo importó. Y tienes un nuevo todo nuevo todo, uno de los nuevos todo. Así que haces esto y luego haces nuevo todo. ¿Y qué hace eso? Eso instancia la cosa y va a buscar va a buscar el inglés no es mi lengua materna. Estoy tratando de comunicarme aquí. Créeme, si no eres un hablante nativo de inglés, esto funciona. La gente se siente realmente mal por burlarse de tu inglés. Funciona tan bien, demasiado bien. Nuevo uno. Eso es genial.

9. Recuperando y Mostrando Información del Sistema en Rust

Short description:

Creemos una variable llamada sistema para obtener la información del sistema. Podemos recuperar el nombre del host, la versión del kernel, la versión del sistema operativo y otros detalles utilizando el objeto 'sys'. Finalmente, podemos devolver la información del sistema y mostrarla utilizando el componente 'Información del Sistema'.

Vale, tenemos eso. Vale, entonces vamos a obtener realmente la información del sistema. Vale, en primer lugar, vamos a crear una variable llamada sistema. ¿Por qué es let? Porque las constantes son realmente constantes agresivas, las constantes tienen que ser definidas. Si creas una constante, tienes que definir el tipo de la constante y es todo un lío y no queremos hacer eso. Así que estamos usando let, así que let sistema va a ser algo. Va a ser un sistema de retorno, que es lo que tenemos aquí, que va a tener todas estas cosas. Así que hagamos return system. Y así es como indicas si esto va a ser un objeto, que es una estructura de este tipo y lo devuelves. Así que ahora puedo hacer control espacio. Opción. Es opción. Sí, y puedo decir todas las cosas que están en él. Y esto dice que es una opción de cadena. Así que opción de cadena significa que puede haber una cadena. Puede que no haya nada. Nunca habrá nada más. Créeme, Rust te gritará si hay algo más. Nombre del host, y eso es simplemente, como, vale, sys dot host name. Y eso es todo. Así que eso devolverá el nombre del host. Y podemos hacer lo mismo para todos ellos, versión del kernel, sys dot kernel version. También, tu ordenador es sys. Ahora lo sabes. Yo no lo sabía. Lo descubrí. Sys dot name. ¿Y cuál era el otro que tenía? Era la versión del sistema operativo, así que sys dot OS version. Genial. Así que ahora tenemos esto. Así que eso no devuelve realmente un error. Y ahora podemos simplemente devolver una información del sistema. ¿Cómo lo hacemos? Vale. Decimos información del sistema, y lo devolvemos con el sistema igual al sistema. Funciona de la misma manera que JavaScript, en el que no tienes, si la clave y el valor son los mismos, no tienes que, simplemente no tienes que. Ya sabes a lo que me refiero. Inglés. Vale. Así que ahora, en lugar de hacer esto, déjame, json dot stringify info null 2, sí, ahí vamos. Así que ahora tenemos la información de mi ordenador. Así que tenemos un nombre de host, que es, de nuevo, master MacBook Pro, no cambié el nombre de este ordenador, como un idiota, una versión del sistema operativo, no sé lo que significa eso, y el kernel versión de mi MacBook. Tengo un MacBook, en caso de que no hubiera sido completamente obvio por el hecho de que he estado compartiendo mi pantalla durante los últimos diez minutos. Vale. Genial. Así que tenemos esto, y hice algunos componentes, ya sabes, sofisticados. Así que simplemente usemos el componente que ya hice, que se llama Información del Sistema, y luego aquí, pasamos la info.System. Y sí, estoy haciendo esto, y luego estoy haciendo esto, y luego estoy guardando, y luego hay un error porque esto no está cerrado. Ahí vamos, y esto no está importado. Así que déjame importar, Información del Sistema, sí, lo sé, lo sé, lo siento. Sí, lo sé, lo sé, lo siento, pensé que VS Code lo importaría por sí mismo.

10. Recuperando Información del Disco

Short description:

Información del sistema y discos. Voy a mostrarles la belleza de Rust. Si obtengo this.name, esto realmente devolverá algo llamado OSString, que puedo convertir en un STR, que no es una cadena, pero es una porción de cadena. Así que a STR, y eso me devolverá una opción, lo que significa que puede que no haya una cadena, así que necesito estar consciente de que puede que no existan. Así que no puedo devolver esto. Y lo que quiero hacer es decir, está bien, si esto no existe, simplemente ignóralo, simplemente quema mi antigua aplicación. Así que necesito desempaquetarlo, y esto todavía devuelve un STR, que luego necesito decir, está bien, eso está bien. Y necesito ser como una cadena. Creo que es como una cadena. No es una cadena. Continúa. Nunca termina. Oh, es toString. Lamento mucho eso. ¿Cómo me atrevo? ToString, y ahora eso es una cadena. Y creo que en mi país eso es hermoso. Así es como mostramos amor en mis 50 segundos. Está bien, genial. Así que ahora simplemente devuelvo los discos, ¿verdad? Eso debería estar bien. Debería... Sí, no hay errores. Genial. Y no aparecen errores. Así que eso está bien. Así que permítanme hacer un pequeño pre aquí. Tengo mala audición. No tengo idea de qué era eso o si se suponía que debía escucharlo. json.stringifyInfo.Disks.

Información del sistema, y permítanme hacer lo mismo para los discos, así que no tenemos que hacer esto en una masterclass de nuevo, porque es incómodo. Alguien está parado aquí, es muy incómodo. Así que sí, allá vamos. Así que tenemos la información de mi computadora con todas esas cosas, y lo último que quiero hacer, la crema de la crema, eso es todo mi francés. Eso ni siquiera es francés. Eso era inglés con acento francés. Les mostraré mis discos. Solo tengo un disco, ahora qué hay en mi disco. No sé qué diablos fue eso. Así que tenemos esto en cada computadora, y eso devuelve, está bien, así que eso devuelve un array, ¿verdad? y ¿qué es un array en Rust? Es un Vect. Vect. Así que digamos que es mute, y si dices mute, significa que esto va a cambiar. Por favor no me grites. Esto es igual, está bien, así que Vect, así. Esto es una macro, es solo una forma más agradable de escribir Vect new. No sé si pueden ver mis manos. Pero sí, así que ahora hagamos, vamos por cada disco, así que voy a decir por disco en sys.disks, quiero hacer algo, y lo que quiero hacer es decir discos, discos.push. Sí, eso es exactamente lo que quiero hacer. ¿Y qué quiero empujar en él? Quiero empujar un vect, un disco, así que ese es el tipo, y pongamos esto aquí, y tengo todas estas cosas, ¿verdad? Esto tiene sentido. Así que tengo algunas hojas para eso, porque no merecen verme escribir eso. Así que eso es prácticamente todo, excepto uno, porque creo que este es realmente divertido. Vale, chicos, a todos ustedes les va a encantar esto. Está bien, genial. Así que necesitamos obtener el nombre, ¿verdad? Y pensarías que sería simplemente como disk.name, pero voy a mostrarles la belleza de Rust. Así que si obtengo this.name, esto realmente devolverá algo llamado OSString, que puedo convertir en un STR, que no es una cadena, pero es una porción de cadena. Así que a STR, y eso me devolverá una opción, lo que significa que puede que no haya una cadena, así que necesito estar consciente de que puede que no existan. Así que no puedo devolver esto. Y lo que quiero hacer es decir, está bien, si esto no existe, simplemente ignóralo, simplemente como quemar mi antigua aplicación. Así que necesito desempaquetarlo, y esto todavía devuelve un STR, que luego necesito decir, está bien, eso está bien. Y necesito ser como una cadena. Creo que es como una cadena. No es una cadena. Continúa. Nunca termina. Oh, es toString. Lamento mucho eso. ¿Cómo me atrevo? ToString, y ahora eso es una cadena. Y creo que en mi país eso es hermoso. Así es como mostramos amor en mis 50 segundos. Está bien, genial. Así que ahora simplemente devuelvo los discos, ¿verdad? Eso debería estar bien. Debería... Sí, no hay errores. Genial. Y no aparecen errores. Así que eso está bien. Así que permítanme hacer un pequeño pre aquí. Tengo mala audición. No tengo idea de qué era eso o si se suponía que debía escucharlo. json.stringifyInfo.Disks.

11. Limpieza de Disco y Recuperación de Información

Short description:

¿Están todos disfrutando de esto? Espero que sí. ¿Alguien sabe qué hace el primer null? Tenemos dos discos. MacBook por defecto tiene dos discos. Uno de ellos no es un disco real, solo una partición. Tenía una función que limpia esto. Permítanme mostrarles. I.disks. Ahora tengo info.disks. Tengo un disco con 59 gigabytes libres. La crème de la crème, ahora tengo un getInfo.

¿Están todos disfrutando de esto? Espero que sí. Null 2. Vale, genial. ¿Alguien sabe qué hace el primer null? Y tenemos dos discos. Y la razón de eso, voy a mostrarles mi utilidad de disco, es porque MacBook por defecto tiene dos discos. Y uno de ellos no es un disco real. Es solo una partición en tu disco. Y no sé por qué, pero Linux hace lo mismo, así que tenía una función que simplemente limpia esto. Porque merecemos algo mejor.

Vale, así que voy a decir, setInfo igual a System. Y eso es I.system. Oop, no, no así, chico. I.system. Y luego, solo voy a decir, como, discos iguales, creo que se llama clean disks. Sí, eso viene de utils. Básicamente solo elimina esta basura. Es hermoso. Lo sé. Escribo funciones increíbles, increíbles. I.disks. Y esto debería hacer los discos, ya sabes, un disco. Oh, no, en realidad, lo convierte en no discos. Eso también es una op. Espera, espera, espera. ¿Por qué? Espera, ¿por qué era eso async? No hay, es un filtro. Vale. Lo arreglé. Así que, eso está bien. Eso fue genial.

Vale. Así que, tengo info.disks y tengo un par, tengo un pequeño componente que hace lo mismo cosa. Así que, permítanme decir info.disks. Tengo cero segundos. .map, vamos a hacer esto rápido. Vale. D. Vale, ahí vamos. No, no, no, no. No necesito eso. No puedo hacerlo rápido. Lo siento. Les fallé a todos. Y luego necesito hacer, vale, así que este es el disco. Ciérralo y debería tener un disco aquí. Ahí vamos. Tengo 59 gigabytes libres. Espera, espera, espera. Gracias. Gracias. La crème de la crème ahora, tengo un getInfo.

12. Creando un Botón y Lector de Tarjetas SD

Short description:

Voy a hacer un botón muy rápido. Dice refrescar. Este es un lector de tarjetas SD muy terrible. Pongo este pequeño malo aquí y funciona en mi computadora. Es de una de mis consolas portátiles retro. Si quieres revisar el código, está en el código QR, porque los códigos QR han vuelto, y está en mi GitHub. Por favor, siéntete libre de descargarlo. El código se ve mejor en él, lo prometo. Gracias y que tengas un gran día.

Voy a hacer un botón muy rápido. Voy a hacer un botón que al hacer clic, eso no es un clic. Vale, al hacer clic se ejecuta getInfo, ¿verdad? Entonces, lo que esto significa es que recargará todas las cosas y me dará todas las cosas nuevas porque y, oh, hermoso. ¿Guardé? Sí, vale, genial. Dice refrescar. Vale, genial. Probablemente no puedas ver esto, pero este es un lector de tarjetas SD muy terrible porque perdí el que era bueno que tenía. ¿Por qué es naranja? No lo sé. Pero tiene una tarjeta SD en él, y una tarjeta SD es un dispositivo extraíble que si yo, quiero decir, todos saben lo que es una tarjeta SD. Entonces, si pongo este pequeño malo aquí y funciona en mi computadora, aparentemente, vale, vamos. Hazlo. ¿No? ¿No? Sí. Vale. Es de una de mis consolas portátiles retro. Sí, tengo como cinco de ellas. No hablamos de eso. Soy genial con el dinero. Pero lo que pasa es que no aparece aquí. Así que si refresco ahora, tenemos dos discos, solo para asegurarme de que funciona. Y este tiene un pequeño icono en él. Intenté buscar como un, expulsarlos y no sé cómo. Pero eso es todo, sí. Así que con 0.0 segundos para terminar, solo quiero decir, si quieres revisar el código, está en el código QR, porque los códigos QR han vuelto, y está en mi GitHub. Por favor, siéntete libre de descargarlo. El código se ve mejor en él, lo prometo. Y sí, gracias y que tengas un gran día. Bien, vamos directo a las preguntas. Entonces Rust, esta es la primera vez en la mayoría de Rust que he visto, en un punto. Así que sí, necesitas disculparte. Pero fue realmente interesante, y Rust fue escrito también. Y esta pregunta está relacionada con eso, es, si usamos TypeScript, ¿hay una forma de saber el tipo que devolverá Rust invoke o generar tipos de TypeScript a partir de Rust? Honestamente, esa es una muy buena pregunta para la que no tengo una respuesta. Así que diría que vayan a la documentation de Torii, probablemente tendrán una respuesta para eso. Diría que eso es muy probable. Porque la mayoría de las personas que lo usarán querrán usarlo con TypeScript. Por supuesto, sí, eso parece una conexión natural en mi mente, también. Y luego la siguiente, así que yo, el tipo de marco que suelo usar cuando estoy haciendo cosas como esta es Electron, y la siguiente es sobre los compromisos entre Electron y Torii, supongo en performance, porque sé que he oído mucho sobre Rust, y performance es uno de ellos, pero sería genial entender si hay otros compromisos. Sí, entonces, creo que el principal compromiso, en términos de bueno para Torii, es el performance. Y no creo que, como, la integración del sistema operativo con Electron sea mala, pero obviamente Rust se ejecuta más rápido a nivel de sistema operativo. Y creo que el principal inconveniente de usarlo es que Rust es difícil, como, como, pasarás treinta minutos programando una cosa que simplemente no se compilará, y es algo frustrante cuando empiezas en ello. Entonces, como, si solo estás haciendo una aplicación que simplemente obtiene algo de internet y muestra una aplicación de React, entonces simplemente no uses Torii, no creo que tenga sentido. Pero si estás usando algo que implica ir a una red, quiero decir, la red de tu computadora o la computadora misma, diría Torii, porque es más rápido, y no me refiero solo a que se compila más rápido, quiero decir, como, obtendrá esta información mucho más rápido para ti. Como, está construido a nivel de sistema operativo, así que eso, creo que esos son los dos principales compromisos, como, tienes que entender que si lo haces con Torii, habrá una gran curva de aprendizaje si nunca has usado Rust, y como alguien que no, realmente no trabajó con cosas que tenían compiladores en él, puede ser frustrante, pero cuando se compila, hay un 90% de posibilidades de que funcione. Sí. Lo cual es bastante increíble. Tuve una vez donde algo se compiló y no funcionó, y resulta que había un error en la biblioteca que estaba usando. Eso es lo peor, eso es lo peor. Y tú... curiosamente, respondiste otra pregunta cuando hablaste sobre la alta curva de aprendizaje de ser un desarrollador de JS. Es una alta curva de aprendizaje. Sí. Sí, creo que, como, te acostumbras a ello, pero hay cosas como el rastreador de préstamos, que no entré en ello, pero básicamente, como, cuando usas un valor en Rust, tienes que, como, pedirlo prestado para usarlo de nuevo, y hay todo un tema sobre ello, y es algo que tienes que acostumbrarte, pero al final, te acostumbrarás, como, lleva, como, un mes o algo para acostumbrarte realmente a ello. Quiero decir, hay, como, dos cosas. Solo añades un ampersand antes, o dices as ref, y luego funciona, y simplemente, como, sí, seguro, lo que sea, y mejoras con el tiempo. Creo que es lo mismo que TypeScript. Al principio, solo pones un montón de n's. Sí. ¿No lo hacemos todos? Bien. Así que muchas gracias. Aplaudamos a Sarah una vez más. Gracias.

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

Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
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.
JSNation 2022JSNation 2022
22 min
Makepad - Leveraging Rust + Wasm + WebGL to Build Amazing Cross-platform Applications
In this talk I will show Makepad, a new UI stack that uses Rust, Wasm, and WebGL. Unlike other UI stacks, which use a hybrid approach, all rendering in Makepad takes place on the GPU. This allows for highly polished and visually impressive applications that have not been possible on the web so far. Because Makepad uses Rust, applications run both natively and on the Web via wasm. Makepad applications can be very small, on the order of just a few hundred kilobytes for wasm, to a few megabytes with native. Our goal is to develop Makepad into the UI stack of choice for lightweight and performant cross-platform applications. We intend to ship with our own design application and IDE.
Node Congress 2022Node Congress 2022
8 min
High Performance Node.js Powered by Rust and WebAssembly
In the post Moore’s Law era, due to limitations of the hardware, we need to squeeze more performance from the existing hardware. That means that the native code provides the best performance. However, the prevalence of native code on the server-side presents challenges to application safety and manageability. The rise and advent of Rust and WebAssembly offers new ways for developers to write high performance yet safe Node.js applications.
In this talk, I will cover the basics of Rust and WebAssembly, as well showcase how to go about their integration with Node.js. You will learn how and when to design a hybrid web application. How can you code the high performance functions in Rust in a Web Assembly virtual machine and finally how to tie everything together in a Node.js JavaScript application.
Node Congress 2023Node Congress 2023
22 min
Type-safe bindings for Node.js with Rust and WebAssembly
This talk will teach you how to write performance-critical Node.js modules without the burden of distributing platform-dependent artifacts and using the C/C++ toolchain. You will discover how to smoothly integrate Rust code into your Node.js + TypeScript application using WebAssembly. You will also learn how to avoid the typical WebAssembly serialization issues, and understand when other alternatives like Neon or Napi.rs are preferable. Together, we will cross the language bridge between Rust and Node.js while preserving the familiar DX you're used to.