Creando lo Imposible: Virtualización X86 en el Navegador con WebAssembly

This ad is not shown to multipass and full ticket holders
React Summit
React Summit 2025
June 13 - 17, 2025
Amsterdam & Online
The biggest React conference worldwide
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit 2025
React Summit 2025
June 13 - 17, 2025. Amsterdam & Online
Learn more
Bookmark
Rate this content

WebAssembly es una característica del navegador diseñada para llevar un rendimiento alto y predecible a las aplicaciones web, pero sus capacidades a menudo se malinterpretan.


Esta charla explorará cómo WebAssembly es diferente de JavaScript, desde el punto de vista tanto del desarrollador como del motor del navegador, con un enfoque particular en la implementación de V8/Chrome.


WebVM es nuestra solución para ejecutar eficientemente binarios x86 no modificados en el navegador y muestra lo que se puede hacer con WebAssembly hoy en día. Se discutirá una visión general de alto nivel de los componentes del proyecto, incluido el motor JIT, la capa de emulación de Linux y el backend de almacenamiento, seguido de demostraciones en vivo.

This talk has been presented at JSNation 2022, check out the latest edition of this JavaScript Conference.

FAQ

Alessandro Pignotti es el fundador y CTO de Leaning Technologies, una empresa especializada en soluciones compiladas a JavaScript y WebAssembly.

Leaning Technologies ha lanzado tres productos principales: Chirp, una herramienta en C++ y un compilador de JavaScript y WebAssembly; ChirpJ, una máquina Java completa que puede ejecutarse en el navegador; y ChirpX, una tecnología más genérica que puede ejecutar código binario de forma segura en el navegador.

ChirpX es una tecnología desarrollada por Leaning Technologies que permite ejecutar de forma segura código binario en el navegador. Se utiliza para virtualizar aplicaciones completas directamente en el navegador sin necesidad de preprocesamiento o metadatos especiales.

WebVM es un experimento dentro de ChirpX que permite convertir la tecnología en un producto comercializable, facilitando la ejecución de sistemas virtualizados completos como Bash o Python directamente en el navegador.

ChirpX puede facilitar un entorno de aprendizaje sin mantenimiento donde los estudiantes pueden iniciar aplicaciones sin preocuparse por la compatibilidad con sus sistemas operativos, lo que es especialmente útil en el contexto educativo.

Es teóricamente posible implementar la llamada al sistema de Windows y ejecutar una pila completa de Windows usando la tecnología de Leaning Technologies, aunque se enfrentan a restricciones de licencia con Microsoft.

Las tecnologías desarrolladas por Leaning Technologies, como ChirpX y WebVM, son compatibles con cualquier navegador moderno, incluyendo Chrome, Firefox y Safari.

Los planes futuros para ChirpX incluyen la implementación del servidor completo de X.Org en el navegador y encontrar una forma de mapear OpenGL directamente a WebGL, lo que podría reducir significativamente la sobrecarga de ejecución.

Alessandro Pignotti
Alessandro Pignotti
21 min
16 Jun, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
ChirpX es una tecnología para ejecutar de forma segura código binario en el navegador, escrito en C++ y compilado a JavaScript WebAssembly. Puede ejecutar un sistema completamente virtualizado en el navegador, incluyendo Bash y otros lenguajes como Python y JavaScript. ChirpX apunta a la escalabilidad y la capacidad de trabajar con grandes bases de código, soportando multiprocesamiento y multihilo. Utiliza un motor de ejecución de dos niveles con un intérprete y un motor JIT. Los planes futuros incluyen ejecutar el servidor completo X.Org en el navegador e implementar la llamada al sistema de Windows. WebVM, la tecnología subyacente, tiene un sistema de archivos virtual respaldado por Cloudflare.

1. Introducción a ChirpX

Short description:

Soy Alessandro Pignotti, fundador y CTO de Leaning Technologies. Nos especializamos en soluciones compiladas a JavaScript y compiladas a WebAssembly. Hemos lanzado tres productos diferentes: Chirp, ChirpJ y ChirpX. ChirpX es una tecnología para ejecutar de forma segura código binario en el navegador. Es genérico, robusto y escalable. Lo escribimos en C++ y lo compilamos a JavaScript WebAssembly usando Chirp.

Así que, hola a todos. Y me gustaría comenzar agradeciendo a la organización por invitarme aquí y darme la oportunidad de compartir algo de la tecnología que construimos para ustedes. Y especialmente hoy, es un día especial para mí, porque es mi cumpleaños. Y muchas gracias por venir aquí a celebrarlo conmigo, lo aprecio mucho.

Así que soy Alessandro Pignotti, fundador y CTO de Leaning Technologies. Nací y crecí en Roma, y me mudé a Pisa para mis estudios, y luego me mudé aquí en 2014. Y he sido un orgulloso habitante de Ámsterdam desde entonces. Si lo desean, pueden seguirme en Twitter, pero les recomendaría no contener la respiración mientras esperan que publique algo.

Entonces, ¿qué hacemos? Somos una pequeña empresa que se especializa en el nicho de soluciones compiladas a JavaScript y compiladas a WebAssembly. En este pequeño nicho, creo que hacemos cosas bastante interesantes. Y a lo largo de los años, hemos lanzado tres productos diferentes. Uno de ellos fue Chirp, que es una herramienta de C++, compilador de JavaScript y WebAssembly. El segundo fue ChirpJ, que no es solo un compilador para Java, realmente. Es más como una máquina Java completa que puede ejecutarse en el navegador. Y podemos usarlo para ejecutar incluso aplicaciones Java completamente gráficas en el navegador ahora mismo. Y luego decidimos dar un paso más allá. Y creamos ChirpX. Y ChirpX no es solo un producto, realmente. Ahora mismo, lo consideramos más como una tecnología. Es una solución muy genérica que hará un montón de cosas diferentes. Y como primer experimento para ver cómo podemos hacer de esto eventualmente un producto que podamos vender, construimos WebVM, que es solo una de las posibles cosas que podemos construir con esto. Y hablaremos sobre eso. Porque, ya saben, cada uno de estos productos probablemente requerirá su propia charla de un par de horas. Tenemos 20 minutos, así que necesitamos cortar e ir al grano. Entonces, ChirpX es una tecnología para ejecutar de forma segura código binario en el navegador, ¿de acuerdo? Y hay tres ideas principales que seguimos al hacer esto. Queríamos construir algo que fuera genérico, robusto y escalable. Creo que pueden tener su propia intuición sobre lo que significan estos términos, pero me adentraré más tarde sobre lo que quiero decir exactamente al usar estas palabras. Y en términos prácticos, lo que ChirpX es, es una aplicación de C++ que escribimos desde cero. La escribimos nosotros mismos, y la compilamos a JavaScript WebAssembly usando Chirp, usando nuestro otro producto, para que pueda ejecutarse en el navegador. Y sé que es agradable hablar sobre las cosas, pero también es agradable ver cómo las cosas realmente funcionan en la práctica.

2. Running Full Virtualized System in Browser

Short description:

Ahora demostraré que podemos ejecutar un sistema completamente virtualizado en el navegador. Actualmente, tengo Bash, el shell, ejecutándose desde una distribución Debian en el navegador. Escribiré un binario desde cero y lo probaré. Quiero devolver un código de error en lugar del código de finalización exitoso habitual para ver si el shell puede manejarlo. Después de compilar el código usando GCC, el sistema carga los datos requeridos desde la red. La ejecución se completa y podemos probar si funciona como se espera.

Y todos me recomendaron no hacer una demostración en vivo, pero, ya saben, ¿quién soy yo para seguir buenos consejos? Intentemos esto. Así que lo que me gustaría hacer, me gustaría demostrarles que podemos ejecutar un sistema completamente virtualizado en el navegador. Y lo que tengo aquí ahora mismo es Bash, el shell, ejecutándose desde una distribución Debian en el navegador. Para probarlo, puedo, por ejemplo, listar un sistema de archivos y hay un montón de cosas que puedes esperar de un sistema real en ejecución.

Pero me gustaría demostrar que realmente puedo ejecutar un binario que nunca se ha visto antes. Y a través de eso, supongo que simplemente escribiré uno. Y no sé ustedes, pero cuando quiero escribir un binario desde cero, lo primero que hago es abrir mi editor de texto. Así que... Es increíblemente difícil escribir correctamente en el escenario. Así que tenemos Vim, está funcionando, y ahora puedo escribir un caso de prueba muy pequeño. Y lo que está sucediendo ahora mismo es que todo esto está ejecutándose desde los binarios XSAT que ejecutas en tu propia computadora. Y planeo hacer una palabra L muy simple. Para hacer algo que no sea completamente trivial, en realidad quiero, en lugar de devolver el habitual retorno cero o código que le dirá al sistema que el ejecutable se completó exitosamente, quiero devolver un código de error. Quiero ver si el shell puede manejar eso. Así que probemos esto. Genial.

Ahora quiero compilar esto. Para compilar código C++. Código C, en realidad, por supuesto usaré GCC. Y también podemos habilitar algunas optimizaciones porque nunca se sabe. Y esto parece correcto. Bien. ¿Qué está pasando en el fondo aquí? Así que GCC es un ejecutable bastante grande, y actualmente el sistema está cargando los datos requeridos desde la red. Y estos datos vienen en bloques porque esto es en realidad una implementación completa de X2 que se ejecuta desde un dispositivo de disco que está respaldado por un CDN. Está respaldado por Cloudflare. Y esta ejecución está realmente completada. Podemos probar si esto incluso puede ejecutarse. Hace lo que esperamos que haga. Verifiquemos el código de error. Es lo que esperamos.

QnA

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

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.
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.
Construyendo Interfaces Controladas por el Cerebro en JavaScript
JSNation Live 2021JSNation Live 2021
27 min
Construyendo Interfaces Controladas por el Cerebro en JavaScript
Top Content
Learn how to build brain-controlled interfaces using JavaScript and brain sensors. Understand the functions of different parts of the brain and how they relate to sensor placement. Explore examples of calm and focus detection, as well as the Kinesis API for mental commands. Discover the applications of brain-controlled interfaces, such as scrolling web pages and password-less authentication. Understand the limits and opportunities of brain control and the potential for using brain sensors in medical applications.
TensorFlow.js 101: Aprendizaje automático en el navegador y más allá
ML conf EU 2020ML conf EU 2020
41 min
TensorFlow.js 101: Aprendizaje automático en el navegador y más allá
TensorFlow.js enables machine learning in the browser and beyond, with features like face mesh, body segmentation, and pose estimation. It offers JavaScript prototyping and transfer learning capabilities, as well as the ability to recognize custom objects using the Image Project feature. TensorFlow.js can be used with Cloud AutoML for training custom vision models and provides performance benefits in both JavaScript and Python development. It offers interactivity, reach, scale, and performance, and encourages community engagement and collaboration between the JavaScript and machine learning communities.
Unreal Engine en WebAssembly/WebGPU
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Unreal Engine en WebAssembly/WebGPU
Top Content
Alex Saint-Louis, co-founder of Wunder Interactive, shares the mission of bringing Unreal Engine to the browser, enabling cross-platform 3D applications and games. They are working on a WebGPU back end for Unreal Engine to push the limits of 3D on the web. Wunder Interactive has improved compression, built their own asset file system, and offers powerful tools for game developers. They are utilizing modern web technologies like WebAssembly, WebGL, and WebGPU, and plan to support other engines like Unity and Godot. The team aims to transform the industry by bringing console-quality games to the browser and providing an alternative distribution path. They are excited to bring Unreal Engine 5 to the web with WebGPU support and are working on WebXR support for cross-platform 3D experiences, including VR.
Ampliando los límites de la codificación de video en navegadores con WebCodecs
JSNation 2023JSNation 2023
25 min
Ampliando los límites de la codificación de video en navegadores con WebCodecs
Top Content
This Talk explores the challenges and solutions in video encoding with web codecs. It discusses drawing and recording video on the web, capturing and encoding video frames, and introduces the WebCodecs API. The Talk also covers configuring the video encoder, understanding codecs and containers, and the video encoding process with muxing using ffmpeg. The speaker shares their experience in building a video editing tool on the browser and showcases Slantit, a tool for making product videos.