3+ Usos de React en un Estudio de Juegos

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

¿Cómo es React si vienes de un fondo de C#/C++ y Unity? Hacer herramientas es fácil, ¿pero puedes lanzar un juego completo con él?

This talk has been presented at React Day Berlin 2022, check out the latest edition of this React Conference.

FAQ

Hendrik es un desarrollador de juegos para móviles que vive en Berlín.

Playpack Games se especializa en crear juegos multiplataforma con un fuerte y significativo elemento social.

Hendrik utiliza principalmente C++ o C# con Unity para desarrollar juegos para móviles.

React es una biblioteca de JavaScript para construir interfaces de usuario. Hendrik menciona que es bastante nuevo en React, indicando que su experiencia es limitada.

Playpack Games se enfoca en desarrollar juegos casuales y gratuitos para dispositivos móviles.

Playpack Games utiliza una tienda de clave-valor como Firebase para almacenar el progreso del jugador en la nube.

Hendrik observa que el proceso básico de desarrollo de juegos no ha cambiado mucho desde los años 90, describiendo cómo los activos y el código fuente siguen siendo compilados en un paquete ejecutable.

La atención al cliente se maneja mediante herramientas que permiten modificar el progreso del jugador directamente en la base de datos, lo cual facilita la retroalimentación y las recompensas dentro del juego.

Hendrik Demmer
Hendrik Demmer
29 min
02 Dec, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Los desafíos y soluciones en el desarrollo de juegos incluyen guardar juegos en la nube, herramientas de soporte al cliente y cambios remotos en el progreso del jugador. Los editores personalizados en el desarrollo de juegos se pueden generar en base a un esquema de base de datos. El uso de tecnologías web en el desarrollo de juegos puede llevar a juegos más rápidos y mejores. El orador discute la pila tecnológica utilizada en el desarrollo de juegos, incluyendo TypeScript, React y React Native. La charla concluye con consejos para los desarrolladores web que hacen la transición al desarrollo de juegos.
Available in English: 3+ Uses of React at a Game Studio

1. Introducción al Desarrollo de Juegos

Short description:

Soy Hendrik. Hago principalmente juegos para móviles y tengo curiosidad por la web. Trabajo en Playpack Games, un nuevo estudio en Berlín. Creamos juegos multiplataforma con un elemento social. Presentaré tres casos de estudio, reales pero ilustrativos. Vamos a hacer un juego para un solo jugador para móviles, casual y gratuito. El desarrollo de juegos no ha cambiado mucho desde los años 90.

♪♪ ♪♪ Maravilloso. Muchas gracias, Kathleen. Bienvenidos a todos. Gracias por unirse aquí. Va a ser un día interesante, sin duda, así que comenzaré con una breve introducción, de nuevo.

Soy Hendrik. Vivo aquí en esta ciudad, así que es un placer dar una charla aquí. Hago principalmente juegos para móviles, y lo hago en C++ o C Sharp utilizando Unity, pero como dije, siempre he tenido mucha curiosidad por la web desde los primeros tiempos en los que empecé a trabajar. Y he trabajado para algunas compañías muy geniales en proyectos emocionantes con personas realmente inteligentes. Así que, buenos tiempos, pero hoy en día trabajo en Playpack Games, que es un nuevo estudio aquí en Berlín. Bueno, estamos basados aquí, pero en realidad trabajamos desde cualquier lugar, y aquí puedes ver a mi maravilloso equipo de todo el mundo. Nuestra declaración de misión es crear juegos multiplataforma con un fuerte y significativo elemento social.

Muy bien. Así que, tal vez un breve descargo de responsabilidad. Soy bastante nuevo en React. Si estás buscando una inmersión profunda o cosas técnicas, hay charlas mucho mejores para eso en esta conferencia, estoy seguro de ello. Voy a presentar tres casos de estudio, y todos estos son reales, pero cambié algunos de los nombres y los gráficos, porque eso es de tiempos de freelance, y también para hacerlo más ilustrativo.

Muy bien, ¿puedo empezar con una rápida muestra de manos? ¿Quién de ustedes ha hecho algún tipo de juego? Maravilloso. ¿Quién ha usado Unity para hacerlo? Todavía hay bastantes. Impresionante. Muy, muy genial. Quiero decir, esta es la pista de juegos, así que no debería sorprenderme tanto, pero es genial verlo. Así que, hagamos un juego. Hagámoslo para un solo jugador. ¿Por qué? El multijugador es realmente, realmente, realmente difícil. Así que, el modo de un solo jugador es mucho más fácil. Vamos a lanzarlo en móviles y hagámoslo casual y gratuito, porque eso es lo que hace mi estudio.

El desarrollo de juegos, como resultó, no ha cambiado mucho desde los años 90, si somos honestos. Así que te sientas frente a una computadora, tienes algo de código fuente, tienes algunos activos, tienes herramientas y editores para trabajar con ellos. Los viertes en una gran caja, y luego sale un paquete, que es como un ejecutable, y eso se ejecuta en la computadora de otra persona.

2. Desafíos y Soluciones en el Desarrollo de Juegos

Short description:

Si construyes actualmente para un dispositivo Android o iOS, sigues construyendo un paquete. Los desarrolladores de juegos se especializan en hacer que las cosas se vean geniales y se sientan geniales. Vamos a hacer un juego y enviarlo a plataformas móviles. Las personas esperan poder guardar sus juegos guardados en la nube. El soporte al cliente puede dar retroalimentación y recompensas a los jugadores. El progreso del jugador se almacena en una base de datos. Podemos cambiar el progreso del jugador de forma remota. Construyamos una herramienta de servicio al cliente con una pequeña aplicación React. La herramienta programa un comando en la base de datos.

Aún es prácticamente lo mismo. Si construyes actualmente para un dispositivo Android o un dispositivo iOS, al final, sigues construyendo un paquete, ¿verdad? Y como puedes ver, en ningún momento entra en juego la cloud o alguna forma de servidores aquí.

Los desarrolladores de juegos son realmente especializados, ¿verdad? Son personas de front-end que son realmente buenas en hacer que las cosas se vean geniales, se sientan geniales, performance, hacer que los juegos sean divertidos. Pero muchos de ellos en realidad no conocen mucho sobre el mundo web más amplio que existe.

Muy bien, vamos a hacer un juego, lleva un tiempo, y luego después de tres a seis meses, tienes un juego. Maravilloso, tal vez lo hiciste en Unity, lo envías a plataformas móviles, está allí, está en el dispositivo, ¿verdad?, es para un solo jugador, todo se ve genial. Pero ya no estamos en 1999 y la gente tiene expectativas. Por ejemplo, cuando un jugador cambia de teléfono, como la gente hace, como cada año, algunos de ellos, esperan poder guardar sus juegos guardados y no ponerlos en un disquete. Así que tenemos que almacenarlos en algún lugar de la cloud. ¿Verdad? Otra cosa, la gente espera soporte al cliente, ¿verdad? El soporte al cliente debería poder, dentro del juego, dar retroalimentación o recompensas a los jugadores. Bien. ¿Cómo empezamos con eso? Empecemos poniendo el progreso del jugador dentro de una database, ¿verdad? ¿Qué tan difícil puede ser eso? El progreso es un solo documento JSON, vive en el dispositivo. Así que en lugar de tenerlo solo en el dispositivo, lo ponemos en una tienda de clave-valor, algo como Firebase funciona muy bien. Las grandes compañías tienen sus propias soluciones, ¿verdad? Hay un SDK para eso. Así que en realidad no tenemos que hacer nada de cosas backend.

Bien. Cuando el juego se carga, lo cargamos, ¿verdad? Cada vez que hacemos cambios, lo escribimos de vuelta en la database. Funciona bastante bien. Genial. Notas algo aquí. Ahora podemos cambiar el progreso del jugador de forma remota, ¿verdad? Porque podemos jugar con el estado del juego en la database. Así que hagámoslo y resolvamos el problema del servicio al cliente, ¿verdad? OK, el caso aquí es que el jugador nos contacta, el juego se comportó de alguna manera incorrecta, ya sabes, algo salió mal, y queremos recompensarlos con alguna moneda o algunos objetos o algo así, ¿verdad? Y queremos escribir un pequeño mensaje allí. Ahora, las personas del servicio al cliente no deberían hacer entradas manuales en la database. Así que deberíamos tener una herramienta para esto. ¿Qué herramientas deberíamos construir? ¿En qué lenguaje? Debería ser utilizable por no desarrolladores. Hmm, es hora de aprender un poco de React, ¿verdad?

Caso uno, una herramienta de servicio al cliente. Construyes una pequeña aplicación React, se comunica con la database, ¿verdad? Nuevamente, como Firebase, hay un SDK, no tienes que aprender algo realmente difícil, ¿verdad? Como un buen patrón aquí, probablemente para cosas como esta, no escribas directamente en la database y cambies el estado, haz que el jugador lo confirme, porque se siente mucho, mucho mejor, ¿verdad?, como parte de la conversación de servicio al cliente. Puedes ver aquí, la herramienta a la izquierda programa un comando en la database. El dispositivo lee el comando, lo aplica, y lo escribe de vuelta cuando se consume. ¿Verdad, y esto es cómo se ve esta herramienta, ¿verdad? Todo esto debería resultarte muy familiar, un poco de material UI con algunas cajas de texto y tal vez algunos editores personalizados, porque quieres tener estos elementos allí y tener algunos selectores y cosas así.

3. Desafíos en el Desarrollo de Juegos

Short description:

Y en la parte inferior, hay un gran botón que lo escribe todo en la base de datos. ¿Cómo sabe la herramienta de React qué elementos están en el juego o qué recursos? ¿Podemos visualizar el progreso de un jugador en la herramienta? ¿Quién se encarga de actualizar estos datos cuando el juego obtiene nuevo contenido? Los diseñadores de juegos usan Microsoft Excel para visualizar datos, pero es limitado para simulaciones. Escriba una pequeña aplicación React para aislar la lógica central compleja. Construya un sistema de gestión de contenido para administrar todo el contenido. Use un flujo de trabajo similar a Git para el control de versiones y almacene las entradas de la base de datos como archivos JSON.

Y en la parte inferior, hay un gran botón que lo escribe todo en la base de datos, y eso es genial. Así que hospedas eso en algún lugar, lo proteges con OAuth o algo así, ya sabes, lo proteges, y luego se lo entregas al servicio al cliente y listo. No se necesitan más desarrolladores.

Bueno, ¿cómo sabe la herramienta de React qué elementos están en el juego o qué recursos? Además, ¿podemos visualizar el progreso de un jugador en la herramienta de alguna manera para que lo vean las personas del servicio al cliente que la usan? ¿Y quién se encarga de actualizar estos datos cuando el juego obtiene nuevo contenido?

Así que retrocedamos un paso. Volvamos al desarrollo de juegos, ¿de acuerdo? En producción, estamos haciendo nuestro juego y los juegos son simulaciones, más o menos, ¿verdad? Y eso generalmente significa un sistema más o menos complejo, ¿verdad? Y los sistemas complejos son difíciles de comprender. Y acertar con la dificultad es realmente crucial. Quiero decir, ese es el trabajo de los diseñadores de juegos asegurarse de que el juego sea divertido porque tiene la cantidad correcta de dificultad.

Entonces, ¿cuál es la herramienta principal que utilizan los diseñadores de juegos? Sí, es Microsoft Excel, porque ya sabes, es una gran herramienta, en realidad, para visualizar grandes cantidades de datos numéricos. Tienes fórmulas allí, pero cuando se trata de ejecutar simulaciones, es muy limitado, ¿verdad? ¿Qué pasa si quieres introducir aleatoriedad o cosas a lo largo del tiempo, o tienes bucles de retroalimentación?

Entonces, ¿por qué no escribir una pequeña aplicación React, ¿verdad? Aísla esta lógica central compleja. Básicamente, hazlo un mini juego. Tienes algunos controles deslizantes y todo eso, ¿verdad? Y construyes eso junto con tu diseñador. Es muy rápido iterar porque lo haces de forma independiente, completamente independiente del resto del juego. Cuando estés satisfecho con eso, transfiere todo eso de vuelta al juego.

Pero tienes el mismo problema aquí. ¿Dónde se administra todo ese contenido, ¿verdad? ¿Dónde vive eso? Hmm. Entonces, ¿por qué no ir a lo grande y construir un sistema de gestión de contenido? Quiero decir, después de todo, si miro a los patrocinadores, esto es algo con lo que React parece ser bastante popular, ¿verdad? Así que tomemos todas estas hojas de cálculo, todo este contenido y muévelo a alguna forma de sistema de gestión de contenido. ¿De acuerdo? ¿Qué deberíamos usar? Bueno, pregunta número uno, ¿qué base de datos deberíamos usar? Personalmente, me gusta mucho un flujo de trabajo similar a Git. Esto es algo a lo que estamos muy acostumbrados en los estudios de juegos, tener alguna forma de control de versiones allí. Como ramas, versiones etiquetadas. Debería ser fácil de configurar localmente, tal vez utilizable sin conexión. No sé. Me gusta trabajar en el tren. Git para datos es un problema realmente interesante. Si sabes más sobre esto, como bases de datos que tienen un flujo de trabajo similar a Git, háblame, porque tengo mucha curiosidad al respecto. Pero al final, lo que hicimos fue tener cada entrada de la base de datos como un solo archivo JSON. ¿De acuerdo? Por lo tanto, esto es muy fácil de leer por herramientas externas, tu motor o tus herramientas de React. Es muy fácil de diferenciar en Git. Las personas están muy acostumbradas a eso. Y admite referencias bastante bien, ¿verdad? Si lo piensas un poco.

4. Editores Personalizados y Desafíos en el Desarrollo de Juegos

Short description:

Si tienes un esquema de base de datos, puedes generar editores personalizados basados en él. Esto está inspirado en Rails. Puedes escribir editores personalizados en React, con características como campos desplegables y corrección ortográfica en línea. En el mundo del desarrollo de juegos, no tenemos navegación basada en enlaces, validaciones, deshacer y rehacer, ni pestañas del navegador. Los ingenieros dan por sentado los monorepos, pero en el desarrollo de juegos, lidiar con submódulos y repositorios distribuidos es más complicado. Tener acceso al código fuente para todo no es común en el mundo del desarrollo de juegos, pero en un monorepo, puedes navegar fácilmente a cualquier parte del código fuente.

Y luego, además, si tienes un esquema de base de datos, puedes generar editores personalizados basados en ese esquema. ¿Verdad? Así que sabes que cierta entrada dentro del esquema es una cadena con ciertas validaciones. Luego, renderizas un campo de texto y aplicas esas validaciones a eso. ¿Verdad? Esto está muy inspirado en Rails. Sé que ha pasado un tiempo, pero eso fue una de las primeras cosas con las que me expuse en la web y me pareció muy fascinante. ¿Verdad? Además, si quieres profundizar realmente, puedes escribir editores personalizados. Es divertido en React, en mi opinión. ¿Verdad? Y tienes cosas como campos desplegables listas para usar. Puedes decirle al escritor que escribe estos diálogos que su texto se está alargando un poco. Y tal vez tienes corrección ortográfica en línea y todo eso. Y eso me lleva a un punto muy importante, porque ustedes dan por sentado muchas cosas. Cosas que realmente no tenemos en el mundo del desarrollo de juegos. ¿Verdad?

Piensa en lo que tus usuarios dan por sentado. Y los usuarios, en mi caso, son el resto de mi equipo que tiene que trabajar con este CMS, ¿verdad? Navegación basada en enlaces. No tienes eso en Unity. No tienes eso en Excel. ¿Verdad? Validaciones, difícil de realmente, ya sabes, tienes que poner algo de trabajo, deshacer y rehacer, corrección ortográfica, eso está a solo un complemento del navegador de distancia. Y además, las pestañas del navegador son increíbles. ¿Verdad? Puedes tener múltiples vistas de los mismos datos. Y hacer eso en Unity, por ejemplo, se vuelve realmente complicado.

Además, las cosas que das por sentado como ingenieros, y supongo que aquí hay algunos ingenieros, ¿verdad? Los monorepos son un cambio de juego. En el desarrollo de juegos, por lo general tienes que lidiar con, en el mejor de los casos, submódulos, tal vez repositorios distribuidos, tal vez alguien haya creado un Administrador de Paquetes casero. ¿Verdad? Todo es mucho más complicado. No estamos acostumbrados a tener acceso al código fuente para todo. Unity es de código cerrado. Muchas cosas son de código opaco. Así que puedes adivinar o tal vez encontrar una versión antigua. Y además, si lo tienes en algún monorepo, puedes hacer clic para navegar a cualquier parte del código fuente.

5. Desarrollo de Juegos y Pila Tecnológica

Short description:

Eso es increíble. Los tiempos de iteración en el desarrollo de juegos han mejorado drásticamente con tecnologías como ES build y recargas del navegador. La recarga de módulos en caliente permite realizar cambios en el código mientras el juego se está ejecutando, una característica que no se encuentra comúnmente en el mundo de los juegos. Los navegadores, a pesar de su reputación, son herramientas confiables de implementación multiplataforma. Las herramientas, incluidos los depuradores y los perfiles, son maduras y tienen un buen soporte. Construimos un juego completo en TypeScript y React, con un tiempo de ejecución en TypeScript y un editor construido sobre el sistema de gestión de contenido. El juego se implementa en dispositivos iOS y Android utilizando React Native. Las soluciones de código abierto proporcionan canalizaciones de CI y el soporte de SDK de terceros es sólido. Se utiliza React Pixie para renderizar la interfaz de usuario del juego, lo que permite una fácil iteración y cambios mientras el juego se está ejecutando.

Eso es increíble. No estamos acostumbrados a eso. Los tiempos de iteración. Si alguna vez has trabajado con Unity, sabes que lleva unos segundos. En C++, podrías hablar de minutos hasta que obtienes tu compilación en el dispositivo. Mientras que con cosas como ES build y recargas del navegador, puedes reducirlo a menos de un segundo. Eso es simplemente increíble.

La recarga de módulos en caliente es un cambio de juego absoluto. Poder hacer cambios en el código mientras el juego se está ejecutando y ver los cambios reflejados de inmediato, incluso en el dispositivo, es absolutamente increíble. Normalmente no tenemos eso en el mundo de los juegos.

Además, sé que los navegadores reciben muchas críticas por no ser compatibles con los estándares. Pero en general, son sorprendentemente confiables como herramientas de implementación multiplataforma. Tienes web sockets. Son una herramienta realmente poderosa para comunicarse desde el cliente hasta el servidor y configurar las cosas como quieras. Y en general, diría que las herramientas son muy, muy maduras. Realmente puedes ver que muchas grandes empresas de tecnología han invertido mucho tiempo y dinero para asegurarse de que los depuradores y los perfiles sean realmente buenos.

Bueno, ¿por qué hablo de todo esto en pasado? Bueno, en realidad, recuerda este juego del que mencioné al principio, ¿verdad? Aquí está, ejecutándose dentro del sistema de gestión de contenido en el navegador. Y los casos uno y dos son como este enlace de administrador aquí y la herramienta de juego de los clientes allí a la derecha. Nuevamente, esto sucedió en otras empresas, pero es un caso de uso tan común que esto sucedió nuevamente en este proyecto.

Sí, construimos un juego completo en TypeScript y React, ¿verdad? El tiempo de ejecución está en TypeScript. El editor está construido con React sobre el sistema de gestión de contenido. Hay un pequeño mundo 3D. Hay horas de juego. Esperamos que pronto haya multijugador, ¿verdad?, impulsado por Node.js y WebSockets, y todo esto se implementa en dispositivos iOS y Android, ¿verdad? Porque hay más React, ¿verdad? Simplemente puedes usar React Native y enviar cosas a iOS y Android, ¿verdad? El código abierto es increíble. Obtienes canalizaciones de CI como un problema resuelto, ¿verdad? No tienes que configurar tu propio Jenkins para hacer compilaciones y lidiar con la firma y todo eso. Muchas personas han resuelto estos problemas. Y el soporte de SDK de terceros es bastante bueno, ¿verdad?

Además, y encuentro eso realmente fascinante, usamos React Pixie para renderizar la interfaz de usuario del juego. Es, creo, la parte más experimental de esta pila tecnológica, pero también una que tuvo beneficios increíbles cuando se trataba de poder iterar y hacer cambios en la interfaz de usuario en un juego en ejecución, mover cosas y trabajar con el resto del equipo allí. Nuevamente, la recarga de módulos en caliente es increíble.

6. Desarrollo de Juegos y Tecnología Web

Short description:

Absolutamente puedes lanzar un juego hecho con tecnología web en dispositivos. Incluso si solo construyes herramientas, puedes aprender mucho y eso puede ayudar a mejorar tus juegos. El código abierto es absolutamente increíble, ¿verdad? Las cosas que están disponibles y que puedes unir fácilmente. Quiero decir, Pixie.js merece un gran reconocimiento. Es un motor increíble. Es muy rápido. La comunidad es genial. El código base es muy, muy legible. Creo que el desarrollo de juegos puede aprender mucho de la web. En última instancia, la esperanza es que esto conduzca a hacer juegos más rápidos, y creo que un desarrollo de juegos más rápido al final resulta en mejores juegos, y eso es lo que, ya sabes, nuestra industria es, en última instancia, todo acerca de eso.

Correcto. Sería una mala charla si dijera que todo es increíble, ¿verdad? Y esto es lo que deberías hacer. Algunas advertencias aquí. Si quieres construir un shooter en primera persona AAA, no estoy seguro de que esta sea la forma en la que deberías ir, ¿verdad? Los motores nativos tienen un rendimiento muy, muy bueno, tienen pilas gráficas que no podrás igualar fácilmente por tu cuenta. Además, muchas de las cosas que viste allí requieren herramientas personalizadas. Esto no es algo que puedas obtener fácilmente de la estantería.

Quiero señalar la curva de aprendizaje aquí. Nuevamente, soy bastante nuevo en React, ¿verdad? Entonces, viniendo del desarrollo de juegos, esto es realmente un cambio. Como React con hooks, realmente tienes que entenderlo para asegurarte de que te acostumbras a esa forma de trabajar. Tal vez todo esto te parezca muy normal en este momento. Solo digo que la integración y también la contratación son problemas bastante interesantes cuando estás un poco fuera de lo común. Y esa es la pregunta aquí, ¿verdad? ¿Qué tan grande es la superposición entre el mundo web y el mundo de los juegos? No solo en el sentido técnico, sino también en el sentido de las personas. Y, quiero decir, esta pista me da mucha esperanza, pero es un poco una pregunta abierta. En resumen, absolutamente puedes lanzar un juego hecho con tecnología web en dispositivos. Incluso si solo construyes herramientas, puedes aprender mucho y eso puede ayudar a mejorar tus juegos. El código abierto es absolutamente increíble, ¿verdad? Las cosas que están disponibles y que puedes unir fácilmente. Quiero decir, Pixie.js merece un gran reconocimiento. Es un motor increíble. Es muy rápido. La comunidad es genial. El código base es muy, muy legible. Creo que el desarrollo de juegos puede aprender mucho de la web. En última instancia, la esperanza es que esto conduzca a hacer juegos más rápidos, y creo que un desarrollo de juegos más rápido al final resulta en mejores juegos, y eso es lo que, ya sabes, nuestra industria es, en última instancia, todo acerca de eso.

Y eso es todo. Muchas gracias a todos. Gracias.

QnA

Q&A sobre Git, Go y TypeScript

Short description:

Muchas gracias, Hendrik. ¿Por qué no usar Git en lugar de Adibi para las entidades y propiedades del juego? Sí, es Git para la base de datos. ¿Has considerado Go? Tenía sentido usar nuestra propia tecnología. Go definitivamente tiene una curva de aprendizaje. Viniendo de un fondo en C#, cambiar a TypeScript fue bastante fácil. Lo encontré muy fluido hacer la transición.

Gracias. Muchas gracias, Hendrik. Qué buena presentación. Me gustaría invitarte aquí en la silla porque tenemos algunas preguntas de la audiencia.

Maravilloso. Sí. Así que vamos con la primera. También me preguntaba por qué no usar Git en lugar de Adibi para las entidades y propiedades del juego, y la cantidad de datos seguramente no es abrumadora. ¿Verdad? Así que en realidad es Git, ¿verdad? Todos estos archivos están en control de origen exactamente por esa razón. Pero, ya sabes, eso todavía significa que las cosas están a nivel de archivo. No es una base de datos basada en transacciones, por ejemplo, ¿verdad? Pero sí, al final, la pregunta está absolutamente justificada. Y sí, es Git para la base de datos, sí.

Genial. Hay otra pregunta de un usuario anónimo. ¿Has considerado Go para ver las grandes... Por supuesto, he considerado Go. Es un motor muy bueno, y han hecho muchos cambios en él. Lo miramos al final para lo que estábamos tratando de lograr. Tenía sentido usar nuestra propia tecnología allí. Y me preguntaba sobre la curva de aprendizaje allí, porque es un lenguaje diferente, ¿verdad? Según lo que... Go definitivamente tiene una curva de aprendizaje. Una cosa que no mencioné es que, viniendo de un fondo en C#, cambiar a TypeScript en realidad me resultó bastante fácil. Es el mismo equipo de Microsoft que construyó estos dos motores, y se puede ver que transfirieron muchas ideas. Así que encontré muy fluida la transición a TypeScript. Dame un segundo, porque hay muchas... Mientras reviso las preguntas, también tengo una pregunta propia. Y me preguntaba más sobre la, mencionaste la validación de formularios.

Game Dev Q&A

Short description:

Escribimos nuestra propia solución para el caso de uso ya que las opciones existentes no encajaban. SCAD se refiere a simulaciones en juegos de computadora, especialmente en juegos para un solo jugador. No tenemos aprendizajes específicos sobre la gestión del estado del servidor, pero utilizamos lo que funcionó para nosotros. No hemos conectado código nativo al navegador utilizando WebAssembly, pero no es necesario ya que TypeScript nos permite tener todo en una base de código.

Y me preguntaba, ¿qué has usado para eso? Bueno, lo escribimos nosotros mismos. Estaba mirando el esquema JSON, y hay muchas cosas en ese sentido. Al final, nada encajaba realmente en el caso de uso, así que lo escribimos nosotros mismos. Entonces, las cadenas con expresiones regulares y referencias luego tienen que buscar si ciertos archivos, como las entradas de la database, existen.

De acuerdo. Hay otra pregunta. ¿De qué sería una simulación SCAD? No estoy seguro de qué es SCAD. No lo sé. ¿Alguien de la audiencia? Bueno, está bien. Quiero decir, eso fue... De acuerdo, bastante justo. No todos los juegos son simulaciones hardcore, pero muchos juegos de computadora son simulaciones, en particular juegos para un solo jugador. Debería haberlo dejado más claro.

De acuerdo. Hay otro aspecto interesante, como los aprendizajes sobre la gestión del state del servidor. Si tienes alguno, como núcleos de transmisión de eventos, pequeña F o CRUD abierto. Sí, aplicaciones grandes. ¿Tienes algún aprendizaje desde esta perspectiva, como solución de gestión del state del servidor? ¿Puedes especificarlo? No soy un experto en web, así que no conozco todos los términos. Como usar, por ejemplo, event sourcing, CQRC y nest.js. Tal vez si alguien está en la audiencia aquí, puedes hablar con Patrick después. Sí, habla conmigo después. Eso es lo bueno. El ecosistema web es tan grande, que es imposible tener una visión general de todas las cosas geniales que hay. Así que al final, nos quedamos con las cosas que funcionaron cuando las juntamos.

Hay otra pregunta, ¿has intentado conectar algún código nativo que ya tenías al navegador utilizando WebAssembly? WebAssembly, lo he usado principalmente como usuario. Sorprendentemente, es bueno para nuestra implementación. En realidad, no es necesario, y no me importa escribir el código de mi juego en TypeScript. Así que tengo todo en una base de código. Es muy fácil interoperar. Gracias.

Game UI Tools, Backend Handling, and React Native

Short description:

¿Tienes herramientas para crear la interfaz de usuario dentro del juego en React? Open sourcing herramientas de desarrollo de juegos. Manejo del backend para juegos en línea de alto rendimiento como shooters o MOBA. Estimando partes en el lado del cliente. Usando compras de activos de Unity Asset Store en juegos basados en web. Pasando de React a React Native.

Y hay otra pregunta, ¿tienes herramientas para crear la interfaz de usuario dentro del juego en React, o herramientas integradas? Eso es en realidad un tema muy abierto. Hablo mucho con nuestro diseñador de UI y UX sobre esto, y es algo que queremos abordar porque estas herramientas no existen. Entonces estamos considerando tomar una herramienta de UI existente y escribir un exportador que exporte a ReactPixie o tal vez hacer algunas herramientas nosotros mismos allí. Pero es una pregunta muy interesante.

Sí, solo una pregunta de seguimiento, porque también me preguntaba porque mencionaste que creaste tus propias herramientas internamente. ¿Alguna vez has pensado en hacerlas de código abierto, o hay algo de código abierto en absoluto o cuál es el futuro? Quiero decir, deseo y espero que podamos hacer de código abierto muchas de estas cosas. Como puedes ver, el desarrollo de juegos no es muy afín al código abierto. Creo que es principalmente histórico, pero también es el ritmo del desarrollo de juegos que a menudo no tienes el tiempo y los recursos para poder mantener un proyecto de código abierto al margen.

Hay otra pregunta, ¿cómo manejas el backend para juegos en línea de alto rendimiento como shooters o MOBA? Esa es una pregunta realmente difícil. Nuevamente, tal vez esta no sea la pila de tecnología adecuada para eso. Si quieres un shooter pesado, si lo ejecutas a través de web sockets, puedes tener problemas, tal vez quieras algo que pueda ejecutarse nativamente en tu dispositivo y luego aprovechar UDP. Hay soluciones para eso, pero tal vez esa no sea la tecnología adecuada para eso. ¿Existe alguna posibilidad de estimar algunas partes en el lado del cliente? ¿Qué quieres decir con estimar? Como, ver el futuro en el lado del cliente antes de obtener... Oh sí, sí, no, definitivamente tienes que hacer eso, ¿verdad? Con web sockets, estás hablando de latencias de decenas a cientos de milisegundos, así que necesitas trabajar un poco para ocultar la latencia. Ok, por eso decías próximamente, la parte multijugador, ¿verdad? Quiero decir, también hacer juegos multijugador es realmente difícil. Ok... Hay otra pregunta. ¿Puedes usar compras de activos de Unity Asset Store en tus juegos basados en web? Sí, puedes, sí. Quiero decir, tienes que trabajar un poco, pero hay cosas que pueden, como, tomar archivos OBJ tal vez, o archivos FBX y convertirlos en datos de malla que puedes cargar como búferes de vértices. Quiero decir, eso suena un poco extraño, pero para los desarrolladores de juegos, eso es muy, muy común. Eso es algo que hacemos todos los días, así que está bien. Tengo otra pregunta propia, y también mencionas React Native. Soy un gran fan de React Native, y estás hablando de React Pixie, o ¿cuál fue el proceso para pasar de React a React Native, o qué tuviste que hacer para que esto sucediera? Bien. ¿Quieres decir, al final, lanzar todo el proyecto? Sí. Bien. Entonces, el proceso de implementación actual es tener el juego funcionando como un juego web, y luego envolverlo dentro de una vista web, dentro de una aplicación React Native. Entendido. Y luego hacer puentes hacia las llamadas nativas. Ok, como una aplicación híbrida. Es una aplicación híbrida.

React Native, State Management, and PIXI

Short description:

¿Estás utilizando otras herramientas aparte de React Native para la gestión del estado o las conexiones API? No, en realidad solo utilizamos React y llamadas HTTP. Has elegido la pila adecuada. Tal vez puedas probar Axios y Prisma. ¿Funciona PIXI en React Native? Con PIXI 5 o 6, no funcionaba correctamente. El WebView del navegador parece más confiable. Queremos una implementación independiente de la plataforma.

De acuerdo. Hay otra pregunta como seguimiento a React Native. ¿Estás utilizando otras herramientas aparte de React Native para la gestión del estado o las conexiones API? Sé que ustedes saben mucho más sobre esto, pero estoy bien con hacer llamadas HTTP con Axios, eso es prácticamente mi límite. Quería investigar más sobre GraphQL y la forma en que se pueden hacer API modernas, pero eso está un poco fuera de mi alcance. Por el momento, no, en realidad solo utilizamos React y hacemos llamadas.

Sí, realmente depende porque hoy en día la gente no apuesta por GraphQL de todos modos. Así que creo que elegiste la pila adecuada. Tal vez también puedas probar React Query, inténtalo con Axios y también con Prisma. Ellos también nos patrocinan. Y tenemos tiempo para una pregunta más, creo.

Y esta pregunta es ¿Funciona PIXI en React Native? Esa era en realidad mi pregunta también. Correcto. Y si es así, ¿qué tan eficiente es? Correcto. La antigua versión de PIXI, creo que la versión cuatro o algo así, era compatible con React Native. Los chicos de Expo. Sí, ellos lo hicieron y Evan Bacon dio una charla sobre cómo implementar toneladas de juegos. Y se veía increíble. Lo intenté. Pero con PIXI 5 o 6, simplemente dejó de funcionar correctamente. Así que quería echarle un vistazo. Pero al final, tienes el WebView del navegador como una capa de compatibilidad. Y para mí, eso parece mucho más confiable que simular algunas llamadas de OpenGL en una pila nativa que no controlo tan bien. De acuerdo. Sí. Sí, creo que según tengo entendido, también construyó algunos juegos utilizando Expo 3js. Sí, y portó bastantes paquetes web a React Native, lo cual es realmente... Es realmente increíble. Pero en nuestro caso, eso no funcionó realmente. Además, queremos poder hacer una implementación completamente independiente de la plataforma. Correcto.

Transición de Desarrolladores Web a Desarrollo de Juegos

Short description:

Si eres un desarrollador web interesado en el desarrollo de juegos, hay mucho que aprender. El ritmo y la mentalidad en los juegos son diferentes, pero es una comunidad divertida de la que formar parte. Tanto el desarrollo web como el desarrollo de juegos involucran a personas que quieren construir cosas geniales. Así que atrévete y haz juegos. Gracias, Hendrik, por estar aquí en el escenario. Fue un placer tenerte.

Entonces, si queremos hacer un juego web, también debería funcionar como un juego web. De acuerdo. Y creo que es la última pregunta. Solo para resumir todo, ¿qué crees que son las lecciones desde la perspectiva de un desarrollador web si están entrando o si les gustaría ir al game development, ¿qué crees que son sus... Correcto. O lo que hay que aprender, básicamente. Correcto. Quiero decir, definitivamente hay mucho que aprender. Creo que el ritmo y la mentalidad en los juegos son bastante diferentes. Pero aún así, quiero decir, es muy divertido. Ambos, creo, son comunidades muy divertidas para estar. Quiero decir, ves una conferencia como esta y luego ves conferencias de juegos. Y hay una vibra muy similar de personas que solo quieren construir cosas geniales. Así que diría que si estás buscando eso, atrévete, ¿verdad?, entra, haz juegos.

Sí, muchas gracias. Con eso creo que, sí, las personas pueden encontrarte en la sesión de preguntas y respuestas, salas de discusión para la audiencia remota, sí, muchas gracias, Hendrik. Y fue un placer tenerte aquí en el escenario. Maravilloso, muchas gracias, chicos. Te aplaudo fuertemente, Hendrik. Sí.

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

Una Guía del Comportamiento de Renderizado de React
React Advanced 2022React Advanced 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Compilador React Forget - Entendiendo React Idiomático
React Advanced 2023React Advanced 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Uso efectivo de useEffect
React Advanced 2022React Advanced 2022
30 min
Uso efectivo de useEffect
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
Enrutamiento en React 18 y más allá
React Summit 2022React Summit 2022
20 min
Enrutamiento en React 18 y más allá
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
Concurrencia en React, Explicada
React Summit 2023React Summit 2023
23 min
Concurrencia en React, Explicada
Top Content
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.

Workshops on related topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured Workshop
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Next.js para Desarrolladores de React.js
React Day Berlin 2023React Day Berlin 2023
157 min
Next.js para Desarrolladores de React.js
Top Content
Featured WorkshopFree
Adrian Hajdin
Adrian Hajdin
En esta avanzada masterclass de Next.js, profundizaremos en conceptos clave y técnicas que permiten a los desarrolladores de React.js aprovechar al máximo Next.js. Exploraremos temas avanzados y prácticas prácticas, equipándote con las habilidades necesarias para construir aplicaciones web de alto rendimiento y tomar decisiones arquitectónicas informadas.
Al final de esta masterclass, serás capaz de:1. Comprender los beneficios de los Componentes del Servidor React y su papel en la construcción de aplicaciones React interactivas, renderizadas por el servidor.2. Diferenciar entre el tiempo de ejecución de Edge y Node.js en Next.js y saber cuándo usar cada uno en función de los requisitos de tu proyecto.3. Explorar técnicas avanzadas de Renderizado del Lado del Servidor (SSR), incluyendo streaming, fetching paralelo vs. secuencial, y sincronización de datos.4. Implementar estrategias de caché para mejorar el rendimiento y reducir la carga del servidor en las aplicaciones Next.js.5. Utilizar Acciones React para manejar la mutación compleja del servidor.6. Optimizar tus aplicaciones Next.js para SEO, compartir en redes sociales, y rendimiento general para mejorar la descubrabilidad y la participación del usuario.
Aventuras de Renderizado Concurrente en React 18
React Advanced 2021React Advanced 2021
132 min
Aventuras de Renderizado Concurrente en React 18
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
Con el lanzamiento de React 18 finalmente obtenemos el tan esperado renderizado concurrente. Pero, ¿cómo va a afectar eso a tu aplicación? ¿Cuáles son los beneficios del renderizado concurrente en React? ¿Qué necesitas hacer para cambiar al renderizado concurrente cuando actualices a React 18? ¿Y qué pasa si no quieres o no puedes usar el renderizado concurrente todavía?

¡Hay algunos cambios de comportamiento de los que debes estar al tanto! En esta masterclass cubriremos todos esos temas y más.

Acompáñame con tu portátil en esta masterclass interactiva. Verás lo fácil que es cambiar al renderizado concurrente en tu aplicación React. Aprenderás todo sobre el renderizado concurrente, SuspenseList, la API startTransition y más.
Consejos sobre React Hooks que solo los profesionales conocen
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
Consejos sobre React Hooks que solo los profesionales conocen
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
La adición de la API de hooks a React fue un cambio bastante importante. Antes de los hooks, la mayoría de los componentos tenían que ser basados en clases. Ahora, con los hooks, estos son a menudo componentes funcionales mucho más simples. Los hooks pueden ser realmente simples de usar. Casi engañosamente simples. Porque todavía hay muchas formas en las que puedes equivocarte con los hooks. Y a menudo resulta que hay muchas formas en las que puedes mejorar tus componentes con una mejor comprensión de cómo se puede usar cada hook de React.Aprenderás todo sobre los pros y los contras de los diversos hooks. Aprenderás cuándo usar useState() versus useReducer(). Veremos cómo usar useContext() de manera eficiente. Verás cuándo usar useLayoutEffect() y cuándo useEffect() es mejor.
Presentando FlashList: Construyamos juntos una lista performante en React Native
React Advanced 2022React Advanced 2022
81 min
Presentando FlashList: Construyamos juntos una lista performante en React Native
Top Content
Featured Workshop
David Cortés Fulla
Marek Fořt
Talha Naqvi
3 authors
En esta masterclass aprenderás por qué creamos FlashList en Shopify y cómo puedes usarlo en tu código hoy. Te mostraremos cómo tomar una lista que no es performante en FlatList y hacerla performante usando FlashList con mínimo esfuerzo. Usaremos herramientas como Flipper, nuestro propio código de benchmarking, y te enseñaremos cómo la API de FlashList puede cubrir casos de uso más complejos y aún así mantener un rendimiento de primera categoría.Sabrás:- Breve presentación sobre qué es FlashList, por qué lo construimos, etc.- Migrando de FlatList a FlashList- Enseñando cómo escribir una lista performante- Utilizando las herramientas proporcionadas por la biblioteca FlashList (principalmente el hook useBenchmark)- Usando los plugins de Flipper (gráfico de llamas, nuestro perfilador de listas, perfilador de UI & JS FPS, etc.)- Optimizando el rendimiento de FlashList utilizando props más avanzados como `getType`- 5-6 tareas de muestra donde descubriremos y solucionaremos problemas juntos- Preguntas y respuestas con el equipo de Shopify
React, TypeScript y TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript y TDD
Top Content
Featured Workshop
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.