JavaScript a Wasi Habilitado Wasm: Composición Portátil de JavaScript

Rate this content
Bookmark

JavaScript ya no es un lenguaje limitado a los navegadores. Nuevos estándares están permitiendo entornos de ejecución totalmente portátiles y livianos, para hacer de JavaScript el lenguaje definitivo para aplicaciones isomórficas.

Exploraremos casos de uso, algunos experimentales, otros consolidados, para llevar nuestro juego de Wasm con JavaScript al siguiente nivel.

This talk has been presented at DevOps.js Conf 2024, check out the latest edition of this JavaScript Conference.

FAQ

WebAssembly, también conocido como Wasm, es un formato de instrucciones binarias que permite ejecutar código de alto rendimiento en navegadores. No es un lenguaje de programación, sino un objetivo de compilación para lenguajes como C, C++ o Rust.

WebAssembly se puede integrar con JavaScript a través de la API de JavaScript, permitiendo que los módulos de Wasm se importen y se utilicen dentro de aplicaciones JavaScript. Esto se hace mediante la compilación del código en Wasm y su posterior importación y ejecución dentro del motor de JavaScript.

WebAssembly permite ejecutar operaciones intensivas en CPU a un nivel más bajo que el código JavaScript típico, lo que resulta en una ejecución más eficiente. Esto es especialmente útil para tareas de procesamiento pesado como la búsqueda de texto completo en el lado del cliente.

WASI, o la Interfaz del Sistema WebAssembly, es un estándar que permite ejecutar WebAssembly fuera de los navegadores en un entorno seguro y controlado. Proporciona interfaces compatibles con POSIX, facilitando la portabilidad del código a diferentes plataformas y sistemas.

WebAssembly se ejecuta en un entorno completamente encapsulado, asegurando que el código no pueda acceder ni modificar la memoria fuera de sus límites designados. Esto limita la interacción con otros procesos y componentes, reduciendo los riesgos de actividades maliciosas y ataques a la cadena de suministro.

Sí, es posible ejecutar WebAssembly en entornos no basados en navegador siempre que se proporcionen interfaces adicionales como WASI. Esto permite que WebAssembly se ejecute en un tiempo de ejecución especial, incluso en metal desnudo, ampliando su aplicabilidad más allá de los navegadores.

El desarrollo con WASI puede implicar más capas para depurar y entender el origen de los problemas, dado que las nuevas tecnologías son inestables y propensas a cambios en las definiciones de API. Además, no todas las interfaces están disponibles para todos los lenguajes de programación.

Natalia Venditto
Natalia Venditto
21 min
15 Feb, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

El código JavaScript se convierte en binarios de bajo nivel mediante motores de JavaScript como MV8, Chakra y SpiderMonkey. WebAssembly permite escribir código en otros lenguajes y compilarlo para ejecutarlo en un motor de JavaScript. Las funciones externas se pueden importar en WebAssembly utilizando la declaración de importación. WebAssembly puede ejecutarse en escenarios no relacionados con el navegador con interfaces adicionales como WASI y proporciona aislamiento de memoria. La herramienta Jco es una herramienta experimental para componentizar el código JavaScript en módulos WASM.

1. Introduction to JavaScript and WebAssembly

Short description:

Soy una líder principal de experiencia de desarrollo de JavaScript en Azure, que abarca integraciones, servicios de alojamiento y cómputo. El código JavaScript pasa por un flujo de ejecución en el navegador, desde el análisis hasta la generación de código. Los motores de JavaScript como MV8, Chakra y SpiderMonkey convierten el código en binarios de bajo nivel. WebAssembly es un formato de instrucciones binarias que nos permite escribir código en otros lenguajes y compilarlo para que se ejecute en un motor de JavaScript. Funciona en base a importaciones y exportaciones.

Hola a todos. Mi nombre es Natalia Bendito y soy una líder principal de experiencia de desarrollo de JavaScript de extremo a extremo en los muchos servicios y herramientas que pueden ser utilizados por los desarrolladores de JavaScript para construir aplicaciones en Azure. Eso incluye integraciones como GitHub Actions o extensiones de VS Code, servicios de alojamiento como Azure Static Web Apps, o cómputo como Azure Container Apps o Azure Functions. Cuando construimos aplicaciones de JavaScript, sabemos que nuestro código o scripts pasan básicamente por este flujo de ejecución en el navegador. Cada instrucción pasa por este viaje justo a tiempo. El analizador o motor de JavaScript genera una estructura jerárquica llamada árbol de sintaxis abstracta o AST. Por ejemplo, una declaración de variable es un constructo de nodo de declaración de variable en AST, que el intérprete lee y genera código binario de alto nivel a partir de él. Finalmente, el compilador genera código binario de bajo nivel que se comunica con la CPU de una manera que puede ser entendida según la arquitectura del procesador o CPU. Todo esto ocurre nuevamente justo a tiempo. Este flujo es principalmente el trabajo del motor de JavaScript. MV8 es uno de los más populares, pero también existen Chakra, SpiderMonkey y otros. El código de máquina generado puede estar optimizado para un conjunto específico de instrucciones que son, nuevamente, óptimas para una arquitectura específica, como mencionamos antes. Esto significa que estamos convirtiendo nuestro código de JavaScript de alto nivel en binarios de bajo nivel. Los motores de JavaScript pueden encargarse de la inicialización del entorno o encargarse de la inicialización del entorno. Añaden funciones integradas y también ejecutan nuestro código de aplicación. El motor también proporciona el tiempo de ejecución en el que se ejecutará la aplicación. Los scripts de JavaScript se ejecutan en un motor de JavaScript, obviamente, pero ¿qué más se ejecuta en un motor de JavaScript, si lo piensas a ese nivel bajo? Eso es, por supuesto, WebAssembly.

¿Qué es WebAssembly más concretamente, o Wasm, como algunos lo llaman? No es realmente un lenguaje. Es un formato de instrucciones binarias. El objetivo de compilación significa que escribimos nuestro código en el lenguaje que preferimos siempre y cuando tenga una cadena de herramientas o compilador de Wasm que nos permita hacerlo y lo compilamos a binario como Wasm para ejecutarlo en ese nivel bajo que describimos antes. ¿Cómo funciona realmente WebAssembly? Imaginemos que tenemos un programa escrito en C, C++, Rust o cualquier otro lenguaje que sea compatible, y queremos compilarlo a Wasm. Usamos su correspondiente cadena de herramientas o conjunto de herramientas de desarrollo, y eso es a lo que me refería antes con que sea compatible. Tiene este conjunto de herramientas de desarrollo y compiladores, que emitirán ese código como un módulo, que importa y exporta. Luego podemos importarlo en nuestro JavaScript para que se ejecute con un motor de JavaScript utilizando las uniones de WebAssembly JavaScript o la API de JavaScript. Wasm no define realmente ninguna API. Funciona como mencionamos sobre la base de importaciones y exportaciones. Este es un ejemplo de un módulo escrito en texto de WebAssembly. Recorramos este ciclo.

2. Using External Functions in WebAssembly

Short description:

La declaración de importación se utiliza para importar una función externa, como println del módulo de entorno. La sección de funciones exporta la función hello world. La sección de memoria declara el tamaño de la memoria y la sección de datos inicializa la memoria con una cadena. Al importar el módulo en JavaScript, obtenemos el módulo, procesamos la respuesta, compilamos los datos binarios y creamos una instancia del módulo. Podemos redirigir la salida de la función print line a console.log. WebAssembly nos permite ejecutar operaciones intensivas en CPU a un nivel más bajo y componer interfaces de usuario. Page find es un ejemplo de uso de WebAssembly para la ingestión de documentos, indexación y búsqueda de texto completo en el lado del cliente. Podemos lograr esto en un sitio web estático utilizando WebAssembly.

Creo que es importante comenzar con la declaración de importación que se utiliza para importar una función externa porque no tenemos nada en las API nativas de Wasm. Estamos importando esta función externa llamada println desde un módulo llamado environment. Esta función toma un solo parámetro de tipo I32 o entero de 32 bits. La función importada se le da el nombre de dollar println. Ahora, en la siguiente sección, tenemos la sección de funciones. La función se exporta con el nombre hello world. Luego tenemos otra sección, la sección de memoria, que básicamente declara el tamaño de la memoria. En este caso, una página. Finalmente, tenemos la sección de datos que inicializa la memoria, en este caso en el desplazamiento cero con una cadena UTF-8, hello world de JavaScript. Ahora, lo que creo que es realmente interesante es lo que sucede en JavaScript que importa este módulo o busca este módulo. Obtenemos el módulo que exportamos a un archivo llamado hello world.wasm. Luego, la respuesta se procesa utilizando response.arrive buffer para obtener los datos binarios del módulo. Luego usamos la función WebAssembly.compile para compilar los datos binarios que obtuvimos del paso anterior en un módulo de WebAssembly. Usamos el constructor WebAssembly.instance para crear una instancia del módulo de WebAssembly compilado. Como puedes ver, hay un objeto de entorno proporcionado en el segundo parámetro del constructor, que incluye una función importante llamada print line. ¿Recuerdas el archivo anterior? Esta función importante se asigna a console log. El propósito de esta asignación es redirigir cualquier salida de la función print line del módulo de WebAssembly, como se define en el código de texto de WebAssembly que proporcionamos antes, a la función console.log de JavaScript. Y finalmente, la función exportada hello world se invoca desde el módulo de WebAssembly utilizando instance.exports.hello world o hello world.

Dado que tenemos la capacidad de buscar y ejecutar Wasm, como acabamos de ver, como parte de nuestros programas de JavaScript, podemos componer interfaces de usuario donde ejecutamos operaciones intensivas en CPU a un nivel mucho más bajo o inferior que nuestros programas de JavaScript típicos se ejecutan de una manera más eficiente. Exploraremos un caso de uso específico de este tipo de composición. Propongamos que tenemos un sitio web estático, como uno creado con cualquier metaframework hoy en día, como Astro, y así sucesivamente, utilizando la obtención de datos estáticos. Y queremos ejecutar una funcionalidad de búsqueda para ese contenido estático. Bueno, podemos hacerlo con JavaScript en el lado del cliente, pero también podemos usar WebAssembly. Así que lo usaremos. Y page find es un gran ejemplo de una característica de Wasm que hace, en este caso, la ingestión de documentos, la indexación y ejecuta la búsqueda de texto completo, filtrado, ordenación, etc., todo en el lado del cliente a un nivel muy bajo en WebAssembly. Permíteme mostrarte ahora exactamente cómo funciona page find. Estamos en el sitio de documentación, pero iremos a Starlight, un marco para construir sitios de documentación con Astro. Si prestamos atención a la parte superior izquierda, veremos que tenemos una barra de búsqueda. Aunque este es un sitio generado estáticamente, ¿cómo funciona esto? Ejecutemos una búsqueda de algo como div. Notaremos que obtenemos resultados inmediatos.

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

Depuración Web Moderna
JSNation 2023JSNation 2023
29 min
Depuración Web Moderna
Top Content
This Talk discusses modern web debugging and the latest updates in Chrome DevTools. It highlights new features that help pinpoint issues quicker, improved file visibility and source mapping, and ignoring and configuring files. The Breakpoints panel in DevTools has been redesigned for easier access and management. The Talk also covers the challenges of debugging with source maps and the efforts to standardize the source map format. Lastly, it provides tips for improving productivity with DevTools and emphasizes the importance of reporting bugs and using source maps for debugging production code.
Utilizando Rust desde Vue con WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilizando Rust desde Vue con WebAssembly
Top Content
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
El Futuro de las Herramientas de Rendimiento
JSNation 2022JSNation 2022
21 min
El Futuro de las Herramientas de Rendimiento
Top Content
Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.
Haciendo JavaScript en WebAssembly Rápido
JSNation Live 2021JSNation Live 2021
29 min
Haciendo JavaScript en WebAssembly Rápido
Top Content
WebAssembly enables optimizing JavaScript performance for different environments by deploying the JavaScript engine as a portable WebAssembly module. By making JavaScript on WebAssembly fast, instances can be created for each request, reducing latency and security risks. Initialization and runtime phases can be improved with tools like Wiser and snapshotting, resulting in faster startup times. Optimizing JavaScript performance in WebAssembly can be achieved through techniques like ahead-of-time compilation and inline caching. WebAssembly usage is growing outside the web, offering benefits like isolation and portability. Build sizes and snapshotting in WebAssembly depend on the application, and more information can be found on the Mozilla Hacks website and Bike Reliance site.
Creando lo Imposible: Virtualización X86 en el Navegador con WebAssembly
JSNation 2022JSNation 2022
21 min
Creando lo Imposible: Virtualización X86 en el Navegador con WebAssembly
ChirpX is a technology to securely run binary code in the browser, written in C++ and compiled to JavaScript WebAssembly. It can run a full virtualized system in the browser, including Bash and other languages like Python and JavaScript. ChirpX aims for scalability and the ability to work with large code bases, supporting multiprocessing and multithreading. It uses a two-tiered execution engine with an interpreter and a JIT engine. Future plans include running the full X.Org server in the browser and implementing the Windows system call. WebVM, the underlying technology, has a virtual file system backed by Cloudflare.
pnpm: un gestor de paquetes rápido y eficiente para JavaScript
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
pnpm: un gestor de paquetes rápido y eficiente para JavaScript
pnpm is a fast and efficient package manager that gained popularity in 2021 and is used by big tech companies like Microsoft and TikTok. It has a unique isolated node module structure that prevents package conflicts and ensures each project only has access to its own dependencies. pnpm also offers superior monorepo support with its node module structure. It solves the disk space usage issue by using a content addressable storage, reducing disk space consumption. pnpm is incredibly fast due to its installation process and deterministic node module structure. It also allows file linking using hardlinks instead of symlinks.

Workshops on related topic

React, TypeScript y TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript y TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
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.
Dominando conceptos avanzados en TypeScript
React Summit US 2023React Summit US 2023
132 min
Dominando conceptos avanzados en TypeScript
Top Content
Featured WorkshopFree
Jiri Lojda
Jiri Lojda
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.
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
React Summit 2024React Summit 2024
92 min
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
Featured Workshop
Vivek Nayyar
Vivek Nayyar
Sumérgete en el mundo de la IA con nuestro masterclass interactivo diseñado específicamente para desarrolladores web. "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" ofrece una oportunidad única para cerrar la brecha entre la IA y el desarrollo web. A pesar de la prominencia de Python en el desarrollo de IA, el vasto potencial de JavaScript sigue siendo en gran medida inexplorado. Este masterclass tiene como objetivo cambiar eso.A lo largo de esta sesión práctica, los participantes aprenderán cómo aprovechar LangChain, una herramienta diseñada para hacer que los modelos de lenguaje grandes sean más accesibles y útiles, para construir agentes de IA dinámicos directamente dentro de entornos JavaScript. Este enfoque abre nuevas posibilidades para mejorar las aplicaciones web con funciones inteligentes, desde el soporte al cliente automatizado hasta la generación de contenido y más.Comenzaremos con los conceptos básicos de LangChain y los modelos de IA, asegurando una base sólida incluso para aquellos nuevos en IA. A partir de ahí, nos sumergiremos en ejercicios prácticos que demuestran cómo integrar estas tecnologías en proyectos reales de JavaScript. Los participantes trabajarán en ejemplos, enfrentando y superando los desafíos de hacer que la IA funcione sin problemas en la web.Este masterclass es más que una experiencia de aprendizaje; es una oportunidad de estar a la vanguardia de un campo emergente. Al final, los asistentes no solo habrán adquirido habilidades valiosas, sino que también habrán creado funciones mejoradas con IA que podrán llevar a sus proyectos o lugares de trabajo.Ya seas un desarrollador web experimentado curioso acerca de la IA o estés buscando expandir tus habilidades en áreas nuevas y emocionantes, "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" es tu puerta de entrada al futuro del desarrollo web. Únete a nosotros para desbloquear el potencial de la IA en tus proyectos web, haciéndolos más inteligentes, interactivos y atractivos para los usuarios.
De Todo App a B2B SaaS con Next.js y Clerk
React Summit US 2023React Summit US 2023
153 min
De Todo App a B2B SaaS con Next.js y Clerk
WorkshopFree
Dev Agrawal
Dev Agrawal
Si eres como yo, probablemente tengas un millón de ideas para proyectos secundarios, algunas de las cuales incluso podrían hacerte ganar dinero como un micro SaaS, o podrían resultar ser la próxima startup de mil millones de dólares. Pero, ¿cómo sabes cuáles? ¿Cómo pasas de una idea a un producto funcional que puede ser puesto en manos de clientes que pagan sin renunciar a tu trabajo e invirtiendo todo tu tiempo y dinero en ello? ¿Cómo pueden competir tus proyectos secundarios en solitario con las aplicaciones construidas por enormes equipos y grandes empresas?
Construir productos SaaS ricos viene con desafíos técnicos como infraestructura, escalabilidad, disponibilidad, seguridad y subsistemas complicados como autenticación y pagos. Por eso, a menudo son los gigantes tecnológicos ya establecidos quienes pueden construir y operar productos de este tipo de manera razonable. Sin embargo, una nueva generación de devtools está permitiendo a los desarrolladores construir fácilmente soluciones completas que aprovechan la mejor infraestructura en la nube disponible, y ofrecen una experiencia que te permite iterar rápidamente en tus ideas por un bajo costo de $0. Se llevan todos los desafíos técnicos de construir y operar productos de software para que solo tengas que pasar tu tiempo construyendo las características que tus usuarios quieren, dándote una oportunidad razonable de competir contra el mercado al mantenerte increíblemente ágil y receptivo a las necesidades de los usuarios.
En esta masterclass de 3 horas comenzarás con una simple aplicación de gestión de tareas construida con React y Next.js y la convertirás en un producto SaaS completamente funcional y escalable integrando una base de datos escalable (PlanetScale), autenticación multi-tenant (Clerk), y pagos basados en suscripción (Stripe). También aprenderás cómo los principios del desarrollo de software ágil y el diseño impulsado por el dominio pueden ayudarte a construir productos rápidamente y de manera rentable, y competir con las soluciones existentes.
Construyendo Pinia desde cero
Vue.js Live 2024Vue.js Live 2024
70 min
Construyendo Pinia desde cero
Workshop
Eduardo San Martin Morote
Eduardo San Martin Morote
Sumergámonos en cómo funciona Pinia bajo el capó construyendo nuestro propio `defineStore()`. Durante este masterclass cubriremos algunos conceptos avanzados de Vue como la inyección de dependencias y los scopes de efectos. Esto te dará una mejor comprensión de la API de Composición de Vue.js y Pinia. Requisitos: experiencia en la construcción de aplicaciones con Vue y su API de Composición.
Masterclass de Desarrollo Web 3D con el ecosistema de TresJS: Un taller de Vue.js
Vue.js Live 2024Vue.js Live 2024
119 min
Masterclass de Desarrollo Web 3D con el ecosistema de TresJS: Un taller de Vue.js
Workshop
Alvaro Saburido
Alvaro Saburido
Presentamos "Masterclass de Desarrollo Web 3D con TresJS", un taller especializado creado para desarrolladores de Vue.js ansiosos por explorar el mundo de la gráfica 3D en sus aplicaciones web. TresJS, un potente renderizador personalizado para Vue, está diseñado específicamente para funcionar perfectamente con el sistema reactivo de Vue. Este taller ofrece una inmersión profunda en la integración de visualizaciones 3D sofisticadas y experiencias interactivas directamente en aplicaciones Vue, aprovechando las fortalezas únicas de los ecosistemas de Vue y TresJS.
Este taller está diseñado para desarrolladores de Vue.js que buscan ampliar sus habilidades en la tercera dimensión, diseñadores de UI/UX interesados en incorporar elementos 3D en aplicaciones web, y desarrolladores front-end curiosos sobre el potencial de la gráfica 3D para mejorar las experiencias de usuario. Debes estar familiarizado con Vue.js para aprovechar al máximo este taller.
Lo que Aprenderás- Introducción a TresJS: Descubre los fundamentos de TresJS y cómo se integra con el ecosistema de Vue para dar vida a la gráfica 3D.- Creación de Escenas 3D con Vue: Aprende a construir escenas 3D complejas utilizando componentes Vue, mejorando tus interfaces de usuario con visuales dinámicos e inmersivos.- Interactividad y Animación: Domina las técnicas para hacer tus escenas 3D interactivas, respondiendo a las entradas del usuario para una experiencia cautivadora.- Integración con Funcionalidades de Vue: Explora la integración avanzada de TresJS con la reactividad, los composables y la tienda Vuex de Vue para gestionar el estado en aplicaciones web 3D.- Rendimiento y Mejores Prácticas: Obtén información sobre la optimización de tus escenas 3D para el rendimiento y las mejores prácticas para mantener aplicaciones web fluidas y receptivas.