Construye Tu Propia Reactividad: Un Análisis Profundo de los Signals

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
GithubProject website
Rate this content

Los signals han estado revolucionando la gestión de estado últimamente, ofreciendo un enfoque más intuitivo y eficiente que los métodos tradicionales. Pero, ¿qué tipo de magia hay bajo el capó? Cambias un valor, y todos los lugares que usan ese valor se actualizan y recalculan automáticamente… 🤔

En esta charla, miraremos detrás del telón y exploraremos el funcionamiento interno de los signals, construyendo nuestra propia implementación desde cero (Aviso: usar solo con fines de aprendizaje 😉).

Los signals se han convertido casi en un bloque de construcción de facto en los frameworks de JavaScript últimamente, con algunas excepciones notables (te estamos mirando React 👀), por lo que realmente vale la pena tener una comprensión más profunda sobre cómo operan, cómo depurarlos efectivamente y cómo evitar errores comunes. Además, ¿a quién no le gusta un poco de live coding? ✨

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

Carl Vuorinen
Carl Vuorinen
28 min
12 Jun, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Karl Vorden introduce los signals para la reactividad en JavaScript, con el objetivo de desmitificar su implementación para una mejor comprensión. Los signals en JavaScript proporcionan una reactividad eficiente al actualizar solo el código necesario sin trabajo extra. Diferentes frameworks ofrecen implementaciones de signals como createSignal en solid JS, que se asemeja a React's useEffect pero funciona de manera diferente. Los signals en Vue se llaman refs, creados con la función ref, devolviendo un objeto con una propiedad value. Define funciones effect para rastrear cambios y ejecución en signals reactivos. Explora funciones computed para operaciones complejas dentro de signals reactivos. Ten cuidado con los errores comunes con condicionales que afectan la ejecución de signals.

1. Introduction to Signals for Reactivity

Short description:

Karl Vorden introduce señales para la reactividad en JavaScript, con el objetivo de desmitificar su implementación para una mejor comprensión.

Muy bien. Hola. Hola a todos. Encantado de estar aquí. Mi nombre es Karl Vorden y hoy voy a hablar sobre señales y de hecho vamos a construir una. Antes de entrar en eso, tal vez una rápida muestra de manos. ¿Cuántos de ustedes han usado señales alguna vez? Sí, bastantes. Sí. Bien. Y el resto de ustedes, ¿cuántos han oído hablar de señales? Creo que eso es el resto de ustedes. Y tal vez aquellos que levantarían la mano, probablemente sean desarrolladores de React. Solo bromeo. Solo bromeo.

Bien. Entonces, las señales son básicamente un contenedor para un valor. Nada especial en eso. Pero con ello, el estado y la interfaz de usuario se actualizan automáticamente cuando el valor cambia. Y así, esta es la parte que es la reactividad. Y bueno, ¿por qué querríamos construir esto nosotros mismos? Porque ya hay muchas implementaciones. Bueno, eso es principalmente con fines de aprendizaje.

Pero para que puedas usarlo efectivamente, es útil entender cómo funciona internamente para que en caso de que te encuentres con algún problema, puedas fácilmente, más fácilmente, como averiguar qué está pasando. Y al menos para mí, cuando veo una pieza de tecnología que es nueva para mí, parece un poco mágica. No entiendo realmente qué está pasando internamente. Tengo curiosidad por saber cómo funciona y realmente entenderlo mejor. Así que ese es el objetivo aquí. Así que todos vemos que no hay magia. Es solo JavaScript. Y bueno, obviamente, no es la única manera de lograr reactividad. React tiene el DOM virtual donde ejecutas la función de renderizado nuevamente y construyes un DOM virtual y lo comparas con el DOM real.

2. Efficient Reactivity with Signals in JavaScript

Short description:

Las señales en JavaScript proporcionan reactividad eficiente al actualizar solo el código necesario sin trabajo adicional. Las funciones en JavaScript actúan como contenedores para valores, ofreciendo una forma de manejar los cambios de manera efectiva. Examinar las implementaciones de señales en frameworks como Solid JS puede ofrecer valiosas ideas sobre su uso.

Sí, también funciona. Logra reactividad. Y en Angular, está la verificación sucia donde mantienen un seguimiento de todos los valores que están usando en la plantilla y luego los comparan cada vez que sucede algo. Y bueno, ambos enfoques podrían no ser los óptimos. Hay mucho trabajo que tienes que hacer cada vez. Entonces, ¿por qué son buenas las señales?

Bueno, con las señales, obtenemos una reactividad más detallada y eficiente porque solo se actualiza y recalcula el código que usa los valores que cambian. Y no tienes que hacer ningún trabajo adicional allí. Así que esta es la manera. Pero antes de comenzar la implementación, ¿qué necesitamos? Número uno, necesitamos saber quién usa el valor.

Y el número dos es que necesitamos saber cuándo cambia el valor. Estos dos puntos son la clave, y llegaremos a ellos más adelante cuando hagamos la implementación real. Comparación rápida con una variable común y corriente. Sí, también es un contenedor para el valor, pero no sabe quién lo usa.

3. Signal Implementations in JavaScript Frameworks

Short description:

Las funciones de JavaScript actúan como contenedores para valores, sabiendo cuándo se llaman pero necesitando identificar al llamador. Diferentes frameworks ofrecen implementaciones de señales como createSignal en Solid JS, que se asemeja a React's useEffect pero funciona de manera diferente. La función signal de Angular devuelve un valor como una función pero se comporta como un objeto con un método set para actualizaciones.

Pero en JavaScript, tenemos estas cosas mágicas llamadas funciones. Así que desde una función, podemos devolver un valor contenido, y podemos pasar un nuevo valor. Así que esa es la parte del contenedor. Una función sabe cuándo se llama. Sabes, se ejecuta. Pero, ¿sabe quién la llama? Bueno, eso es algo que tal vez necesitemos averiguar.

Pero antes de sumergirnos en el código real, veamos algunos pequeños ejemplos de diferentes implementaciones de señales en los frameworks actuales. Aquí están las señales de Solid JS. Ves que hay una función createSignal, que devuelve dos funciones, count en este caso, y setCount. La primera es la función getter. La llamas y obtienes el valor. Luego, la segunda es la función setter. Puedes llamarla para dar un nuevo valor.

Y para todos los desarrolladores de React, podría parecer un poco familiar a useEffect y cosas así, pero funciona de manera totalmente diferente bajo el capó. En el fragmento a continuación, puedes ver cómo puedes usarlo en la plantilla. En Angular, tenemos una función llamada signal para crear una, y solo devuelve una cosa, que es como una función. Puedes llamarla para obtener el valor, pero también es como un objeto porque tiene un método dot set donde puedes establecer el nuevo valor. Así que un enfoque un poco poco convencional, en mi opinión, pero, sí, funciona.

4. Vue and Svelte Signal Implementations

Short description:

Las señales de Vue se llaman refs, creadas con la función ref, devolviendo un objeto con una propiedad value. Se menciona brevemente la implementación de señales de Svelte llamada runes. Construir una señal en Vue.js implica definir métodos getter y setter para el valor, inicialmente asemejándose a una instanciación básica de variable.

Luego en Vue, las señales se llaman refs, y creas una con la función ref, y lo que obtienes de vuelta es un objeto. El objeto tiene un punto value que parece ser una propiedad, pero en realidad, bajo el capó, está implementado con una función getter y una función setter. Así que es, de nuevo, dos llamadas a funciones, aunque no lo parezca aquí. Puedes simplemente hacer el plus plus, y en realidad lo que sucede son dos llamadas a funciones. En la plantilla, no tienes que poner el value, pero eso es porque Vue lo analiza y lo maneja por ti.

Luego también está en Svelte, por ejemplo, la implementación de señales se llama runes, pero no tenemos tiempo para profundizar mucho en eso. Bien. Así que comencemos a construir algo. Voy a tener que ir bastante rápido porque el límite de tiempo es de 20 minutos, así que espero que puedas seguir y trataré de explicar. Así que primero comenzaremos definiendo la función signal, que actúa como el contenedor para el valor. Devolveremos un objeto que tiene un método getter y un método setter para el valor. Así que en este caso, lo haremos un poco al estilo de Vue.js usando los métodos getter y setter. Pero en este punto, lo que tenemos no es tan emocionante aún. Es básicamente como una variable que podemos instanciar, y luego podemos cambiar el valor. Y si hacemos console.log así, y si luego ejecutamos, sí, no es tan emocionante.

Pero antes, cuando dije que la función sabe cuándo se llama, no es nada emocionante, solo que podemos ejecutar código aquí. Eso es básicamente lo que quiero decir. Podemos ejecutar código aquí para que podamos ver que los métodos get y set se llaman cuando el valor se usa dentro de la función. Ahora, si recuerdas de la diapositiva, había dos puntos. Así que el primero era saber cuándo cambia un valor, perdón, saber quién usa el valor. Así que para comenzar con eso, aquí en el método getter, necesitamos rastrear quién usa el valor. Para eso implementaremos una función track, que tomará una señal como parámetro. Y luego necesitamos un lugar para almacenar de alguna manera el uso. Así que definamos un usage ya que usaremos un WeakMap para esto. Y la razón por la que estamos usando WeakMap es que en lugar de un objeto normal, podemos usar el objeto de señal en sí como la clave. Así que podemos verificar si ya hay algo allí. Y si no, entonces podemos establecerlo como un array vacío. Y luego continuando, obtendremos, y luego tendremos el array y pondremos algo en el array. Pero, ¿qué deberíamos poner allí? Bien. Ahora, el objetivo aquí es que podamos deshacernos del segundo console log.

5. Advanced Signal Functionalities

Short description:

Definir la función effect para rastrear cambios de valor y ejecución, introduciendo el registro reactivo en consola. Implementar la función setter para ejecutar cambios y definir una función execute para manejar callables.

Y solo definiríamos console log una vez y se ejecutaría cada vez que un valor cambie. Y para eso necesitamos una segunda parte de las implementaciones de señal, que es una función llamada effect. Y toma una función callable como parámetro, que luego ejecuta. Y luego podríamos definir nuestro console log como reactivo, por así decirlo. Entonces, ¿cómo hacer que esto funcione?

Ahora, como podemos ver aquí, el valor ahora se lee dentro de la función effect. Y esta función effect es también lo que queremos ejecutar nuevamente más tarde. Así que necesitamos hacer un seguimiento de lo que sucede durante la ejecución del effect. Así que podemos definir un current effect, al cual asignaremos la función callable antes de ejecutarla. Y después de ejecutarla, la eliminamos. Y esto es lo que pondremos en los usages, pero solo si hay uno.

Bien. Me gusta esto. Ahora, la segunda parte, número dos, era saber cuándo cambia el valor. Y eso sucede en la función setter aquí. Y así, en lugar de console logging, ejecutaremos. Y definamos una función execute. Toma una señal. Y luego obtendremos de los usages de esta señal, que podría no estar allí, así que jugaremos a lo seguro. Y es un array de los callables, que luego ejecutaremos. ¿Piensas?

6. Signal Flow and Computed Operations

Short description:

Explorar funciones computed para operaciones complejas dentro de señales reactivas. Recapitulación sobre señales de prueba, uso de computed y activadores de effect. Cuidado con las trampas de los condicionales que afectan la ejecución de señales.

Solo para ver, pongamos algunos más aquí. Y es una señal reactiva. Y, bueno, normalmente nuestro estado no consiste solo en valores simples únicos, como números y cadenas. Necesitamos formas de combinarlos y hacer cálculos sobre ellos. Así que hagamos también una tercera parte de la parte común de la implementación de señales, que es computed. Así que con computed, podríamos definir un, llamémoslo un double. Y toma una función.

Y dentro de aquí, podríamos usar nuestro valor de prueba y duplicarlo. Y luego podríamos usarlo aquí dentro del effect así. Y, como puedes ver, el computed debería actuar como una señal en sí misma. Tiene el punto value, pero también toma una función, así que es como un effect.

Así que lo que necesitamos hacer es definir una señal aquí, que devolveremos. Pero aquí en medio, asignaremos el resultado del callable a la señal. Pero para hacerlo reactivo, también lo envolveremos en un effect así.

7. Reactive Signal Handling and Pitfalls

Short description:

Envuelve funciones en effects para reactividad. Recapitulación sobre señales de prueba, uso de computed y effects. Cuidado con las trampas de los condicionales, operaciones async y destructuración.

Pero para hacerlo reactivo, también lo envolveremos en un effect así. Y ahora todo está funcionando así. Así que nosotros... Gracias. Gracias.

Así que para recapitular rápidamente, definimos una señal de prueba, creamos un computed donde usamos la señal, y luego definimos un effect donde usamos el computed. Así que cada vez que un valor cambia aquí, primero recalcula el computed, que luego activa el effect nuevamente.

Y el resultado es lo que vimos. Y una rápida recapitulación es, definimos una señal como el contenedor de un valor.

8. Handling Signal Effects and Pitfalls

Short description:

Definir effect para el seguimiento de señales, cuidado con los condicionales, trampas async y destructuración. La demostración muestra HTML y JS sin frameworks. Importar implementación de señal para ilustración práctica.

Definimos un effect, que rastrea señales que están durante la ejecución de la función. Y luego nuestras actualizaciones de señal desencadenan la re-ejecución del effect. Y finalmente, hicimos el computed, que es solo un poco de azúcar sintáctica para una señal calculada a partir del effect.

Ahora que sabemos cómo funciona la implementación, podemos observar algunos posibles escollos. Como, en primer lugar, los condicionales son algo muy básico de hacer en programación. Así que si estamos usando declaraciones if, declaraciones switch, o algo así dentro de nuestros effects, podría causar a veces que todas las señales que realmente se usan dentro de él no se ejecuten.

Y en ese caso, el sistema no lo sabe. Así que solo puede conocer aquellas señales que realmente se leen durante la ejecución del effect. Otro es async.

9. Handling Signal Execution and Destructuring

Short description:

Promises, callbacks retrasan el seguimiento en effects. Problemas de destructuring con valores fuera de contenedores. Demo: HTML puro, JS, sin frameworks; importar implementación de signal; crear una calculadora.

Si tuviéramos código dentro del effect que usa promises o callbacks o timeouts o algo así, entonces las funciones que pasamos a esos, no se ejecutarán hasta más tarde. Y si recuerdas, el effect actual solo se asigna durante la ejecución de la función invocable. Así que nuevamente, no van a ser rastreados. Así que este tipo de situaciones pueden causar problemas difíciles de depurar porque no pasa nada y piensas que debería pasar algo. Pero cuando sabes cómo funciona internamente, entonces puedes intentar razonar más fácilmente sobre lo que está sucediendo.

Y finalmente, destructuring. Básicamente, si sacas el valor del contenedor, entonces ya no funciona. Esto es más común tal vez con objetos reactivos que con signals porque los signals solo contienen un valor, así que no es tan común sacarlo. Pero por ejemplo, en Vue, hay un objeto reactivo que se conecta al mismo sistema de reactividad. Y con objetos que tienen muchas propiedades, es más común usar destructuring para sacar solo algo que necesitas. Pero si luego lo usas en un effect, no funciona porque está fuera del contenedor.

Bien. Ahora que tenemos tal vez unos minutos de tiempo, usar solo console logging no es tan emocionante, así que hagamos otra demostración. Así que solo para darte un pequeño aviso, esta demostración va a tener HTML puro, JavaScript puro, sin framework, sin empaquetado, sin construcción, nada. Pero no te preocupes. Soy un profesional capacitado. Puedo manejarlo. Bien. Tengo este pequeño fragmento de HTML aquí. Y... Importa esta implementación de signal que acabamos de hacer. Da algunos errores. Ahora solo tenemos que hacer las exportaciones aquí para las tres funciones que usamos. Todo lo demás son internos. Solo exporta estas tres. Y lo que haremos es... Hagamos una calculadora, si puedo escribir. Bien. Esto es un poco demasiado grande, creo. Bien.

10. Implementing Signal Operations in HTML

Short description:

Implementación de signals para operaciones en HTML con resultado computado y console logging.

Así que para esto necesitamos algunas signals. Las llamaremos value one, value two, y operation. Y he preparado un pequeño fragmento de HTML aquí. Tenemos un campo de entrada numérico y luego un desplegable para las operaciones y otro campo de entrada. Y estos están actualizando las signals aquí.

Y para comenzar nuestra implementación, definamos un result como computed. Y primero, solo para verificar que nuestras signals están funcionando, hagamos un console log de ellas rápidamente. Así. Y luego podemos ver, bien, sí, parece estar funcionando. Continuemos usando un switch en la operation.

Y luego tengamos algunos casos. Return value one plus value two. Y luego hagamos esto cuatro veces para todas nuestras diferentes operaciones. Bien. A continuación, si estuviéramos construyendo algún framework, entonces solo escribiríamos algo como esto y funcionaría mágicamente. Pero en este caso, tenemos que hacer lo que los frameworks realmente hacen cuando analizan tu plantilla y encuentran código como ese.

QnA

DOM Updates and Signal Reactivity

Short description:

Explorando actualizaciones del DOM con resultados computados, operaciones interactivas y un quiz sobre operaciones aritméticas.

They will create an effect. Y dentro del effect, escribirán código que actualiza el DOM. Así que iremos directamente al inner HTML. Ponemos un signo igual y luego el result value o tal vez vacío. Bien. Ahora, veamos. Doce por cuatro. Bien. Ahora, cada vez que cambio este valor o este valor o la operation, se actualiza automáticamente.

Y, bueno, una pregunta. Si hacemos un plus, ¿alguien sabe cuánto es 13 plus 5? 135. ¿Sabes por qué? Sí, lo sabes, porque esto es JSConf. Sí. Bien. Eso fue todo. Soy Karl Vorden y estoy en BlueSky y en GitHub. Están las diapositivas y demos en mi GitHub si quieres echar un vistazo. Sí. Gracias.

Gracias, Karl. La primera es bastante, ¿es la implementación subyacente similar a lo que hace MobX? Sí, creo que un poco. MobX usa sus proxy objects, pero es un poco similar. ¿Hay un beneficio en usar un proxy object sobre getter y setters? Bueno, es solo que el object puede tener muchas propiedades en lugar de solo una o predefinidas. Sí. Bastante justo. Bastante justo. Bien. No sé qué pasó allí. Creo que marqué una pregunta antes de responderla. La siguiente pregunta es, ¿cuál es la diferencia entre un signal y un proxy? Bueno, creo que el signal es más como la reactividad.

Proxy Implementation and Live Coding

Short description:

Explorando proxies e implementaciones reactivas en Vue.js, limitaciones y sugerencias para mejorar.

Así que, no es solo – puedes implementar algo como signals con los proxies, pero también necesita la parte de effect para que algo suceda. Así que, como ya dije, en la charla, Vue.js tiene el concepto de reactive object que también se conecta a la misma reactividad. Así que, en Vue, esos se implementan con proxies. Y luego hay otras cosas que puedes hacer con proxies que no son reactividad. Sí. Así que, se puede usar. Sí. Los proxies son siempre uno de esos – para mí, siempre son como esa cosa que va en los frameworks. Realmente no los usas tú mismo. Sí. Toca esos proxies.

Y una cosa que olvidé decir durante la charla, que esta implementación, obviamente, es bastante ingenua. Hay mucho espacio para mejorar. Y así, la implementación real es obviamente un poco más larga. Más eficiente. Si pudiéramos construir implementaciones completas en solo 20 minutos, entonces ya nos habríamos quedado sin trabajo. Sí. Excelente.

Muy bien. Alguien preguntó – bueno, alguien dijo que era una gran manera de aprender. También me gusta el live coding como una forma de ver algo. También te animo a que tal vez intentes construir tu propio y aprendas más. Absolutamente. Pero la pregunta era – Construir uno mejor. Construir uno mejor, sí. La pregunta era, ¿has visto a Evan hacer una demo como esta alguna vez? No, no lo he visto. Tal vez algo más para revisar después. Además, si disfrutas del live coding de la implementación de signals, solo necesitas bajar porque ayer me enteré de que Paula, cuya charla es la siguiente abajo, está haciendo exactamente lo mismo. Genial.

SWELT-Specific Signals and Reactivity

Short description:

Discusión sobre contenido específico de SWELT, frameworks de signals, propuestas para JavaScript y ventajas de usar Shadow DOM en React.

Pensé que sería realmente interesante. Pero es un poco específico de SWELT. Así que, si te interesa SWELT, baja. Será una perspectiva ligeramente diferente sobre el tema de SWELT. En realidad, te da una buena visión general de todo el asunto, creo, lo cual es bastante genial, sí.

Muy bien. ¿Tienes un framework de signals favorito? Principalmente, he estado usando Vue, así que tal vez ese. Pero no lo sé. ¿Tienen todos pros y contras? Sí. ¿Contras? Sí. Porque los signals han sido una propuesta para JavaScript. ¿Eso sigue en proceso? Pero incluso si se aprueba, no es algo que usarías en tu código. Es más para que los desarrolladores de frameworks construyan sobre ello porque todavía necesita la parte específica del framework para conectar la reactividad en el framework.

Entendido, entendido. Supongo que una vez que eso se apruebe, será más fácil para esos desarrolladores de frameworks hacerlo. Sería más eficiente si el sistema se conecta a código C y cosas así. Genial. Muy bien. Bien, entonces una pregunta sobre React en esto. ¿Cuál es – o sabes cuáles son las mayores ventajas para React de usar Shadow DOM y su versión de – no es realmente reactividad, supongo, en lugar de signals como has mostrado? No soy un experto en React. Creo que todo el concepto de cómo han construido el framework, no sería fácil para ellos usar signals, creo. Sí, rompe todo el React, como, la UI como una función de estados, ¿verdad? Porque el estado cambia sin – y conecta diferentes partes de él individualmente en lugar de hacer todo el árbol.

React Signals and Framework Integration

Short description:

Discusión sobre el uso de signals en React, bibliotecas independientes y el concepto de signals en programación.

Diferente forma de verlo totalmente. Así que es poco probable que veamos que React realmente se incline hacia los signals. Aunque React tiene signals, así que no sé qué están haciendo. Tendré que investigar eso tal vez, supongo, sí.

¿Es este patrón útil sobre los frameworks? ¿Hay algún ejemplo que puedas dar sobre eso? Sobre los frameworks, creo que – bueno, incluso podrías usar una biblioteca de signals independiente para algo si necesitas algo de reactividad en tu propia lógica de negocio. Pero si usas un framework específico, entonces la reactividad debería estar conectada al framework de alguna manera para hacer que la UI sea reactiva. Tal vez si quieres usarlo solo para cosas de lógica de negocio. Sí, justo. Necesitas esa interacción del framework para realmente obtener los beneficios de ello. Sí.

Genial. Una pregunta más. ¿Sabes por qué este patrón se llama un signal? No. No tengo idea. No es un concepto nuevo. Es bastante antiguo, en realidad. Muy bien. Bueno, voy a detener las preguntas ahí. Pero hay más oportunidad – otro vaso se ha ido – hay más oportunidad de hacer nuestras preguntas sobre esto en el Q&A en el primer piso. Así que ve a encontrarlos allí. Pero de lo contrario, dales un gran aplauso por una increíble actuación de codificación en vivo.

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

Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Un Marco para Gestionar la Deuda Técnica
TechLead Conference 2023TechLead Conference 2023
35 min
Un Marco para Gestionar la Deuda Técnica
Top ContentPremium
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.
Construyendo un Asistente AI Activado por Voz con Javascript
JSNation 2023JSNation 2023
21 min
Construyendo un Asistente AI Activado por Voz con Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
Una Guía Práctica para Migrar a Componentes de Servidor
React Advanced 2023React Advanced 2023
28 min
Una Guía Práctica para Migrar a Componentes de Servidor
Top Content
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.
Solucionando Problemas de Rendimiento en React
React Advanced 2023React Advanced 2023
22 min
Solucionando Problemas de Rendimiento en React
Top Content
This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.
De Monolito a Micro-Frontends
React Advanced 2022React Advanced 2022
22 min
De Monolito a Micro-Frontends
Top Content
Microfrontends are considered as a solution to the problems of exponential growth, code duplication, and unclear ownership in older applications. Transitioning from a monolith to microfrontends involves decoupling the system and exploring options like a modular monolith. Microfrontends enable independent deployments and runtime composition, but there is a discussion about the alternative of keeping an integrated application composed at runtime. Choosing a composition model and a router are crucial decisions in the technical plan. The Strangler pattern and the reverse Strangler pattern are used to gradually replace parts of the monolith with the new application.

Workshops on related topic

Construyendo una Aplicación de Shopify con React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Construyendo una Aplicación de Shopify con React & Node
Top Content
Workshop
Jennifer Gray
Hanna Chen
2 authors
Los comerciantes de Shopify tienen un conjunto diverso de necesidades, y los desarrolladores tienen una oportunidad única para satisfacer esas necesidades construyendo aplicaciones. Construir una aplicación puede ser un trabajo duro, pero Shopify ha creado un conjunto de herramientas y recursos para ayudarte a construir una experiencia de aplicación sin problemas lo más rápido posible. Obtén experiencia práctica construyendo una aplicación integrada de Shopify utilizando el CLI de la aplicación Shopify, Polaris y Shopify App Bridge.Te mostraremos cómo crear una aplicación que acceda a la información de una tienda de desarrollo y pueda ejecutarse en tu entorno local.
Construye una sala de chat con Appwrite y React
JSNation 2022JSNation 2022
41 min
Construye una sala de chat con Appwrite y React
Workshop
Wess Cope
Wess Cope
Las API/Backends son difíciles y necesitamos websockets. Utilizarás VS Code como tu editor, Parcel.js, Chakra-ui, React, React Icons y Appwrite. Al final de este masterclass, tendrás los conocimientos para construir una aplicación en tiempo real utilizando Appwrite y sin necesidad de desarrollar una API. ¡Sigue los pasos y tendrás una increíble aplicación de chat para presumir!
Problemas difíciles de GraphQL en Shopify
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Problemas difíciles de GraphQL en Shopify
Workshop
Rebecca Friedman
Jonathan Baker
Alex Ackerman
Théo Ben Hassen
 Greg MacWilliam
5 authors
En Shopify a gran escala, resolvemos algunos problemas bastante difíciles. En este masterclass, cinco oradores diferentes describirán algunos de los desafíos que hemos enfrentado y cómo los hemos superado.

Tabla de contenidos:
1 - El infame problema "N+1": Jonathan Baker - Vamos a hablar sobre qué es, por qué es un problema y cómo Shopify lo maneja a gran escala en varios APIs de GraphQL.
2 - Contextualizando APIs de GraphQL: Alex Ackerman - Cómo y por qué decidimos usar directivas. Compartiré qué son las directivas, qué directivas están disponibles de forma predeterminada y cómo crear directivas personalizadas.
3 - Consultas de GraphQL más rápidas para clientes móviles: Theo Ben Hassen - A medida que tu aplicación móvil crece, también lo harán tus consultas de GraphQL. En esta charla, repasaré diversas estrategias para hacer que tus consultas sean más rápidas y efectivas.
4 - Construyendo el producto del futuro hoy: Greg MacWilliam - Cómo Shopify adopta las características futuras en el código actual.
5 - Gestión efectiva de APIs grandes: Rebecca Friedman - Tenemos miles de desarrolladores en Shopify. Veamos cómo estamos asegurando la calidad y consistencia de nuestras APIs de GraphQL con tantos colaboradores.
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Node Congress 2024Node Congress 2024
152 min
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Ven y aprende cómo puedes potenciar tus aplicaciones modernas y seguras utilizando GraphQL y Javascript. En este masterclass construiremos una API de GraphQL y demostraremos los beneficios del lenguaje de consulta para APIs y los casos de uso para los que es adecuado. Se requiere conocimiento básico de Javascript.
De 0 a Autenticación en una Hora para tu Aplicación JavaScript
JSNation 2023JSNation 2023
57 min
De 0 a Autenticación en una Hora para tu Aplicación JavaScript
WorkshopFree
Asaf Shen
Asaf Shen
La autenticación sin contraseña puede parecer compleja, pero es fácil de agregar a cualquier aplicación utilizando la herramienta adecuada.
Mejoraremos una aplicación JS de pila completa (backend Node.js + frontend Vanilla JS) para autenticar usuarios con contraseñas de un solo uso (correo electrónico) y OAuth, incluyendo:
- Autenticación de usuario: Gestión de interacciones de usuario, devolución de JWT de sesión / actualización- Gestión y validación de sesiones: Almacenamiento seguro de la sesión para solicitudes posteriores del cliente, validación / actualización de sesiones
Al final del masterclass, también abordaremos otro enfoque para la autenticación de código utilizando Flujos de Descope en el frontend (flujos de arrastrar y soltar), manteniendo solo la validación de sesión en el backend. Con esto, también mostraremos lo fácil que es habilitar la biometría y otros métodos de autenticación sin contraseña.