Utilizando Rust desde Vue con WebAssembly

Hola a todos. Soy un líder técnico y hoy voy a mostrarles cómo pueden usar Rust desde Vue con WebAssembly. Así que comencemos. ¿Qué es WebAssembly? WebAssembly es un nuevo formato binario disponible en el navegador y es lo que la gente llama un objetivo de compilación en el sentido de que escribirías code en digamos Rust o C o C++, compilas eso a WebAssembly y luego puedes cargar ese WebAssembly usando Java strips y ejecutar ese WebAssembly. Esto te permite tener un code de alto rendimiento y menos memoria que si lo hubieras escrito en digamos Java strips. WebAssembly está disponible en todos los navegadores modernos. Entonces, ¿cómo lo usamos? Ahora voy a entrar en un ejemplo en un momento. Para este ejemplo he utilizado la Vue.js CLI para generar una plantilla pero he utilizado la versión Next. Explicaré por qué en un momento. Para el lado de Rust he instalado una herramienta llamada WasmPack y la razón es porque obviamente no queremos generar binarios normales de Rust, queremos estar vinculados a WebAssembly y hay algunos extras adicionales que necesitaríamos configurar. WasmPack hace todo eso por ti. Así que vamos a entrar en el code. Aquí tengo las plantillas que ya he generado. La razón por la que he utilizado la versión Next es porque se instala con Webpack 5. Antes de entrar en cualquier Rust code, necesito poder consumir WebAssembly dentro del proyecto y Webpack 5 puede hacer eso. Así que voy a activar la capacidad para hacer eso. En la configuración de la vista voy a añadir las exportaciones del módulo que configurarán Webpack donde bajo el experimento puedes encontrar WebAssembly asíncrono y voy a configurarlo para que sea verdadero. Así que ahora seré capaz de consumir WebAssembly dentro de este proyecto. Ahora veamos el code de Rust. No tengo ningún code de Rust aquí así que voy a iniciar un nuevo proyecto de Rust con Rasmpatch, simplemente lo voy a llamar mi ejemplo de Rust, y eso generará un nuevo proyecto de Rust. Porque he utilizado Rasppatch, añade algunos extras. Así que por ejemplo, ha añadido en algún lugar el Rasm bind gen para poder hablar con WebAssembly, así como algunos otros extras útiles ya configurados. Si entro en el code fuente que se proporciona, el code fuente por defecto, se han proporcionado estas dos funciones de serie. Esta es una función externa y por lo tanto significa externa a Rust. Esta alerta, esta es la alerta del navegador que está disponible. Y eso es esa función externa. Y así está llamando a la alerta del navegador ya en su code por defecto desde Rust. Aquí hay una función G.R.E.A.T que se proporciona. Vamos a añadir un mensaje personalizado a esto. Y

Vamos aquí. Y aquí está la plantilla. Así que tengo una página en la que ya he empezado llamada Click Me. Tiene un botón. El botón no hace nada. Llamemos a ese Rust code desde aquí. Así que simplemente voy a hacer clic en mí. Aquí está ese botón. Llama al clic en mí. Aquí está la función de clic en mí. Así que, al igual que importaría algo en cualquier otro paquete o dependencia de JavaScript, ahora puedo importar la función greet de mi ejemplo de Rust. Y ahora vamos a llamar a greet. Hola desde view vía Rust. Vamos a hacer eso. Está construido. Vamos de vuelta aquí. Hagamos clic en mí. Y hola desde view vía Rust. Y así ese botón, esto se ha incorporado en el JavaScript envolvente en esta carpeta de paquetes, que luego se incorpora en el WebAssembly y de vuelta en la alerta. Así que eso es genial. Por supuesto, siendo un paquete de nodo, simplemente lo desplegamos en npm. ¿Por qué no lo hacemos ahora? Así que hay Wasm pack publish. Así que voy a hacer eso, Wasm pack publish y ahora está en npm. Así que ahora, en lugar de usarlo en el sistema de archivos, simplemente puedo poner el número de archivo de eso y luego instalar el archivo yarn. De esa manera puedo compartirlo con otras personas, siempre y cuando puedan consumir WebAssembly. Muchas gracias. Espero que esto les haya resultado útil.