React + WebGPU + IA - ¿Qué podría salir mal? 😳

Rate this content
Bookmark
31 min
01 Jun, 2023

Video Summary and Transcription

Con IA y web GPU, es un momento emocionante para ser un desarrollador. El viaje del orador implica combinar programación y diseño, lo que lleva a la creación de Pure Blue, un entorno de programación poderoso. Al agregar IA a la mezcla, el orador discute el potencial de la IA en el proceso creativo y su impacto en el desarrollo de aplicaciones. La charla explora el papel de los componentes de React y WebGPU en la edición detallada y la ejecución de modelos de IA localmente. Se discute el futuro del desarrollo de aplicaciones, enfatizando la necesidad de mantenerse al día y aprovechar el poder de JavaScript.

Available in English

1. Introducción al Viaje del Orador

Short description:

Con IA y web GPU, es un momento emocionante para ser un desarrollador. Mucho va a cambiar, incluyendo la forma en que creamos aplicaciones. He estado creando cosas con computadoras desde que era niño, combinando programación y diseño. Sin embargo, usar diferentes herramientas para cada uno era creativamente sofocante. Siempre quise hacer diseño y desarrollo al mismo tiempo, pero parecía imposible.

Entonces, responderemos a esta pregunta en unos minutos. Pero, con IA y web GPU, es simplemente un momento emocionante para ser un desarrollador. Parece que muchas cosas van a cambiar. Creo que estamos creando aplicaciones diferentes. ¿Incluso las llamaremos aplicaciones todavía? No estoy seguro. Pero muchas cosas van a cambiar. Y exploremos algunas de esas posibilidades hoy.

Ahora, ¿quién soy yo? Mi nombre es Aryami Naim. Como la mayoría de nosotros aquí en esta sala, he estado creando cosas con computadoras desde que era un niño. Así es como se veía el lado de la programación al principio. Y así es como hacía cosas de design. En realidad no soy tan viejo. Solo tenía versiones viejas y agrietadas de estas. Pero estaba creando pequeñas aplicaciones, pequeños sitios, pequeños juegos. Y siempre requería tanto programación como design. Así que se acumulaban más herramientas de programación, más herramientas de design. Y siempre fue extraño. Porque cuando estás haciendo un juego o una aplicación, en un día, estás tomando cientos, si no miles de estas micro decisiones de design y desarrollo. Y muchas de esas decisiones simplemente no encajan dentro, digamos, VS Code o 3D Studio MAX. Abarcan todo el espectro de crear una aplicación. Así que siempre fue extraño que tuviera que estar en VS Code, por ejemplo, o en ese momento, digamos, Dreamweaver o en Photoshop. Y tenía todas estas pequeñas ideas micro. Y sentía que en el lapso de cambiar de una aplicación a otra, muchas de ellas morirían. Fue creativamente sofocante. Así que siempre fue extraño. Y siempre sentí que quería hacer desarrollo de design al mismo tiempo, pero todos los días me despertaba, y Morpheus básicamente me ofrecía una de dos pastillas. Toma la pastilla azul o la pastilla roja, haz design o desarrollo. No hay pastilla buena o mala aquí, estoy estirando una metáfora en este momento. Pero tienes que elegir una. Y siempre pensé, ¿puedo tomar ambas? Y él me dijo, así no funciona.

2. La Píldora Violeta y Pure Blue

Short description:

Siempre quise combinar diseño y programación de manera fluida. Flash era un entorno de diseño y desarrollo, pero no era el adecuado. Se han hecho muchos intentos para crear un entorno de diseño y desarrollo fluido, pero es difícil de lograr. Por eso empecé con Pure Blue, un poderoso entorno de programación.

Y siempre quise combinar ambos, como una píldora violeta. Puedes diseñar y programar en el mismo entorno de manera fluida. Busqué este entorno, uno de ellos fue este. ¿Alguien lo recuerda? ¿Sí? De acuerdo. Es una audiencia joven aquí, solo muy pocas manos.

Esto es Flash y a algunas personas les encanta Flash. Yo amo Flash. ¡Sí! ¡Apoyemos a Flash! Tenemos como cinco personas mayores de 30 aquí. De acuerdo, para aquellos que no lo recuerdan, Flash era un entorno de diseño y desarrollo y a mucha gente le encantaba. Hacían cosas increíbles con él. ¿Era esa píldora violeta? No realmente. Podías programar y diseñar en la misma ventana del sistema operativo, pero la programación era limitada, la herramienta de diseño no era tan expresiva como Photoshop o Max y cosas así. Así que no era realmente una píldora violeta. Era más como, ya sabes, un chupetín azul y rojo. Era sabroso. Era muy bueno, pero no era lo correcto.

Así que realmente quería tener esa píldora violeta. Mucha gente ha intentado crear ese entorno de diseño y desarrollo fluido. Simplemente, nunca ha tenido éxito. Es simplemente difícil de lograr. Ha habido muchos intentos a lo largo de los años. En algún momento, pensé que tal vez debería intentarlo. ¿Qué tan difícil podría ser? Ingenuamente, pensé eso. De todos modos, eventualmente eso se convirtió en algo que llamamos TheaterJS. Ahora, toma un enfoque diferente. Pensé que en lugar de crear toda esa píldora violeta desde el principio, lo cual es algo muy difícil de hacer, comencemos con algo de pure blue. ¿Qué es pure blue? Pure blue es un entorno de programación. Puede ser, ya sabes, VS code, el lenguaje de programación puede ser JavaScript o Swift o cualquier otro. Comencemos con algo de pure blue, porque pure blue es súper poderoso. No hay nada que no se pueda hacer con un lenguaje de programación.

3. Pure Blue and Violet

Short description:

Si la CPU y la GPU pueden manejar eso, si la pantalla puede mostrar realmente los visuales, la herramienta de programación puede hacerlo. Comencemos con algo de pure blue y luego agreguemos pequeños trozos de rojo para convertirlo en violeta. Agregamos una herramienta de secuenciación para animación web y dispositivos nativos, seguida de una herramienta de composición 3D. The New York Times utilizó Theater.js para reconstruir tomas de la Copa del Mundo en tiempo real, permitiendo a los usuarios seguir los juegos a través de visualizaciones 3D. Otros ejemplos incluyen una página de reclutamiento de Planet and Wildlife y un scrolly bien elaborado de Studio Freight. Agregar IA a la mezcla es el siguiente paso, y la escena sin IA se construye con 3JS, React 3 fiber y React, con capacidades de edición utilizando Theater.js.

Si la CPU y la GPU pueden manejar eso, si la pantalla puede mostrar realmente los visuales, la herramienta de programación puede hacerlo. Entonces, comencemos con algo de pure blue. Y luego agreguemos pequeños trozos de rojo. Se convierte, como, en violeta lentamente.

Entonces, el primer trozo de violeta que agregamos fue una herramienta de secuenciación. Esto es para personas que hacen animación en la web o, ya sabes, y también algunos dispositivos nativos. Luego agregamos una herramienta de composición 3D, y a medida que avanzamos, simplemente agregamos, ya sabes, más y más de esta cosa violeta. Ahora, es algo... es realmente increíble lo que la gente puede lograr con solo ese pequeño trozo de violeta.

Por ejemplo, aquí está The New York Times. Han estado, por ejemplo, cubriendo la Copa del Mundo. Tenían a alguien en Qatar tomando, como, no sé, cientos, miles de tomas del juego y enviándolas a Nueva York, y luego reconstruían todo en Nueva York utilizando Theater.js para juntar todo porque tienes diseñadores, desarrolladores, periodistas, todos trabajando juntos. No quieres pasar cosas entre ellos. Es todo, ya sabes, es una sala de redacción. Tiene que funcionar muy rápido. Así que usaron Theater.js, y gracias a eso, en realidad puedes, ya sabes, seguir... podrías seguir la Copa del Mundo y podrías seguir estas visualizaciones 3D de los juegos, ya sabes, en ese mismo día. Este es otro ejemplo de Planet and Wildlife. Probablemente la página de reclutamiento más hardcore de todas. Y este es simplemente el scrolly más bien elaborado de Studio Freight. Gran fan de ellos. Entonces, sí. El proyecto se llama Theater.js. Puedes echarle un vistazo en GitHub. Simplemente estamos agregando, ya sabes, más y más violeta a medida que avanzamos.

Muy bien. Todo eso no requirió IA. Así que ahora veamos qué sucede cuando agregamos un poco de IA a la mezcla. Muy bien. Entonces, aquí está mi escena sin IA. Está hecha con 3JS, React 3 fiber si algunos de ustedes lo conocen, y React, básicamente. Y, ya sabes, puedo editar cosas usando Theater.js.

4. AI en el Proceso Creativo

Short description:

Agregar IA al proceso creativo puede ahorrar tiempo y mejorar el flujo de trabajo. Esperar a una IA tipo chatbot puede ser demorado, pero con una IA como copiloto, puedes trabajar de manera más eficiente. El proceso implica manejar variables, solicitar efectos específicos como iluminación de estudio o grano de película, y utilizar código para inicializar la GPU y LLM.

Como puedo cambiar las variables y cosas así. Ahora, esa es una forma de hacerlo. Ahora, hemos agregado un poco de IA aquí. Así que puedo decir algo como, ¿podemos tener algo de iluminación de estudio aquí? Es un poco ruidoso y no tengo mi micrófono, así que es posible que no funcione realmente. Pero veremos. Y mi internet no es bueno, así que lleva un tiempo. Normalmente debería tomar menos de un segundo. Así que espera un momento. Vamos, GPT. Es posible que en realidad no tenga internet. Veamos. Bueno, dijeron que las demostraciones son difíciles. Oh, ahí lo tienes. De acuerdo. Ahora, esto normalmente lleva un segundo. Por cierto, ahora mismo acabamos de ahorrar unos 10 minutos para un usuario experimentado y unos tal vez 15 a 20 minutos para alguien que recién comienza.

¿Podemos agregar algo de grano de película aquí? Ahora, aquí está la cosa. Esto es lo primero que quiero mencionar sobre hacer cosas con IA. Si la IA actúa como un chatbot, puedes esperar a un chatbot. Puedes esperar a que GPT-4 termine sus pensamientos. A veces elijo GPT-4 en lugar de GPT-3 porque me gusta la calidad de la respuesta. Pero si la IA es un copiloto, si quieres que te ayude en tu trabajo creativo mientras lo estás haciendo, simplemente no quieres esperar por las cosas. De acuerdo.

Entonces, ¿cómo funciona esto en realidad? Bueno, este es un código base. Es un seudocódigo. Pero creo que es bastante obvio lo que está sucediendo. Obtienes un controlador para tu GPU. Inicializas tu LLM. Tienes que calentarlo. No hemos hecho eso.

5. The Infinite Loop and App Replacement

Short description:

El proceso implica un bucle infinito donde esperas un comando de voz del usuario. Generas una indicación basada en el comando y la aplicas a la aplicación. Este proceso iterativo continúa reemplazando la aplicación y repitiendo los pasos.

Por eso tomó un tiempo porque estamos usando una oferta en la cloud. Te lo explicaré más adelante por qué. Luego tienes este bucle infinito. Esperas un comando de voz. El usuario dice algo. Tomas ese comando y generas una indicación. Y la indicación es básicamente algo como, oye, aquí está mi aplicación y aquí está un comando. Por favor, realiza ese comando en mi aplicación. ¿Verdad? Así que acabo de pedir que me den luces de estudio y agrega luces de estudio a la aplicación. Ahora obtenemos esa nueva aplicación. La reemplazamos en caliente y repetimos el proceso. Y así es como básicamente funciona todo el asunto.

6. Challenges in Production App Development

Short description:

Configurar la primera iteración de este proceso lleva aproximadamente media hora a una hora. Sin embargo, una aplicación en producción requiere más preparación, incluyendo el manejo de errores, problemas de internet y evitar el cambio de modo, lo cual puede obstaculizar la creatividad.

Ahora, por supuesto, esta es solo la primera iteración. Por ejemplo, si quieres configurar algo como esto, solo lleva, no sé, tal vez media hora o una hora. Y eso está mucho más lejos, digamos, de una aplicación en producción.

Una aplicación en producción requiere, por ejemplo, que estés preparado para que el LLM alucine. Como darte una aplicación que simplemente no puedes ejecutar. Entonces, lo que haces ahí es, por ejemplo, puedes intentarlo de nuevo o si tienes un LLM grande, simplemente puedes enviarle el error y así puedes intentarlo nuevamente.

Otra cosa es, como acabamos de ver, si hay un problema de internet, o por ejemplo, tu LLM es demasiado grande y tarda un tiempo en darte una respuesta, entonces eso va a ser... Lo que le sucede al usuario es que el usuario tiene que cambiar de modo. Como en un modo estoy haciendo cosas con mis manos, como editar cosas. Y en el otro modo, estoy hablando con algún agente... Este cambio de modo, también mata creativamente, pequeñas ideas, no quieres hacer eso, quieres tener algo que funcione muy rápido.

7. AI Writing Code and Different Commands

Short description:

Bien. Intentemos algo diferente. ¿Podemos tener un modo panorámico cuando presiono la barra espaciadora? Oh, es una pantalla blanca. ¿Podemos tener un modo anamórfico? Si el LLM me entiende, no necesito estar en el teclado. El seguimiento de manos y el seguimiento de posturas son entradas más intuitivas. El AI puede escribir código por ti. ¿Cómo sería diferente el comando para entrar en modo panorámico? El AI escribiría código.

Bien. Entonces, todo esto fue muy febrero de 2023, como, ya sabes, hay un LLM editando una aplicación, ¿qué más hay de nuevo? Así que intentemos algo diferente. ¿Podemos tener, como, cuando presiono la barra espaciadora, entrar en modo panorámico, y cuando lo presiono de nuevo, volver atrás? Todos, crucen los dedos por mí, por favor. Gracias. Quiero hacer esto con el LLM local, pero solo quiero mostrarte cómo funcionan las cosas en producción.

Oh, es una pantalla blanca. ¿Podemos hacer que cuando presione la barra espaciadora, vayamos en modo anamórfico, y cuando lo presione de nuevo, volvamos atrás? Eso no funcionó. Bien. ¿Puedes imaginar que eso funcionaría? ¡Wow! Todos digan, ¡wow! Así que esto es lo que está sucediendo aquí. Permíteme explicar. Hay este modelo de voz llamado Whisper, ¿verdad? Y en realidad entiende todo lo que le dices casi mejor que un ser humano. De hecho, en un contexto de programación, es incluso mejor que un ser humano. No lo usamos aquí porque queríamos usar un modelo local solo para que las cosas fueran un poco más rápidas. Pero no me di cuenta de que todo el ruido aquí hace que me malinterprete. Pero si no malinterpreta, lo cual es bastante fácil de lograr, entonces ya no estás atado al teclado. Si estoy seguro de que el LLM me va a entender, entonces no necesito estar aquí corrigiéndolo siempre. Simplemente dije anamórfico y lo tomó anamórfico. Si eso no sucede, entonces no tengo que estar en el teclado. Puedo alejarme, hacer cosas con básicamente un dispositivo de control remoto. Esto es solo para mostrar. Las personas no van a llevar pequeños controladores de juegos. Cosas como el seguimiento de manos y el seguimiento de posturas van a tener mucho más sentido. Esos modelos han mejorado mucho en los últimos meses. Seis semanas. Dos cosas. Básicamente puedes alejarte del teclado y el panel táctil. No creo que estos sean incluso los modos principales de entrada después de un tiempo. Y también puedes hacer que el AI escriba código por ti.

Entonces, aquí hay una pregunta. Cuando le pedí al AI que, cuando presionara la barra espaciadora, entrara en modo panorámico y cuando lo presionara de nuevo, volviera atrás, ¿cómo sería diferente ese comando de los comandos anteriores que le di? ¿Alguien tiene una idea? Ahí la diferencia es que esta vez el AI realmente escribiría código. Escribiría un algoritmo.

8. The Power of User Editing and the Role of React

Short description:

Cambiaría el algoritmo de la aplicación. Eso realmente funciona. El usuario puede agregar comportamientos a su aplicación o simplemente eliminar cosas y cambiar por completo la naturaleza de su aplicación. Sin embargo, aún queremos darle algo de ese poder al usuario, por lo que tenemos que encontrar un punto intermedio entre demasiado poder y ningún poder en absoluto. Y para mí, ahí es donde entra React. El modelo de React dice que puedes dividir tu aplicación en pequeños bloques de construcción, y estos bloques de construcción son autocontenidos o sus requisitos son explícitos. Es solo una estructura organizativa que se ajusta bien a un LLM que edita nuestra aplicación. Echemos un vistazo a un árbol de React simple y discutamos por qué un LLM sería adecuado para editar esta aplicación.

Cambiaría el algoritmo de la aplicación. Básicamente cambiaría el comportamiento de la aplicación. Y eso es bastante poderoso. Eso realmente funciona. Nuevamente, aquí, debido a que el modelo de voz no funcionó, pero esto es algo que realmente puedes hacer funcionar en tu aplicación esta noche, básicamente. Pero lo que eso significa es que ahora el usuario puede agregar comportamientos a su aplicación o simplemente eliminar cosas y cambiar por completo la naturaleza de su aplicación. Eso es bastante poderoso, pero ¿cuánto de ese poder quieres darle al usuario? Existe un extremo alto de ese poder, que es que vamos a abrir el código fuente de toda nuestra aplicación. Es como si el usuario estuviera editando la aplicación en VS Code o Repl.it. Y simplemente vamos a permitir que el usuario edite la aplicación hablando con nuestros agentes LLM. Eso es increíble, eso es realmente poderoso, pero ¿qué pasa si el usuario simplemente rompe la aplicación? ¿Qué pasa si ni siquiera se inicia? ¿O qué pasa si hay un error con una traza de pila de 50 líneas y tenemos que mostrar esto al usuario? Eso obviamente es demasiado poder y demasiada complejidad que estamos liberando al usuario. Simplemente no funciona para la mayoría de los casos. Sin embargo, aún queremos darle algo de ese poder al usuario, por lo que tenemos que encontrar este punto intermedio entre demasiado poder y ningún poder en absoluto. ¿Y dónde está ese punto intermedio? Y para mí, ahí es donde entra React. Y con React, no me refiero a la biblioteca React, me refiero al modelo React. Entonces, el modelo React, imagina la definición más amplia del modelo React. Se aplica también a Svelte, Veo, Solid, Swift, UI, Flutter, todos ellos. El modelo es en realidad bastante simple. Dice que puedes dividir tu aplicación en pequeños bloques de construcción, y estos bloques de construcción son, en su mayoría, autocontenidos o sus requisitos son explícitos, que son básicamente props, o si requieren contexto, ya sabes, el contexto es un prop implícito, pero una limitación de la biblioteca React, en mi opinión. Y si un componente tiene un efecto secundario, devuelve un descriptor de efecto, que es básicamente las etiquetas JSX que tenemos. Y si el efecto no encaja dentro de un descriptor, entonces se usa el escape hatch, que es use effect. Entonces, no dice nada sobre la reactividad. Sabes, podrías tener señales de granularidad fina o gruesa, todo eso. No dice nada, puedes ejecutar un motor ECS, Entity Component System, como un game engine, producido por componentes React. Ni siquiera dice nada sobre eso, no dice nada sobre JavaScript u otro lenguaje, web o nativo. Es solo una estructura organizativa. Y esa estructura organizativa se ajusta muy bien a un LLM que edita nuestra aplicación porque no queremos que el LLM edite toda la aplicación, nuevamente, podrías romper todo. Pero lo que queremos hacer es crear estos pequeños bloques de construcción y permitir que el LLM simplemente edite esos pequeños bloques de construcción. Y esos bloques de construcción se ajustan al modelo React. Y lo que eso significa es que, bueno, en primer lugar, echemos un vistazo a un árbol React simple. Simplemente hablaremos sobre por qué un LLM sería adecuado para editar esta aplicación.

9. Componentes de React y WebGPU

Short description:

Los componentes de React pueden ser más detallados y pequeños, gracias a la capacidad del modelo LLM para manejar dependencias. WebGPU permite ejecutar modelos de IA localmente en una máquina, priorizando la privacidad, la latencia y el costo.

En primer lugar, ¿tiene el hijo A acceso al contexto B? Por supuesto que no. Solo podemos verlo y decirlo. Está explícitamente codificado en cómo representamos la aplicación React. Además, si el hijo B falla, como si arroja un error, si tiene un límite de error, no afectará al hijo A, ¿verdad? Es solo... Es su propia cosa. Ahora, eso funciona muy bien para un LLM. Pero en primer lugar, si solo está editando un componente, la fuente de uno de estos componentes, bueno, si el componente falla, básicamente podemos volver a intentar la ejecución del LLM o incluso podríamos enviar el error de vuelta al LLM y dejar que lo intente de nuevo. Entonces, React encaja muy bien con el modelo LLM. Lo que eso significa en realidad, en mi opinión, es que simplemente vamos a escribir componentes de React más detallados y pequeños. ¿Recuerdan cuando solíamos separar nuestros componentes entre presentacionales y lógicos? Queríamos tener la unidad más pequeña posible de componente React para poder manejar todo de manera más sencilla. Pero eso no funcionó porque había demasiadas dependencias entre componentes. Un componente podía tener como 10 props y luego tenías que obtener esas props y pasarlas al siguiente componente, y era demasiado para que un programador humano lo tuviera en cuenta. Pero adivinen qué, eso no es un problema para un LLM. Un LLM puede realizar un seguimiento fácilmente de cientos de estas dependencias. Entonces, lo que esto significa, creo, es que vamos a tener componentes de React muy pequeños y el LLM simplemente los va a editar por nosotros.

Ahora hablemos de WebGPU. Comenzando con algunas definiciones, ¿qué es WebAssembly? WebAssembly te permite ejecutar código no confiable que no proviene de alguien que conoces de manera segura en tu CPU de forma rápida. Bueno, WebGPU hace lo mismo con el otro procesador de tu computadora. Y eso es realmente bueno porque a los modelos de IA les encantan las GPUs. Así que eso significa que podemos ejecutar un modelo de IA localmente en nuestra máquina. ¿Por qué querríamos hacer eso? Bueno, probablemente estemos tomando alguna decisión a favor de la privacidad, la latencia y el costo. Por ejemplo, en el caso de una aplicación médica o algo así, todos saben por qué la privacidad es importante allí. Pero en el caso de una herramienta creativa como TheaterGist, por ejemplo, creo que las herramientas creativas son como herramientas para el pensamiento, y en realidad ayuda poder crear en privado durante un tiempo que puede ser liberador. Así que creo que la privacidad también importa en las herramientas creativas. La latencia, por supuesto, también importa. Y como acabamos de ver aquí, ya saben, si aburre a los miembros de la audiencia, también aburrirá al creador. Así que no quieres tiempos de espera como los de un chatbot. Quieres que las cosas sucedan muy rápido. Entonces, pondrías un LLM dentro de una máquina local.

10. Ejecución de LLMs en WebGPU

Short description:

¿Podemos ejecutar LLMs utilizando WebGPU? Aún no, ya que los modelos no están suficientemente entrenados. Sin embargo, actualmente se están entrenando modelos de código estelar y de replicación de código. Una vez optimizado, un modelo de instrucción de edición de código puede editar una escena dentro del navegador.

Y, por supuesto, el costo también importa, pero voy a omitirlo porque no tenemos tanto tiempo.

Ahora, ¿podemos realmente ejecutar este tipo de LLMs utilizando WebGPU? Bueno, en realidad sí se puede. Estos son dos ejemplos. Puedes simplemente, ya sabes, probarlos. Pruébalos en tu, ya sabes, última versión de Chrome, por ejemplo. Funcionan bastante bien. ¿Pueden realmente hacer lo que te estaba mostrando allí? En realidad no, no pueden. Aún no. Todavía no están ahí. Los modelos no están suficientemente entrenados en este momento. Los modelos que realmente puedes ejecutar rápidamente en tu máquina. Es por eso que en realidad utilizamos un modelo basado en la nube en línea. Pero están llegando allí. Hay un modelo de código estelar y un modelo de replicación de código. Actualmente se están entrenando, ya sabes, en este momento. Como que están mejorando cada vez más básicamente. Y, ya sabes, son bastante pequeños, como 15 mil millones de parámetros, 7 mil millones de parámetros. Funcionan realmente rápido. Se ejecutan en una máquina local. También tienen muchas optimizaciones de WebGPU de bajo costo. Como ahora mismo, si intentas ejecutarlos, lleva un poco de trabajo y también es lento. Pero eso se debe a que el pipeline de WebGPU aún no está optimizado. Entonces, una vez que se optimice, puedes ejecutar un modelo de instrucción de edición de código que básicamente edita una escena que es, ya sabes, tu página de Notion o algo así, básicamente ejecutándose dentro del navegador.

11. Impacto de la IA en las aplicaciones normales

Short description:

Ahora puedes esperar a que estos modelos maduren o puedes comenzar a desarrollar ahora mismo. La IA afecta tanto a las aplicaciones creativas como a las aplicaciones normales. Algunas personas se sorprenden por las capacidades de codificación de la IA, mientras que otras son ignorantes. Para comprender el impacto de la IA, prueba un experimento con la aplicación de Uber y GPT-4. Utiliza la API de Uber para crear un chatbot que pueda solicitar viajes. Luego, agrega la API de Lyft para obtener más opciones y funcionalidades.

Ahora puedes esperar a que estos modelos maduren o simplemente saber hacia dónde se dirigen las cosas y comenzar a desarrollar ahora mismo. Entonces, en el caso del teatro, sí, voy a interrumpir un poco el tiempo de preguntas y respuestas. De acuerdo. Así que puedes ver hacia dónde se dirigen las cosas y desarrollar tu aplicación ahora mismo. Utiliza un modelo basado en la cloud y luego más adelante puedes cambiar a un modelo local si tiene sentido en el caso de tu aplicación.

Hasta ahora, hemos hablado de cómo la IA afecta a una aplicación creativa como Theater.js, Blender o incluso una aplicación de productivity como Notion. Pero, ¿cómo afecta a una aplicación normal como Uber? Hay mucho miedo, incertidumbre y dudas en el aire. Creo que algunas personas están en estado de shock y asombro por lo bien que la IA puede codificar. Y algunas personas son completamente ignorantes. Tal vez eso describa a algunas personas en ambos casos.

Personalmente, cuando vi lo bueno que se había vuelto GPT-3, estuve en estado de shock por un tiempo porque estaba pensando, ¿qué sucede con mi experiencia? ¿Qué sucede con cómo gano dinero? Tengo un experimento que sugerirles a todos ustedes. Creo que ni este estado de shock y asombro ni este estado de ignorancia, vamos a ignorar todo el asunto, son saludables. Quiero sugerir un experimento para que todos puedan desarrollar su propia comprensión de los principios fundamentales de lo que la IA puede hacer y cómo afecta su trabajo. Así que aquí está el experimento. Abre la aplicación de Uber en tu teléfono o alguna aplicación de viajes compartidos y haz clic, ya sabes, intenta solicitar un viaje justo antes de que realmente lo necesites. E imagina si Uber proporcionara una API abierta donde pudieras crear tu propia aplicación de Uber utilizando esta API, ¿verdad? Solo puedes solicitar viajes. Ahora toma esa API y aliméntala, digamos, a GPT-4 utilizando una biblioteca llamada LangChain. Puedes hacerlo como desarrollador de JavaScript, ya sabes, probablemente te llevará un día. Es un proyecto de fin de semana como máximo. Al final, obtendrías un chatbot que puede solicitar viajes de Uber por ti, ¿verdad? Podemos marcar la API. Y luego simplemente hablas con el chatbot. Y ve qué sucede. Como, ya sabes, llévame a casa de mamá. Y probablemente te dirá, oh, costará 15 euros, ya sabes, ¿debería hacerlo? Puedes decir que sí, y simplemente lo solicitará por ti. Ahora haz eso. Y luego agrégale otra API, que es la API de Lyft. ¿De acuerdo? Entonces dices, hey, llévame a algún lugar. Y luego el chatbot te dirá, sí, hay una opción de 15 euros, una opción de 17 euros, pero una de ellas está más lejos de ti, por lo que te recogerá tres minutos antes. ¿Debería tomar la opción más temprana? Sí. ¿Quieres que avise a mamá? Sí, por favor.

12. El Futuro del Desarrollo de Aplicaciones

Short description:

Probablemente esa será una forma mucho más rápida y mejor de pedir un viaje que abrir cualquier aplicación. ¿Todas las aplicaciones desaparecerán? No lo creo. Los juegos no desaparecerán. No creo que las aplicaciones creativas dejen de ser una aplicación. Pero pedir un viaje, seguro. ¿Vamos a seguir utilizando las mismas herramientas que hemos estado utilizando? Probablemente no. ¿Vamos a tener que desechar muchas de las bibliotecas y metodologías? Incluso los nombres de las conferencias, ¿probablemente sí? Pero al final, solo tendremos una forma mucho más poderosa de servir a los usuarios. Por cierto, servir a los usuarios todavía requiere resolver problemas. La última vez que lo comprobé, las capacidades de razonamiento de estos modelos no están... Si están al nivel humano, entonces tenemos otros problemas de los que preocuparnos. Así que creo que tiene sentido ver hacia dónde se dirigen las cosas y en lugar de esperar a que nuestros trabajos sean interrumpidos y las aplicaciones sean irrelevantes y las bibliotecas que usamos ya no importen. Podemos estar por delante de esa curva y comenzar a construir cosas hoy. Toda la tecnología está ahí y ¿adivina qué? Creo que como desarrolladores de JavaScript, como personas que son expertas en conectar diferentes piezas de tecnología, eso es JavaScript. Creo que estamos en la mejor posición posible en la industria.

Eso es todo. Muy bien. Probablemente eso será... Voy a omitir esto. Probablemente esa será una forma mucho más rápida y mejor de pedir un viaje que abrir cualquier aplicación. Si quieres pedir un viaje, si quieres hacer muchas de las cosas en esta pequeña animación, será más rápido con un AirPod. No vas a usar React. Como usuario, no vas a interactuar con React, no vas a interactuar con Solid, con Svelte, probablemente ni siquiera con JavaScript. Simplemente es más rápido.

¿Todas las aplicaciones van a desaparecer? No lo creo. Los juegos no van a desaparecer. No creo que las aplicaciones creativas dejen de ser una aplicación. Pero pedir un viaje, seguro. Puedes hacer eso, de nuevo, tú mismo, como desarrollador en casa, lleva un día. Ahora, ¿eso es motivo de temor? No sé cómo funciona tu psicología. El miedo es bueno para algunas personas. Para mí, es simplemente emocionante, eventualmente, cuando lo miras. Porque ahora podemos servir a los usuarios de una manera mucho más grande.

¿Vamos a seguir utilizando las mismas herramientas que hemos estado utilizando? Probablemente no. ¿Vamos a tener que desechar muchas de las bibliotecas y metodologías? Incluso los nombres de las conferencias, ¿probablemente sí? Pero al final, solo tendremos una forma mucho más poderosa de servir a los usuarios. Por cierto, servir a los usuarios todavía requiere resolver problemas. La última vez que lo comprobé, las capacidades de razonamiento de estos modelos no están... Si están al nivel humano, entonces tenemos otros problemas de los que preocuparnos. Así que creo que tiene sentido ver hacia dónde se dirigen las cosas y en lugar de esperar a que nuestros trabajos sean interrumpidos y las aplicaciones sean irrelevantes y las bibliotecas que usamos ya no importen. Podemos estar por delante de esa curva y comenzar a construir cosas hoy. Toda la tecnología está ahí y ¿adivina qué? Creo que como desarrolladores de JavaScript, como personas que son expertas en conectar diferentes piezas de tecnología, eso es JavaScript. Creo que estamos en la mejor posición posible en la industria. Muy bien. Muchas gracias.

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 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 Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
Interactive web-based tutorials have become a staple of front end frameworks, and it's easy to see why — developers love being able to try out new tools without the hassle of installing packages or cloning repos.But in the age of full stack meta-frameworks like Next, Remix and SvelteKit, these tutorials only go so far. In this talk, we'll look at how we on the Svelte team are using cutting edge web technology to rethink how we teach each other the tools of our trade.
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Solid caught the eye of the frontend community by re-popularizing reactive programming with its compelling use of Signals to render without re-renders. We've seen them adopted in the past year in everything from Preact to Angular. Signals offer a powerful set of primitives that ensure that your UI is in sync with your state independent of components. A universal language for the frontend user interface.
But what about Async? How do we manage to orchestrate data loading and mutation, server rendering, and streaming? Ryan Carniato, creator of SolidJS, takes a look at a different primitive. One that is often misunderstood but is as powerful in its use. Join him as he shows what all the Suspense is about.
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: The Full-Stack React App Framework of Your Dreams
Top Content
Tired of rebuilding your React-based web framework from scratch for every new project? You're in luck! RedwoodJS is a full-stack web application framework (think Rails but for JS/TS devs) based on React, Apollo GraphQL, and Prisma 2. We do the heavy integration work so you don't have to. We also beautifully integrate Jest and Storybook, and offer built-in solutions for declarative data fetching, authentication, pre-rendering, logging, a11y, and tons more. Deploy to Netlify, Vercel, or go oldschool on AWS or bare metal. In this talk you'll learn about the RedwoodJS architecture, see core features in action, and walk away with a sense of wonder and awe in your heart.

Workshops on related topic

DevOps.js Conf 2024DevOps.js Conf 2024
163 min
AI on Demand: Serverless AI
Featured WorkshopFree
In this workshop, we discuss the merits of serverless architecture and how it can be applied to the AI space. We'll explore options around building serverless RAG applications for a more lambda-esque approach to AI. Next, we'll get hands on and build a sample CRUD app that allows you to store information and query it using an LLM with Workers AI, Vectorize, D1, and Cloudflare Workers.
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
React Advanced Conference 2023React Advanced Conference 2023
98 min
Working With OpenAI and Prompt Engineering for React Developers
Workshop
In this workshop we'll take a tour of applied AI from the perspective of front end developers, zooming in on the emerging best practices when it comes to working with LLMs to build great products. This workshop is based on learnings from working with the OpenAI API from its debut last November to build out a working MVP which became PowerModeAI (A customer facing ideation and slide creation tool).
In the workshop they'll be a mix of presentation and hands on exercises to cover topics including:
- GPT fundamentals- Pitfalls of LLMs- Prompt engineering best practices and techniques- Using the playground effectively- Installing and configuring the OpenAI SDK- Approaches to working with the API and prompt management- Implementing the API to build an AI powered customer facing application- Fine tuning and embeddings- Emerging best practice on LLMOps
Node Congress 2021Node Congress 2021
128 min
Learn Fastify One Plugin at a Time
Workshop
Fastify is an HTTP framework for Node.js that focuses on providing a good developer experience without compromising on performance metrics. What makes Fastify special are not its technical details, but its community which is wide open for contributions of any kind. Part of the secret sauce is Fastify plugin architecture that enabled developers to write more than a hundred plugins.This hands-on workshop is structured around a series of exercises that covers from basics "hello world", to how to structure a project, perform database access and authentication.

https://github.com/nearform/the-fastify-workshop
JSNation 2023JSNation 2023
66 min
Build a Universal Reactive Data Library with Starbeam
WorkshopFree
This session will focus on Starbeam's universal building blocks. We'll use Starbeam to build a data library that works in multiple frameworks.We'll write a library that caches and updates data, and supports relationships, sorting and filtering.Rather than fetching data directly, it will work with asynchronously fetched data, including data fetched after initial render. Data fetched and updated through web sockets will also work well.All of these features will be reactive, of course.Imagine you filter your data by its title, and then you update the title of a record to match the filter: any output relying on the filtered data will update to reflect the updated filter.In 90 minutes, you'll build an awesome reactive data library and learn a powerful new tool for building reactive systems. The best part: the library works in any framework, even though you don't think about (or depend on) any framework when you built it.
Table of contents- Storing a Fetched Record in a Cell- Storing multiple records in a reactive Map- Reactive iteration is normal iteration- Reactive filtering is normal filtering- Fetching more records and updating the Map- Reactive sorting is normal sorting (is this getting a bit repetitive?)- Modelling cache invalidation as data- Bonus: reactive relationships