Casar juegos WASM/WebGL con interfaz de React

Rate this content
Bookmark

React es fuerte en el desarrollo de interfaces de usuario pero se queda rezagado en el desarrollo de juegos reales. Los motores de juegos son excelentes para eso pero malos en la interfaz de usuario. ¿Cómo combinar ambos?

22 min
21 Jun, 2022

Video Summary and Transcription

Jonny habla sobre cómo casar juegos WASM/WebGL con React, enfatizando la importancia de elegir la herramienta adecuada para el desarrollo de juegos. Presenta el motor de juegos Godot como una poderosa opción para el desarrollo de juegos y destaca las limitaciones de Godot. Jonny demuestra cómo combinar React con Godot y muestra la capacidad de cambiar dinámicamente entre diferentes juegos en el mismo sitio web. Explica el proceso de exportar un juego de Godot a la web utilizando WebAssembly. Jonny también habla sobre la comunicación entre juegos de React y Godot y destaca los beneficios y las mejoras futuras de utilizar este enfoque.

Available in English

1. Introducción al Ponente

Short description:

Hola a todos, soy Jonny, y hoy estoy hablando sobre la combinación de juegos WebAssembly y WebGL con React, o en otras palabras, el uso de la tecnología adecuada para el trabajo adecuado. En mi tiempo libre, me encanta andar en bicicleta. Y mi otro gran pasatiempo son los juegos.

Hola a todos, soy Jonny, y hoy estoy hablando sobre la combinación de juegos WebAssembly y WebGL con React, o en otras palabras, el uso de la tecnología adecuada para el trabajo adecuado. Entonces, primero sobre mí, trabajo en una empresa de redes sociales como ingeniero web, esa empresa de redes sociales tiene un logotipo azul, pero no es Facebook. En mi tiempo libre, me encanta andar en bicicleta. Eso puede ser ayudar a mis hermanos con anuncios de bicicletas, puede ser una bicicleta de carretera, puede ser una bicicleta de montaña, siempre y cuando esté relacionado con bicicletas, probablemente me guste. Y mi otro gran pasatiempo son los juegos.

2. Choosing the Right Tool for Game Development

Short description:

Junto con mi papá, he estado creando múltiples juegos de mesa y desarrollando juegos electrónicos. Me convertí en ingeniero para ahorrar tiempo y quiero hablar sobre cómo elegir la herramienta adecuada para el trabajo. Comencé a usar el motor de juegos Godot y React para ahorrar tiempo. React es declarativo y excelente para crear una interfaz de usuario receptiva. Sin embargo, puede que no sea la mejor opción para juegos con animaciones complejas y el rendimiento es un factor a considerar. El uso de las herramientas correctas puede acelerar enormemente el desarrollo de juegos.

Junto con mi papá, he estado creando múltiples juegos de mesa, como Lost Valley, Nord, Half-Band Heroes, que generalmente se financian a través de campañas de crowdfunding. Y desde la escuela secundaria, también he estado desarrollando múltiples juegos electrónicos.

Inicialmente, todos eran para iOS, pero recientemente he estado ampliando un poco, como podrán notar en la charla, hablo sobre la creación de juegos en la web. ¿Por qué me convertí en ingeniero? Me convertí en ingeniero para ahorrar tiempo, para ahorrar mi tiempo y para ahorrar tiempo a otras personas, para que tengan más tiempo disponible para jugar juegos. Y eso me lleva a lo primero de lo que quiero hablar, elegir la herramienta adecuada para el trabajo.

Mis juegos anteriores los hice principalmente con Cocos2D, pero Cocos2D es un motor de juegos muy basado en código, por lo que es familiar para un desarrollador simplemente escribir el código, pero no es muy eficiente en cuanto al tiempo porque no tiene herramientas. Comencé a usar el motor de juegos Godot, lo cual me permite ahorrar mucho tiempo en el desarrollo web. Me encanta usar React, lo cual también me permite ahorrar mucho tiempo, e intencionalmente lo puse en el lado de los juegos de mesa aquí porque hay una similitud interesante en el desarrollo de juegos de mesa y el desarrollo web con React, y eso es ser declarativo.

Si se me ocurre una nueva regla para jugar en la mesa con mis otros probadores, simplemente les explico aproximadamente la regla y declaro mi objetivo, mi intención, ¿para qué se supone que debe servir este cambio de regla? Luego ellos lo interpretarán y usarán su capacidad de procesamiento cerebral para encontrar una interpretación sobre cómo llevarlo al sistema de juego, cómo ejecutar la regla. Por otro lado, si quiero enseñarle una nueva regla a la computadora para jugar juegos, necesito ser muy preciso en todo.

Preguntémonos, ¿cuál es la forma más rápida de hacer un juego y por qué React podría ser una buena opción para eso, y por qué Godot podría ser una buena opción para eso? Además, y muy importante, ¿cuál es la forma más divertida de hacer un juego? Porque al final, esta es una charla sin interés comercial. Solo se trata de divertirse desarrollando algunos juegos.

Ok, entonces, ¿por qué React? Algunas personas pueden recordar mi charla en la edición remota del React Summit en 2020, donde hablé sobre la creación de Diagonal 4. Lo interesante de ese juego es, en primer lugar, que es muy declarativo. Solo tengo un estado de tablero muy simple. Al final, es solo un campo de bits de ocho por siete piezas. A partir de ese campo de bits, puedo calcular todos los movimientos disponibles para cada jugador y puedo calcular la vista de manera muy directa porque es un estado muy simple y un renderizado muy simple. Eso se mapea bien con React.

La otra gran ventaja de usar React es que es muy fácil crear una interfaz de usuario receptiva y tener algunos sistemas de diseño, lo que facilita aún más en la web. ¿Por qué React podría no ser la mejor opción para hacer un juego o un juego moderno en la web? Veamos este ejemplo, Blood Fever. Es un juego de un vampiro vegetariano que defiende su ataúd contra zombies. Pero el punto importante es que puede haber cientos de enemigos que todos están ejecutando animaciones por sí mismos. No tienen una posición muy discreta. Es más como un estado continuo. Algunos puristas de la Programación Reactiva Funcional podrían decir que sigue siendo un estado y aún puedes hacer cálculos muy atómicos para encontrar posibles acciones del jugador. Y luego poner eso en una máquina de estados muy grande. Por otro lado, con las animaciones, simplemente no es lo mejor, diría yo, para mantener un buen rendimiento. Entonces, solo en cuanto al rendimiento, React podría no ser la mejor opción aquí. Y también las herramientas. El desarrollo de juegos se vuelve mucho más rápido si usas las herramientas correctas.

3. Introducción al desarrollo de juegos con Godot

Short description:

React no está bien equipado para el desarrollo de juegos. Godot es un motor de juegos gratuito y popular con un potente editor. Se exporta a múltiples plataformas y tiene un lenguaje de programación integrado llamado Godot Script, que es fácil de aprender. Godot tiene una comunidad sólida y es una excelente opción para el desarrollo de juegos.

Y React no está realmente bien equipado allí. El ecosistema funciona. Entonces, ¿quién podría aportar buenas herramientas a la mesa? Godot. ¿Por qué usar Godot para el desarrollo de juegos? Lo primero es lo primero, es software gratuito. Es un software muy popular. Si miras este gráfico en OSS Insight a la derecha, verás a Godot convertirse en el jugador más importante con la mayoría de los colaboradores en el espacio de los motores de juegos. Se exporta a web, iOS, Android, Windows, Linux, OSX, prácticamente todas las plataformas que podrías necesitar. Y es un editor muy poderoso. Si miras la captura de pantalla a la izquierda, verás el gráfico de escenas. A la derecha, verás la escena en el editor y el editor de nodos. Puedes hacer clic en cosas simples y moverlas, lo que realmente lo hace mucho más rápido que hacer todo eso solo a través de código. Y por último, trae un lenguaje de programación integrado llamado Godot Script, que es muy similar a Python y puede ser fácil de aprender para muchas personas. Algunas personas aún pueden escribir mal script, pero hay soluciones para eso. Pero esa es una historia para otro momento.

4. Limitaciones de Godot y Combinación con React

Short description:

Godot carece de FlexBlock o Grid, lo que dificulta los diseños. Los menús dentro del juego no se escalan bien, especialmente en pantallas más anchas. Es posible que falten SDK externos, a diferencia del desarrollo web donde la integración es fácil. Los ingenieros web pueden extrañar las herramientas web al usar Godot. La solución es combinar React con Godot, con algunas advertencias: no comercial y solo un prototipo.

¿Por qué tal vez no deberías usar Godot? Bueno, no tiene FlexBlock o Grid, por lo que los diseños pueden complicarse un poco. ¿Por qué podría ser un problema? Solo mira este ejemplo de Age of Empires 3. Ves una captura de pantalla, la pantalla era muy grande, pero el menú no se escaló, así que hicieron algunas imágenes de fondo en movimiento. No es muy bueno. Puede empeorar aún más en el juego si tienes una pantalla aún más ancha. Y donde la persona naturalmente solo miraría al centro de la pantalla y solo vería eso. Y los menús a la izquierda y a la derecha están muy lejos, es posible que necesites girar físicamente tu cabeza. Así que esto es realmente terrible en términos de interfaz de usuario, porque las tooling no son tan buenas, o no están hechas para eso.

Otra razón para no usar Godot es que es posible que falten algunos SDK externos. Una gran ventaja de la web es que es muy fácil ir a npm e integrar algunos modules en tu aplicación. Es un poco más complicado con Godot. Además, en la web puedes simplemente integrar fácilmente un SDK de authentication de Twitter o de Facebook y luego agregar alguna funcionalidad de intercambio, mientras que hacer eso nativamente en el game engine en sí sería mucho más complicado. Y por último, soy un ingeniero web la mayor parte del tiempo, así que podría extrañar algunas tooling web si solo uso el game engine. También quiero estar al día con las cosas web, así que es una forma divertida de jugar. Dicho esto, también se trata de divertirse en esta charla. Entonces, ¿cuál es la solución? Quiero decir, la solución obvia es combinar React con Godot, pero ¿cómo abordaríamos eso? Bueno, primero, advertencia, no comercial. Esta charla, como dije, no tiene ningún interés comercial. Soy solo yo en mi tiempo libre jugando con juegos. Entonces, si quieres ganar dinero con tus juegos, es posible que tengas consideraciones muy diferentes que pensar. La otra advertencia es solo un prototipo. Comencé a desarrollar esto hace unos 2 meses y estaba pensando, oye, ¿cómo puedo combinar mis dos tecnologías favoritas? Se me ocurrió esto, así que lo estoy mostrando en este momento y vamos a ver el ejemplo video. Entonces, todo se está ejecutando en un sitio web. El sitio web está alojado en localhost, está en el Playground y hay otro juego en ejecución en localhost. Entonces, hay mi juego llamado Kellergewurl und Lauf, que es solo un corredor de mazmorras. Y puedes ver la conexión entre la interfaz de usuario de React y el juego en sí. Así que cambié mi nombre. Johnny ahora aparece en el juego mismo. ¿De qué se trata el juego? Simplemente corres en esa mazmorra. Puedes empujar a tu aventurero hacia arriba y hacia abajo y debes evitar a todos los habitantes de la mazmorra y no tocarlos.

5. React UI y Exportación del Juego

Short description:

En esta demostración, mostré cómo cambiar la velocidad del juego usando la interfaz de usuario de React y compartí la posibilidad de generar tweets para compartir puntuaciones en redes sociales. También demostré cómo cambiar dinámicamente entre diferentes juegos en el mismo sitio web, mostrando diferentes patrones de interfaz de usuario. Para comenzar, crea un juego en el motor GoDo, como Caligrelden Live, que es un corredor de mazmorras en 2D. Exportar el juego a la web implica usar el sencillo diálogo de exportación de GoDo, que genera archivos que incluyen el envoltorio game.html, game.js que contiene el código del motor y del juego, game.wasm para WebAssembly y game.pak para recursos. WebAssembly es un formato de instrucciones binarias que permite compilar aplicaciones en un formato binario en lugar de JavaScript.

Ahora, toqué a los desarrolladores, por lo que el juego se reinicia. Creo que eso no fue lo suficientemente rápido, así que usemos la interfaz de usuario de React para cambiar la velocidad del juego. Y, bueno, eso podría haber sido un poco demasiado rápido, así que vamos a reducirlo un poco de nuevo. Y luego acelerarlo de nuevo, solo para ver, como, la conexión es instantánea, por lo que no espera a que el juego se recargue nuevamente para recoger los cambios de estado de la interfaz de usuario de React, sino que es una conexión completa.

Y, bueno, hablemos de algo muy molesto, compartir puntuaciones en redes sociales. Es posible que todos hayamos estado molestos por la locura de palabras y las personas que llenan nuestros feeds de Twitter, pero este juego también puede generar, como, un tweet para ti, estás autenticado en segundo plano en Twitter, puedes presionar compartir y se compartirá automáticamente en tu feed. Es solo una posibilidad de integración web. Pero veamos otra característica, cambiemos de juegos dinámicamente en el mismo sitio web. Ahora estoy cambiando a la versión alojada de Caligrelden Live, que tiene un modo de escalado diferente activado, por lo que ahora solo usa el tamaño de diseño del juego, que es solo 480 x 320. Y por último, cambió a otro juego, Blood Fever, solo para mostrar que también hay otros patrones de interfaz de usuario posibles, el juego que hemos estado usando el teclado y con Blood Fever ahora todo se controla con el mouse, y todo sigue funcionando bien en la web. Y eso es todo para una demostración rápida de combinar React con juegos GoDo en la web.

¿Cómo llegas allí? Bueno, el primer paso es tener un juego en el motor GoDo. Caligrelden Live, como mencioné, es un rápido corredor de mazmorras en 2D. Todo está disponible en GitHub bajo licencia GPL si quieres echar un vistazo. Así que simplemente crea ese juego en GoDo, puedes debugarlo en GoDo. ¿Cómo lo exportas? Bueno, GoDo tiene un diálogo de exportación muy sencillo. Simplemente dices que quieres exportarlo a la web en la versión HTML5. Presionas exportar y generaremos algunos archivos. En realidad, generaremos esta carpeta doc a la izquierda. Ahí estará el juego.html. Este es el envoltorio nativo del juego de GoDo, pero ese envoltorio de juego solo admite ejecutar el juego de forma independiente en el sitio web. Realmente no tiene un entorno agradable para agregar más interfaz de usuario. También hay un archivo llamado game.js, que contiene parte del código del juego y parte del código del motor, pero veremos los detalles de eso un poco más adelante. Dentro hay un archivo game.wasm y un archivo game.pak. El archivo game.wasm es el motor real compilado a WebAssembly y también parte de tu código de juego compilado dependiendo de cómo configures la exportación. El archivo game.pak es básicamente todos los recursos que necesitas para tu juego, que la mayoría de las veces serán texturas o archivos de audio. Entonces, Godot exportó eso, pero ¿cómo podemos usarlo? Retrocedamos un poco inicialmente. Hablemos rápidamente sobre WebAssembly y WebGL. Eso podría ser relevante para ti. WebAssembly, hay una descripción larga que puedes leer si quieres, pero hablando en términos generales es solo el formato de instrucción binaria al que las aplicaciones pueden compilar si no quieren, por ejemplo, compilar a JavaScript u otra transpilación, sino que es más como un formato binario.

6. WebGL Rendering and Local Architecture

Short description:

El motor Godot puede compilar el código del motor en C++ a WebAssembly, lo que permite renderizar gráficos 3D y 2D con WebGL. WebGL renderiza en un lienzo, eliminando la necesidad de elementos DOM. El archivo game.js se encarga de mapear entre el código JavaScript y el código de WebAssembly, mientras que el código del motor carga los archivos fetch. No se recomienda el uso de iframes debido a posibles problemas de CORS y de mensajería. La arquitectura local implica renderizar el juego en un contexto WebGL, que es configurado por el host gsgd. La infraestructura para publicar juegos puede simplificarse utilizando un proyecto Godot, subiéndolo a un repositorio de juegos en GitHub y utilizando los flujos de trabajo proporcionados en el paquete KS Godot CI.

Y eso es muy común para los motores nativos agregar ahora otro objetivo de compilación. El motor Godot puede simplemente elegir WebAssembly como otro objetivo de compilación y luego puede compilar el código del motor en C++ a eso. WebGL es una API de JavaScript para renderizar gráficos 3D y 2D. Personalmente me encanta hacer juegos en 2D porque es más fácil como desarrollador único tomar algunos gráficos de Open Game Art en Internet de forma gratuita y usarlos en sus propios juegos. Es mucho más rápido que con 3D, pero también podrías, con la tecnología presentada aquí, construir un juego en 3D si quisieras.

Y WebGL también significa que estás renderizando en este lienzo. Eso significa que no hay más elementos DOM para el propio juego. Es todo un objetivo de píxeles. Se renderiza en la textura y la textura se renderiza en el lienzo. Bueno, suficiente con esa excusa. Volvamos al archivo game.js. El archivo game.js considera una gran área de dos partes. La primera parte, que parece muy espantosa, por eso no estoy haciendo zoom, es en última instancia solo mapear parte del código JavaScript a parte del código de WebAssembly. La conexión de ida y vuelta funciona, pero podemos ignorar eso por completo porque no importa en absoluto para incrustar nuestros juegos. También hay algo de código del motor. Ese código del motor carga los archivos fetch. Eso es un poco más relevante para nosotros porque el envoltorio de Godot que estoy presentando extrae parte de ese código del motor.

Ahora, podrías preguntar, bueno, Godot lo proporciona completamente. ¿Por qué no podemos simplemente usar un iframe? Sí, podrías no usar un iframe, pero tampoco puedes usar un iframe porque podrías tener algún problema con CORS porque vas a ejecutar instalaciones donde no puedes ejecutar el código. Si quieres, podrías ejecutar una instalación donde no puedes enviar mensajes al iframe porque está bloqueado. Además, simplemente usar un iframe no es realmente el enfoque de React, diría yo. Entonces, ¿cuál será nuestra arquitectura local? Bueno, primero las cosas primero, el usuario visita el sitio web, el sitio web renderiza alguna interfaz de usuario y esa interfaz de usuario del sitio web también renderiza el host gsgd, que se proporciona en un paquete local. Ese host gsgd luego va a algún otro host web, donde subiste el archivo game.js, game.pak y el archivo wasm que se exportan, y luego el host carga ese JavaScript en el contexto local. Recoge la definición del motor del archivo game.js. Lo instancia y también proporciona un contexto WebGL, y luego el motor comienza a ejecutarse y se renderiza en el contexto WebGL con el que el usuario puede interactuar.

¿Cuál es la infraestructura para eso? Porque suena muy horrible configurar todo eso para todos los juegos que quieres publicar. Además, nuevamente, creo que una solución muy conveniente y divertida para eso es simplemente tener un sitio web de incrustación en el que quieras trabajar, tener un proyecto Godot en el que quieras trabajar. El proyecto Godot simplemente se envía a un repositorio de juegos en GitHub. En un archivo YAML, puedes reutilizar los flujos de trabajo que proporciono en el paquete KS Godot CI. Estos flujos de trabajo utilizarán una imagen Docker para compilar el juego en el CI con el objetivo web, y luego se publicarán en la página del juego y puedes ejecutar tu CI normal en tu repositorio web como estás acostumbrado.

7. Comunicación entre React y el juego GoDo

Short description:

Tu página web obtiene los archivos de datos del juego y los ejecuta. La comunicación entre React y el juego GoDo implica compartir propiedades a través del objeto window y utilizar devoluciones de llamada. Las señales en el lado de GoDo permiten cambiar el nombre del power-up y otros componentes del juego pueden leer las señales. Es un proceso simple y directo.

Y luego tu página web está configurada para obtener los archivos de datos del juego desde la página del juego y luego puede ejecutarlo desde allí.

El siguiente paso, podrías preguntar, ¿podemos realmente ver el código? Absolutamente. Todo está disponible en línea. También puedo compartir una captura de pantalla para mostrar los fundamentos básicos, pero realmente no tengo tiempo para entrar en los detalles. Así que veamos una abstracción de alto nivel aquí.

¿Cuál es la comunicación real que ocurre entre React y el juego GoDo que se ejecuta en tu sitio web? En el componente del sitio web, tienes un componente host. Ese componente host tiene propiedades de un nombre de jugador y un power-up. Hay una devolución de llamada onReportScore para activar esa ventana emergente de compartir puntuación. El host compartirá estas propiedades a través del objeto window, porque necesita haber un intercambio de ida y vuelta para compartir las devoluciones de llamada con el juego. El propio juego GoDo buscará en el objeto window, verá, okay, ¿cuál es mi nombre de jugador inicial? ¿Cuál es el valor inicial de mi power-up? Luego también estableceremos estas dos funciones onPlayerNameChanged y onPlayerPowerUpChanged en la ventana. Si las propiedades cambian en tu componente, se llamarán estas devoluciones de llamada. Y luego hay señales en el lado de GoDo, como la señal PlayerNameChanged, que se activará si quieres cambiar el nombre del power-up, y luego los otros componentes del juego pueden leer las señales. ¿Cómo se ve? Muy simple. Al final, solo estás registrando una devolución de llamada para decir, okay, cuando cambie el power-up, llamemos a esa función. En este caso, esto cambia ligeramente algunos de los efectos de partículas. Eso es en realidad la mayor parte desde la perspectiva técnica.

8. Qué está funcionando bien y mejoras futuras

Short description:

La carga y el almacenamiento en caché de juegos funcionan bien. La comunicación entre React y GoDo es impecable. Agregar nuevos juegos a tu propio parque de juegos personales es fácil. La experiencia del desarrollador es agradable. Es muy divertido usar tu motor de juegos completo y reutilizar juegos en tu sitio web personal de React.

¿Qué está funcionando bien en este momento? Funciona bien la carga y el almacenamiento en caché de juegos. Está prácticamente completo en cuanto a funciones. Es rápido. Volverías al sitio web. Obtendrías la versión en caché. Todo funciona bien. La comunicación entre React y GoDo funciona perfectamente, como se vio en el ejemplo. Es solo ir y venir. Instantáneamente, podría ser un poco más abstracto, pero más sobre eso en un momento. En general, es muy fácil agregar nuevos juegos a tu propio parque de juegos personales. Diría que la experiencia del desarrollador es muy agradable. Puedo crear un nuevo repositorio de juegos, reutilizo mis flujos de trabajo y prácticamente se ejecuta en GitHub al instante. Eso es bastante bueno. Lo más importante, es muy divertido, porque puedes usar tu motor de juegos completo y aún así reutilizar los juegos en tu sitio web personal de React. Tomar nuevas tecnologías y tecnologías con las que estás familiarizado. ¿Qué se podría mejorar en el futuro? Bueno, la recolección de basura aún no es perfecta, porque a veces el motor de juegos se queda y ocupa algo de memoria, así que tendré que investigar eso. Se podrían integrar más integraciones, como, por ejemplo, el SDK de Twitter para compartir tweets, o un SDK de anuncios si realmente quieres ganar dinero con los juegos, cosas así. Y la comunicación entre Godot y el juego podría ser un poco más abstracta. Puede que notes que no es la parte divertida, así que no lo he investigado, pero lo haré en el futuro. Y la última pregunta, ¿quieres probarlo? Todo está disponible en GitHub en github.com. Hay diferentes repositorios que puedes consultar. Hay dos juegos de ejemplo. Hay un paquete de CI. En realidad, hay un paquete de puente GSGD, que proporciona el componente de React mencionado. Y si tienes alguna pregunta adicional, no dudes en contactarme en ChaosYogo en Twitter. Y muchas gracias por escuchar.

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

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
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.

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn