Makepad - Aprovechando Rust + Wasm + WebGL para Construir Increíbles Aplicaciones Multiplataforma

Rate this content
Bookmark

En esta charla mostraré Makepad, una nueva pila de UI que utiliza Rust, Wasm y WebGL. A diferencia de otras pilas de UI, que utilizan un enfoque híbrido, todo el renderizado en Makepad se realiza en la GPU. Esto permite aplicaciones altamente pulidas e impresionantes visualmente que no han sido posibles en la web hasta ahora. Debido a que Makepad utiliza Rust, las aplicaciones se ejecutan tanto de forma nativa como en la web a través de wasm. Las aplicaciones de Makepad pueden ser muy pequeñas, del orden de unos pocos cientos de kilobytes para wasm, hasta unos pocos megabytes con nativo. Nuestro objetivo es desarrollar Makepad como la pila de UI elegida para aplicaciones multiplataforma ligeras y de alto rendimiento. Tenemos la intención de lanzar nuestra propia aplicación de diseño y IDE.

22 min
16 Jun, 2022

Video Summary and Transcription

Bienvenido a MakePad, una nueva forma de construir UI para web y nativo utilizando WebAssembly y Rust. JavaScript no es adecuado para aplicaciones complejas como IDEs y herramientas de diseño. Rust, un nuevo lenguaje de programación, se utilizó para reinventar MakePad, lo que resultó en una plataforma rápida y eficiente. MakePad ofrece edición en vivo, alto rendimiento de CPU y la capacidad de cargar componentes de instrumentos nativos. El futuro de MakePad incluye un lanzamiento de código abierto, una herramienta de diseño y soporte para importar modelos 3D.

Available in English

1. Introducción a MakePad

Short description:

Bienvenidos a mi charla sobre MakePad, una nueva forma de construir interfaces de usuario para web y nativas utilizando WebAssembly y Rust. Fundé Cloud9 IDE, una empresa para construir un IDE web. Pasé seis años rediseñando completamente la pila de renderizado del navegador en WebGL y JavaScript. El resultado es Makepad JavaScript, una reinvención completa de la pila de renderizado en WebGL, que permite la codificación en vivo y aplicaciones interactivas de alto rendimiento.

Muy bien, bienvenidos a mi charla. Voy a hablar sobre MakePad. Es una nueva forma de construir interfaces de usuario para web y nativas utilizando WebAssembly y Rust.

Así que quiero comenzar este viaje hace mucho, mucho tiempo, tal vez antes de que algunos de ustedes estuvieran en la escuela primaria incluso. Fundé Cloud9 IDE, es una empresa para construir un IDE web. Teníamos un editor de código basado en HTML llamado Ace, era uno de los dos en ese momento. Y, así que estaba en medio del mundo HTML construyendo lo que se consideraba una aplicación compleja, ¡un IDE, ¿verdad?! Todos estaban haciendo páginas web, algunas aplicaciones web, pero el IDE con el editor de código se consideraba una aplicación web compleja.

Así que, en ese momento estaba trabajando en el editor y recuerdo que estábamos trabajando en el plegado de código y quería que el plegado de código fuera animado. Es algo muy simple, ya saben, las computadoras son rápidas, pueden animarlo, pero no importa lo que intenté, no pude hacerlo con HTML y CSS. Simplemente, sin importar lo que hiciéramos, era entrecortado y era malo. Así que en ese momento WebGL acababa de ser lanzado y comencé a investigar el uso de WebGL para renderizar interfaces de usuario, renderizar editores. Y me di cuenta de que esto era una tarea enorme por delante para reinventar la interfaz de usuario en WebGL. Así que, dejé Cloud9 y comencé el viaje de rediseñar completamente la pila de renderizado del navegador en WebGL y JavaScript.

Y pasé seis años en eso. Probablemente construí al menos seis o siete iteraciones completas de intentar hacer esto. Y quiero mostrarles el resultado de esos seis años aquí. Y eso es Makepad JavaScript. Esto es Makepad JavaScript. Es una reinvención completa de la pila de renderizado en WebGL. Y puedes hacer, veamos, puedes codificar en vivo. Todo esto se puede codificar en vivo. Así que veamos si puedo cambiar el color del texto aquí. También puedo, veamos, tengo un poco de retroalimentación en el audio. Sí. Así que fue realmente rápido. Podías tener, esto son 50,000 círculos interactivos en un navegador. Estaba utilizando multi-threading. Así que esta aplicación que se ejecuta aquí se estaba ejecutando en un hilo de trabajo y enviaba la lista de visualización al hilo principal del navegador. Así que podías tener cualquier número de aplicaciones ejecutándose al mismo tiempo, siempre y cuando tuvieras hilos de trabajo. Y podías hacer cosas interactivas muy, muy geniales.

2. Desafíos con la Estabilidad y Potencia de CPU

Short description:

Todo esto se ejecuta en un iPhone 6, y en algún momento, incluso logré ejecutarlo dentro de sí mismo. Sin embargo, hubo un gran problema. Cuando trabajaba en la aplicación durante más de 30 minutos, Chrome se bloqueaba. Era inestable y no podía usar mis propias herramientas de desarrollo. El verdadero problema es que JavaScript no tiene suficiente potencia de CPU para todas las tareas. Esto es un callejón sin salida.

Todo esto también se ejecuta en un iPhone 6, creo, aún si lo cargas en Safari. Y en algún momento, incluso logré ejecutarlo dentro de sí mismo. Y esto es genial. Todo está bien.

Pero tuvo un gran problema. Tuvo un gran problema. En ese momento, en Chrome, cuando trabajaba en la aplicación durante más de 30 minutos, Chrome simplemente se bloqueaba. Se bloqueaba y no sabía por qué. Y habiendo lidiado con errores del navegador antes, a veces llevan años solucionarlos. A veces nunca se resuelven. Por lo general, cuando dices: sí, LiveCode en Chrome durante media hora y recargo en caliente un worker, eso es un error. Ellos dicen: `Bueno, probablemente eres la única persona en el mundo que hace eso`. Así que buena suerte con eso. Eso fue muy deprimente. Y espera un momento.

No era estable. Eso fue realmente un problema porque quería usarlo yo mismo. Si no puedo usar mis propias herramientas de desarrollo para mis propias cosas, entonces las herramientas de desarrollo son malas. Sin embargo, había un problema real, porque tal vez podría haberlo solucionado. Podría haberlo solucionado yo mismo o haber presionado para que alguien más lo hiciera. Pero el problema real es que no te queda potencia de CPU si haces todo esto en JavaScript. El hilo de trabajo se limita al 100% si usas el editor, el resaltado de sintaxis. Todo eso es demasiado pesado para hacerlo en tiempo real con JavaScript. Y eso significaba que estaba mirando hacia el futuro. Veo AR, VR, interfaces de usuario. Veo pantallas de alta frecuencia de actualización. Las últimas tienen un máximo de 120 hercios. Así que ya no tienes esos 16 milisegundos. Estás en 8 o menos. Así que es un callejón sin salida.

3. Desafíos con JavaScript

Short description:

JavaScript fue la tecnología equivocada para construir aplicaciones complejas como IDEs y herramientas de diseño en la web. Carece de las estructuras de datos y la escalabilidad necesarias, lo que conduce a problemas de rendimiento y limitaciones. TypeScript ayuda hasta cierto punto, pero en algún momento, la base de código comenzará a desmoronarse. A pesar del atractivo inicial, era hora de explorar nuevas tecnologías.

Es un callejón sin salida. El JavaScript fue incorrecto. Básicamente, es la tecnología equivocada para intentar hacer esto, especialmente porque quería construir aplicaciones complejas como IDEs, herramientas de diseño, modeladores 3D. Este tipo de herramientas que quería construir en la web. Pero si intentas hacer eso en JavaScript, solo las estructuras de datos que necesitas para construir algo complicado arrastrarán o interrumpirán tu aplicación sin fin. Es un dominio limitado. Y la tipificación dinámica tampoco escala. TypeScript alivia eso en cierta medida. Pero con JavaScript, si escalas tu base de código y tratas de construir sobre cosas que hiciste antes, en algún momento comenzará a desmoronarse. Así que esto fue después de seis años. ¿Era este el final? ¿Mi vida no tenía propósito? Es un poco exagerado desechar tu trabajo en este momento, aunque se veía genial, ¿verdad? Se veía bonito.

4. Introducción a Rust y la reimaginación de Makepad

Short description:

Rust es un nuevo lenguaje de programación desarrollado por Mozilla. Es un lenguaje de verificación de préstamos que no tiene un recolector de basura, lo que lo hace rápido y sin interrupciones. Se compila a WebAssembly y es de alto y bajo nivel. El orador se unió a desarrolladores con experiencia en Rust y diseño de UI para reimaginar Makepad. La nueva versión incluye un editor de código y plegado de código animado para una mejor visión general del código y memoria espacial.

Sí, eso es. Y luego llegó Rust. Rust es un lenguaje de programación relativamente nuevo desarrollado por Mozilla. Es un lenguaje de verificación de préstamos. No tiene un recolector de basura. Esta es una diferencia fundamental, por lo que lleva tiempo aprenderlo. No puedes simplemente crear objetos al azar y hacer que desaparezcan mágicamente. Por eso es rápido. No tiene interrupciones del recolector de basura.

Se compila a nativo y se compila a WebAssembly. Y es tanto de alto como de bajo nivel, lo cual es diferente, porque JavaScript es un lenguaje de nivel medio. No es muy alto nivel, pero tampoco es bajo nivel. Y eso es muy limitante, porque a veces quieres construcciones realmente de alto nivel, como iteradores de alto rendimiento o sistemas de intercambio. Y a veces quieres bajo nivel, porque necesitas el rendimiento.

Así que tuve una nueva oportunidad de probar esto con una nueva tecnología. Y me uní a Eddie, quien es un desarrollador Exmozilla, quien estaba allí cuando se inventó Rust. Así que él conocía Rust y también podía enseñármelo a mí. Y a Sebastian, quien es uno de los diseñadores de UI más brillantes que conozco. Y porque, ya sabes, si estás construyendo una interfaz de usuario, es mejor intentar que se vea bien. Y yo solo juego juegos. Así que Makepad Rust, esto es una reimaginación completa.

Así que primero, esto es Makepad JavaScript y aquí está Makepad Rust. Es la misma idea, tiene un editor de código. Y ahora finalmente pude hacer plegado de código animado. Esta es una característica que no debería ser difícil. Pero, ya sabes, considerando que estás aplaudiendo, la gente considera que es difícil. Porque esto es lo que quería. Quería tener una visión general de mi código que se pliega y mantengo mi memoria espacial, ¿verdad? No quiero que el código se pliegue hasta desaparecer. Quiero ver el cuerpo de trabajo allí. Puedes mover el cursor por ahí.

5. Edición en vivo y rendimiento de CPU de MakePad

Short description:

MakePad tiene edición en vivo y funciona en AR y VR. Se puede compilar como una aplicación de escritorio nativa sin sandbox de navegador o Electron. El tamaño del archivo binario es de un megabyte. El orador demuestra la diferencia en el rendimiento de la CPU entre MakePad y JavaScript utilizando la funcionalidad de trazado y perfilado de Chrome.

Y también sigue teniendo la edición en vivo. Como aquí está sucediendo algo en vivo al cambiar el código. Les contaré un poco cómo funciona más adelante. Pero incluso funcionaba en VR hasta que las APIs web cambiaron un poco y simplemente no sentí actualizarlo. Pero lo arreglaré más tarde.

Toda esta interfaz de usuario funciona perfectamente en AR y VR. Puedes colocarla en cualquier lugar del espacio 3D, tiene profundidad en la interfaz de usuario, todas esas cosas. Y finalmente lo conseguí. Esta es mi propia versión de escritorio de la compilación, la uso todos los días. Es la misma base de código, solo la compilas como una aplicación de escritorio nativa que se ejecuta directamente en Metal en Mac, directamente en DirectX en Windows, OpenGL en Linux. Y sí, sin sandbox de navegador, sin tonterías de Electron. Este archivo binario tiene un megabyte en un archivo zip. Volvemos a los 2,000 en cuanto al tamaño del archivo. ¿Podría ser esto? ¿Podría ser finalmente lo que quería? Ya sabes, una pila de aplicaciones súper rápida que funcione en nativo y en web.

Entonces, una de las cosas que dije es que no me quedaba tiempo de CPU, ¿verdad? Así que déjenme mostrarles el trazado de Chrome, un perfil de Chrome. Está en performance. Voy a grabar. Hacer esto. Detener. Como pueden ver, apenas puedo ver mi código de CPU. Es como medio milisegundo para hacer una selección de color en esta interfaz de usuario. A diferencia de, esto es, veamos, veamos si puedo obtener lo mismo. No. La pila de texto es completamente diferente, ¿verdad? Estoy comparando, estoy perfilando la funcionalidad aquí. Porque eso es lo que, al final, importa. No se trata de comparar JavaScript versus WebAssembly en un bucle interno. Se trata de comparar toda la pila. Así que, aquí vamos. Voy a seleccionar este color y voy a ver. Sí.

6. UIStack de MakePad, Herramienta de Diseño y FunAudio

Short description:

Así es como se veía el perfil de JavaScript en mi Mac M1, llegando al 100% de la CPU. Construimos un UIStack, un conjunto de widgets con un modelo de renderizado similar a React. Incluye su propio IDE y editor de código. Nuestra última pieza será una herramienta de diseño para respaldar a un diseñador visual. La estructura de datos de la interfaz de usuario tiene propiedades de HTML, CSS y herencia. Nuestro primer ejemplo de aplicación es FunAudio, una aplicación de audio que utiliza nuestra API de audio en Mac.

Entonces, esto es lo que, no sé, es un poco pequeño, pero así es como se veía el perfil de JavaScript. Y las barras son mis hilos de trabajo. Y ahora esto es un Mac M1, así que, ya sabes, se ha vuelto más rápido desde que abandoné este proyecto, así que ahora solo es la mitad. Pero en aquel entonces, esto llegaba al 100% de la CPU. Así que, sí.

Finalmente llegué al punto en el que puedo hacer cosas útiles con mi interfaz de usuario en lugar de simplemente hacer la interfaz de usuario. Entonces, ¿qué construimos? Es un UIStack, por lo que es un conjunto de widgets. Tiene un modelo de renderizado similar a React. Es su propio IDE y editor de código construido sobre esa pila. Y nuestra última pieza para convertir esto en algo útil que puedo ofrecerles a todos ustedes es una herramienta de diseño. Porque, ya sabes, codificar manualmente la interfaz de usuario es algo que me gustaría dejar en el pasado. Quieres usar un diseñador visual adecuado. Por lo tanto, todo este sistema está diseñado para respaldar a un diseñador visual. Y eso significa que tenemos un DSL, y un DSL es un lenguaje específico del dominio. HTML es un DSL, CSS es un DSL. También tenemos que tener algo así porque no quiero hacerlo todo en Rust. Si construyes una herramienta de diseño visual, la herramienta de diseño visual manipula la data estructura que es tu interfaz de usuario. Y en este caso, la data estructura es algo personalizado, que tiene propiedades de HTML, CSS, tiene herencia. En realidad, es mi intento de finalmente solucionar el desastre. Pero veremos hasta dónde llegué. Aquí está, por ejemplo, el selector de color en línea ahora. Este tipo de cosas, donde tienes un editor de código que se puede ampliar con todo tipo de editores visuales, es una de las razones por las que quiero un modelo de renderizado rápido. El plegado de código simplemente pliega todo con él también.

Pero, ¿por qué? Originalmente, mi motivación original para programar era divertirme con las computadoras. Quería hacer que dibujara gráficos, hiciera sonidos, hiciera cosas divertidas y no luchar con Webpack o no sé qué tipo de problema diferido tienes como desarrollador web. Y por eso quiero mostrarles nuestro primer ejemplo de aplicación porque es divertido que el IDE sea un ejemplo, pero es un ejemplo específico del dominio. Y por eso construí FunAudio. Y FunAudio, a diferencia de LogicAudio, es una aplicación audio que utiliza nuestra API de audio en Mac. Tengo acceso, porque en Rust puedes acceder a todas las API nativas, accedo a la API de unidad audio. Eso significa que puedo cargar instrumentos nativos...

7. Futuro y rendimiento de MakePad

Short description:

Puedo cargar componentes de instrumentos nativos en la interfaz de usuario. Rust permite un despliegue web limitado y un rendimiento potente en escritorio. El futuro incluye una versión de código abierto en tres meses y el próximo lanzamiento de una herramienta de diseño. MakePad en la web es ligero y carga rápidamente. La demostración mostró colaboración en WebVR, que funcionó bien con WebAssembly. El milisegundo de tiempo de CPU mostrado es significativo para el rendimiento en varios dispositivos.

Puedo cargar componentes de instrumentos nativos directamente en la interfaz de usuario. Esto también se puede compilar para la web, pero luego no obtienes todas estas características agradables porque esto es a lo que te limita el entorno de seguridad de la web. No puedes hacer esto. Simplemente no hay forma. Y con Rust, tienes el poder de estar limitado en la web, pero puedes implementar y tener el poder en el escritorio. Y por eso me emociona esta pila tecnológica. Es un enfoque muy diferente para llevar la web al escritorio, es poner el escritorio en la web.

De acuerdo. Quedan unos cuatro minutos. Entonces, ¿cuál es el futuro? ¿Cuándo pueden ustedes usar esto? Tendremos una versión de código abierto en crates, que es el NPM para Rust, para que puedas instalar fácilmente la pila en aproximadamente tres meses, incluyendo algo de documentación. Y estamos trabajando para lanzar la herramienta de diseño lo antes posible. Y para eso, yo... Puedes abrir makepad.dev, eso fue lo que acabas de ver en la web, puedes abrirlo ahora mismo en tu teléfono. Este es el repositorio de GitHub, todo lo que has visto hasta ahora está bajo la licencia MIT en el repositorio de GitHub. Y Twitter, para mí y para el producto. Me quedan unos cuatro minutos. Veamos si puedo agregar algunos detalles interesantes. Así que sí. Así que sí, MakePad en la web, ¿verdad? Si implementas este tipo de aplicaciones en la web, el tamaño importa. No quieres que sean 16 megabytes en la red. Por eso estoy muy emocionado de que esta cosa, tal como la ves aquí, tenga 500 kilobytes en la red, incluyendo todas las dependencias. Es decir, está ampliamente comprimido. Pero aún así, 500 kilobytes para implementar todo esto, y se carga en menos de un segundo hasta la interactividad. Por lo tanto, es muy, muy viable hacer las cosas de esta manera. No es como compilar una enorme cantidad de código para la web como hacen muchas aplicaciones en C++. Y de manera similar, si miramos hacia el futuro de la realidad aumentada y virtual, esta demostración tenía una colaboración pon tu Quest, abre esta URL y estarás colaborando en este espacio de IDE mientras editas en vivo un objeto en el medio. Y también me impresionó mucho eso en WebVR porque pensé, ah, va a ser irregular, ¿verdad? Porque la realidad virtual es tan sensible al rendimiento, si tu recolector de basura se atasca, te sentirás mal porque el fotograma comenzará a tartamudear. Pero si eres muy disciplinado al respecto y solo usas WebAssembly, pude lograr que fuera completamente estable en WebVR.

QnA

Importación de modelos 3D y donación a la fundación

Short description:

Y esto también es cuando ese milisegundo de tiempo de CPU al hacer cosas realmente comienza a importar. Así que sí, creo que este es el final de mi charla. ¿Algún plan para donarlo a una fundación en algún momento? Absolutamente. ¿También es posible importar modelos 3D o texturas desde Blender, por ejemplo? Eso definitivamente es como una herramienta de nivel superior. Sí, absolutamente, pero alguien tiene que escribir el importador. Es una pila de renderizado personalizada con un modelo de sombreado unificado en todas las plataformas.

Y esto también es cuando ese milisegundo de tiempo de CPU al hacer cosas realmente comienza a importar, porque este es un milisegundo de tiempo de CPU en un M1 Max, no en un chip Android mediocre que está en un auricular de realidad virtual. Así que ese milisegundo que te mostré, debes multiplicarlo por 10 para tener tu dominio de aplicación completo para otros dispositivos. Y así, ya sabes, no pienses que estoy optimizando demasiado ese milisegundo. En realidad, es el espacio que tienes para llegar a tu audiencia completa.

Así que sí, creo que este es el final de mi charla. Creo que podemos pasar a las preguntas. ¡Yay, preguntas! Tenemos algunas, así que eso es bueno. De acuerdo. La gente también puede seguir enviando sus preguntas. Si tienes alguna urgente y solo estabas esperando a que terminara la charla para escribir tus preguntas.

Me encanta la pregunta que es... ¿Oh, ya desapareció? Ah, sí. Entonces, ¿trabajas en esto a tiempo completo o hay un patrocinador o una empresa detrás? Durante muchos años, hice consultoría y hice esto como un ciclo iterativo cada vez lo reinicié seis veces. Más recientemente, cuando empecé a trabajar con mis cofundadores, tenemos una startup financiada por ángeles. Pero sí, a tiempo completo. ¿A tiempo completo? Wow. Sí. Eso es realmente genial. ¿Algún plan para donarlo a una fundación en algún momento? Absolutamente. Quiero decir, esta es una pila de open-source, ¿verdad? Lo único que vamos a comercializar es la herramienta de diseño que se encuentra encima de ella. Todas las bibliotecas, todas las dependencias, serán MIT sin restricciones para que todo lo que construyas con esto puedas elegir cualquier licencia que desees, ¿sabes? Así que a medida que esto se vuelva popular y exitoso, con suerte, definitivamente podemos usar uno de esos constructos que muchos proyectos de open-source utilizan. Genial. Muy interesante. Espero que eso responda la pregunta de la persona que preguntó. ¿También es posible importar modelos 3D o texturas desde Blender, por ejemplo? Eso definitivamente es como una herramienta de nivel superior. Sí, absolutamente, pero alguien tiene que escribir el importador. Es una pila de renderizado personalizada con un modelo de sombreado unificado en todas las plataformas. Así que no es GLSL. Es algo que se parece a GLSL, semánticamente GLSL, pero se compila cruzado en todos los backends, Metal, HLSL y WebGL, y en el futuro también WSL.

Motor personalizado de MakePad y futuro

Short description:

Entonces es un motor personalizado que puede hacer todo lo que se puede hacer en Three.js. La implementación de Rust supera a JavaScript. El tiempo de inicio para el IDE es de un milisegundo y puede manejar la representación de decenas de interfaces de usuario simultáneamente. La versión de escritorio estará disponible y el soporte móvil llegará más tarde. El orador no ve un futuro para las interfaces de usuario basadas en Rust.

Entonces es un motor personalizado. Está diseñado para interfaces de usuario, pero técnicamente puede hacer todo lo que se puede hacer en Three.js, pero necesitaremos desarrollar las herramientas adecuadas para eso.

Muy interesante, ¡gracias! ¿Comenzaste construyendo un MVC para la implementación de Rust para saber si realmente superaría a JavaScript, o fue más bien una esperanza de que fuera mejor?

Fue una esperanza. Básicamente, esto no es algo que pueda probar en seco. Simplemente tuve que construirlo y a medida que avanzábamos, me emocionaba más el hecho de que medio milisegundo de tiempo de CPU hiciera algo, y esto significa que la cantidad de ancho de banda que tengo para esta interfaz de usuario, podría representarla, el tiempo de inicio de este IDE en términos de generar la interfaz de usuario es de un milisegundo. Podría dibujar decenas de estas cosas al mismo tiempo en tu teléfono y no importaría. Así que sí. Definitivamente es algo que esperaba, pero diría que es mejor de lo que pensaba.

Increíble. Aquí veo una pregunta sobre si solo seguirá funcionando en el navegador. Mostraste la versión de escritorio que usaste tú mismo. ¿Estará también disponible?

La idea es que queremos tener la potencia de ambos. Quieres la facilidad de implementación en la web y, si tienes restricciones, usar la compilación de escritorio. Y tal vez se refieran a móvil. El soporte móvil llegará más tarde, porque creo que centrarse primero en el objetivo de implementación web es un buen comienzo, porque es un espacio muy grande, especialmente porque estamos conectando las API a Rust. Eso es mucho trabajo. Pero el soporte móvil llegará más tarde.

Muy interesante. ¿Ves un futuro para las interfaces de usuario basadas en Rust? No. Creo que es basura absoluta. No. Esa fue una respuesta muy inesperada. De acuerdo. Muchas gracias. Creo que eso es todo el tiempo que tenemos y pasaremos a las charlas rápidas. Muchas gracias por tu charla.

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
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.
JSNation Live 2021JSNation Live 2021
27 min
Building Brain-controlled Interfaces in JavaScript
Top Content
Neurotechnology is the use of technological tools to understand more about the brain and enable a direct connection with the nervous system. Research in this space is not new, however, its accessibility to JavaScript developers is.Over the past few years, brain sensors have become available to the public, with tooling that makes it possible for web developers to experiment building brain-controlled interfaces.As this technology is evolving and unlocking new opportunities, let's look into one of the latest devices available, how it works, the possibilities it opens up, and how to get started building your first mind-controlled app using JavaScript.
ML conf EU 2020ML conf EU 2020
41 min
TensorFlow.js 101: ML in the Browser and Beyond
Discover how to embrace machine learning in JavaScript using TensorFlow.js in the browser and beyond in this speedy talk. Get inspired through a whole bunch of creative prototypes that push the boundaries of what is possible in the modern web browser (things have come a long way) and then take your own first steps with machine learning in minutes. By the end of the talk everyone will understand how to recognize an object of their choice which could then be used in any creative way you can imagine. Familiarity with JavaScript is assumed, but no background in machine learning is required. Come take your first steps with TensorFlow.js!
JSNation 2022JSNation 2022
21 min
Crafting the Impossible: X86 Virtualization in the Browser with WebAssembly
WebAssembly is a browser feature designed to bring predictable high performance to web applications, but its capabilities are often misunderstood.
This talk will explore how WebAssembly is different from JavaScript, from the point of view of both the developer and the browser engine, with a particular focus on the V8/Chrome implementation.
WebVM is our solution to efficiently run unmodified x86 binaries in the browser and showcases what can be done with WebAssembly today. A high level overview of the project components, including the JIT engine, the Linux emulation layer and the storage backend will be discussed, followed by live demos.
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Unreal Engine in WebAssembly/WebGPU
Top Content
Traditionally, browser games haven't been taken seriously. If you want to target the web, that traditionally has meant compromising on your vision as a game developer. Our team at Wonder Interactive is on a mission to change that, bringing one of the world's premiere native game engines to the browser - Unreal Engine. In our talk, we'll dive into our efforts porting the engine to the browser and carrying on the pioneering unfinished work started at Epic Games nearly a decade ago in collaboration with Mozilla. We'll dive into what this means for the future of games in the browser, and the open metaverse on the web.