El Futuro de la Computación Numérica en JavaScript

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

JavaScript está evolucionando más allá del desarrollo web y adentrándose en el ámbito de la computación numérica de alto rendimiento. En esta charla, exploraremos el panorama actual de la computación científica en JavaScript, compararemos su rendimiento con Python y C, y discutiremos lo que falta. A través de demostraciones en vivo, incluyendo IA, procesamiento de datos en tiempo real y computación matemática, veremos cómo bibliotecas como stdlib y algunas otras están dando forma al futuro.

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

Gunj Joshi
Gunj Joshi
21 min
16 Jun, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Gunj Joshi explora el futuro de la computación numérica en JavaScript, mostrando beneficios como privacidad, baja latencia y accesibilidad. La charla profundiza en el entrenamiento de modelos dentro de navegadores, los desafíos con TensorFlow.js y la importancia de las sutilezas sintácticas para la legibilidad. Destaca la importancia de Jupyter Notebooks, Observable para codificación en vivo y el impacto de WebAssembly en el rendimiento de JavaScript. La discusión enfatiza la superioridad de NumPy en aplicaciones numéricas, la importancia de la vectorización y el potencial del ecosistema de JavaScript para aplicaciones científicas. Además, cubre la eficiencia del procesamiento de datos vectorizados, las diferencias de rendimiento en los enfoques de procesamiento de datos y el alto rendimiento de WebAssembly en navegadores web.

1. Explorando la Computación Numérica en JavaScript

Short description:

Gunj Joshi discutiendo el futuro de la computación numérica en JavaScript, enfatizando beneficios como privacidad, baja latencia y accesibilidad. Las demostraciones incluyen un clasificador de dígitos, plataforma de detección de toxicidad, OCR y visualización de entrenamiento de modelos MNIST.

Hola a todos, soy Gunj Joshi y hoy hablaré sobre el futuro de la computación numérica en JavaScript. Este es un espacio que ha sido dominado por lenguajes como Python, R, etc. Pero las cosas han comenzado a cambiar. Como colaborador principal en Standard Lib, he tenido un asiento en primera fila para algunos desarrollos emocionantes y hoy exploraremos qué es posible, qué es difícil y hacia dónde nos dirigimos.

Así que comencemos con el por qué. ¿Por qué deberíamos siquiera molestarnos en realizar tareas numéricas pesadas dentro del navegador? Uno, acceso instantáneo. No hay necesidad de instalar Python o configurar ningún backend. Simplemente abres una pestaña y comienzas a computar. Dos, privacidad y seguridad. Los datos permanecen en la máquina del cliente. Esto es crucial para cosas como información médica, finanzas personales o cualquier cosa sensible en general. Tres, baja latencia. No más esperar a que el servidor procese tus tareas. Todo sucede de inmediato. Y cuatro, accesibilidad. Esto reduce la barrera de entrada para personas que no tienen máquinas de alta gama o que no pueden instalar software complejo.

Así que podrías estar pensando cómo se ve esto en la práctica. Tengo algunas demostraciones geniales a través de las cuales podemos ver eso. La primera demostración es un clasificador de dígitos. Este es tu clásico reconocimiento de dígitos escritos a mano. Está impulsado por TensorFlow.js. La belleza de esto es que todo, desde el preprocesamiento de datos hasta la inferencia, se ejecuta completamente dentro de tu navegador. Así que no hay servidor involucrado. El siguiente ejemplo que tenemos es de una plataforma de detección de toxicidad. Lo que hace es que toma un bloque de texto como un tweet abusivo o un comentario en una plataforma de redes sociales y lo marca como tóxico o no tóxico de inmediato en tu navegador web. Supongamos que tenemos un comentario tóxico aquí y queremos clasificarlo para que resulte ser verdadero. Después de eso, tenemos la demostración de un OCR. Aquí tenemos Tesseract.js, que es el puerto de JavaScript del popular motor OCR. Lo que hace es tomar una imagen y extraer el texto de esa imagen en particular. Después de eso, tenemos el ejemplo de MNIST para visualizar el entrenamiento de modelos directamente dentro de tu navegador. Así que sí, puedes ver realmente el entrenamiento del modelo directamente dentro de tu navegador como aquí.

2. Building Advanced Browser Applications

Short description:

Entrenamiento dentro del navegador, demostraciones de accesibilidad como WebGazer y Holobooth. Desafíos: especialización de TensorFlow.js, problemas de bolsa de npm, y la importancia de las sutilezas sintácticas para la legibilidad y mantenibilidad.

Cuando comenzamos el entrenamiento, puedes ver que el entrenamiento está sucediendo directamente dentro de tu navegador web en lugar de un back end. Y después de que este entrenamiento se complete, puedes ver los gráficos de entrenamiento personalizados o precisión, matriz de confusión, todas esas cosas.

A continuación, tenemos las demostraciones de algunas aplicaciones de accesibilidad. La primera de ellas es WebGazer. Utiliza tu navegador para crear una página web. La siguiente es WebGazer. Utiliza tu cámara web para estimar dónde estás mirando realmente en la pantalla. Así que supongamos que dondequiera que se muevan mis globos oculares, la bola roja, el puntero rojo o la bola roja se mueve en esa dirección particular. A continuación en nuestra alineación tenemos Holobooth, que es un filtro AR basado en la web. Así que dondequiera que mueva mi cara o parpadee mis ojos, se mueve de acuerdo a eso. Y todo esto también sucede dentro de tu navegador web nuevamente.

Así que hemos visto lo que es posible. Ahora aquí viene la gran pregunta. ¿Cómo construyes realmente algo como esto? Vamos a resolverlo juntos. El primer trabajo resulta ser TensorFlow.js. Pero está altamente especializado para el aprendizaje automático. Tiene poco o ningún soporte para álgebra numérica y lineal. Tal vez estadísticas o cualquier otra tarea de computación científica. Si piensas en el ritmo de desarrollo, se está desacelerando. Incluso sus problemas de GitHub y solicitudes de extracción sugieren que el enfoque de Google podría estar cambiando a otro lugar. Nuestra segunda parada resulta ser una bolsa de npm. Aquí lo que hacemos es simplemente tomar algunos paquetes como mathjs para funciones matemáticas, tal vez simple statistics para estadísticas, mljs para aprendizaje automático, randomjs para generar algunos números aleatorios. Muy pronto estás manejando 5-6 bibliotecas diferentes, cada una con su propio estilo de API, sus propias peculiaridades y sus propios errores. Es frágil, inconsistente y empeora a medida que tu proyecto crece. No debería ser tan difícil, ¿verdad? De acuerdo. Pausamos por un segundo y hacemos zoom hacia afuera. Tal vez demos un paso atrás y veamos cuáles son los ingredientes esenciales de un sistema numérico de computación científica. ¿Y por qué es tan difícil actualmente en JavaScript? Primero en nuestra lista de ingredientes están las sutilezas sintácticas. Estas pueden parecer cosméticas al principio, pero tienen un gran impacto en cómo legible y mantenible es tu código. Toma los operadores de tubería de R, por ejemplo.

3. Enhancing JavaScript Computational Capabilities

Short description:

Comparación de estilo de llamada de función anidada y la importancia de Jupyter Notebooks en la computación interactiva. Observable de JavaScript para codificación en vivo. Bibliotecas optimizadas por hardware como LAS y LFback, y el impacto de WebAssembly en el nivel de rendimiento de JavaScript.

A la izquierda tenemos un estilo clásico de llamada de función anidada que es bastante denso. Pero a la derecha ves mucho más claro cómo se vuelve cuando usamos la tubería. Cada operación se cambia paso a paso tal como lo haces en texto en inglés simple.

Luego, lo siguiente en nuestra lista son las extensiones de sitio o cuadernos interactivos. En Jupyter, en Python, Jupyter Notebooks se han convertido en el estándar de oro para la computación interactiva, mezclando código, gráficos y texto todo en un solo lugar. En JavaScript tenemos Observable que trae la misma experiencia de codificación reactiva en vivo directamente dentro de tus navegadores web.

Pasando a algo bajo el capó pero súper importante, enlaces a bibliotecas optimizadas por hardware. Bibliotecas como LAS y LFback impulsan todo, desde la multiplicación de matrices y la descomposición QR hasta SVD o la resolución de ecuaciones lineales. Estas bibliotecas datan de la década de 1970 y fueron originalmente escritas en Fortran y la mayoría de las herramientas que usamos hoy en día como NumPy, MATLAB, R, Julia son solo envoltorios alrededor de ellas. JavaScript ahora está alcanzando gracias a WebAssembly que nos permite aprovechar el mismo nivel de rendimiento directamente dentro del navegador web.

4. Exploring Data Handling and Vectorization

Short description:

La importancia de los ndarrays de NumPy en aplicaciones numéricas. La falta de un equivalente nativo en JavaScript. Marcos de datos de Pandas para la manipulación de datos tabulares, DanfoJS en JavaScript. El impacto de la vectorización en la computación científica y el aprovechamiento del rendimiento.

A continuación, tenemos los ndarrays de NumPy que son la columna vertebral de casi todas las aplicaciones numéricas. Te permiten manejar datos multidimensionales de manera eficiente con operaciones como slicing, reshaping y broadcasting integradas. En JavaScript carecemos de un equivalente nativo aunque hay bibliotecas que intentan llenar el vacío, pero es un área aún en desarrollo.

Más allá de los arrays, también necesitamos marcos de datos. Los marcos de datos de Pandas te permiten trabajar con datos tabulares fácilmente, soportan filtrado, agregación y unión de conjuntos de datos. En Python esto se maneja con Pandas que está construido sobre los ndarrays de NumPy. JavaScript tiene proyectos como DanfoJS que buscan construir capacidades similares dentro del navegador con NodeJS, pero las herramientas y el ecosistema a su alrededor aún no son tan maduros, principalmente porque todavía carecemos de una infraestructura eficiente de ndarray subyacente.

Sin un soporte sólido de arrays es difícil construir una biblioteca confiable de marcos de datos. Ahora hablemos de una de las mayores palancas de rendimiento en la computación científica, la vectorización. Así es como se ve sin vectorización. Aquí estamos usando una simple comprensión de listas en Python para elevar al cuadrado una lista de números. Funciona, pero en el fondo esto es solo un bucle a través de cada elemento uno por uno.

5. Optimizing Data Processing with Vectorization

Short description:

Enfoque vectorizado usando NumPy para manejo eficiente de datos y rendimiento. Ejemplo del mundo real de cálculo de distancias usando latitud y longitud. Generación de grandes conjuntos de datos con pandas y utilización de la vectorización para escalabilidad.

Es legible, pero cuando trabajas con grandes conjuntos de datos, este enfoque se deteriora muy rápido. Ahora mira la versión vectorizada. Usando NumPy convertimos la lista en un ndarray y aplicamos esta operación de elevar al cuadrado directamente a todo el array. No hay un bucle explícito aquí, todo sucede a nivel de C bajo el capó, haciéndolo mucho más rápido.

Aquí hay un ejemplo más del mundo real, una función para calcular la distancia entre dos puntos en la superficie de la tierra usando latitud y longitud. Esto se basa en la fórmula de Haversine y estamos usando funciones de NumPy para vectorizar todo el cálculo. La vectorización nos permite ejecutar la función sobre arrays completos de coordenadas y no solo puntos individuales, lo cual es clave al trabajar con conjuntos de datos geoespaciales.

Por supuesto, y para realmente probar el rendimiento, necesitamos grandes conjuntos de datos. Aquí hay un método para generar un marco de datos de pandas lleno con 100,000 coordenadas aleatorias. Esto proporciona un conjunto de datos sólido para probar. Observa cómo estamos usando la generación de números aleatorios vectorizados para llenar rápidamente columnas enteras. Es eficiente y escala bien. Ahora imagina que quieres calcular distancias desde un punto fijo a cada fila en ese gran marco de datos.

6. Comparing Data Processing Approaches

Short description:

Comparando enfoques no vectorizados y vectorizados para la velocidad de procesamiento de datos. Demostrando la diferencia de rendimiento entre los dos métodos. La importancia de bibliotecas especializadas como scikit-learn para machine learning en Python.

Aquí está el enfoque no vectorizado usando un bucle for básico para iterar a través de cada fila. Esto hace el trabajo pero es dolorosamente lento para grandes conjuntos de datos. Cada iteración se maneja en el espacio de Python y la penalización de rendimiento se acumula rápidamente.

Aquí está el enfoque vectorizado de la misma versión que vimos antes. Observa cómo pasamos arrays completos de valores de latitud y longitud desde el marco de datos directamente a la función. Gracias a numpy y pandas bajo el capó, esto se ejecuta mucho más rápido que el bucle. Y la diferencia de rendimiento es realmente muy real.

Aquí hay un benchmark que muestra diferentes métodos. A medida que el número de filas crece, puedes ver cómo el enfoque vectorizado se mantiene plano mientras que otros, especialmente el bucle for, explotan exponencialmente. A continuación en el ecosistema, bibliotecas especializadas de dominio específico. Una de las más famosas es scikit-learn que hace que el machine learning en Python sea súper accesible.

7. Exploring Numerical Computing Ecosystem

Short description:

Configuración de modelos de regresión lineal, modelos estadísticos para análisis estadístico. Componentes clave de un ecosistema de computación numérica maduro. El potencial de JavaScript para cumplir con los estándares y el impacto del ecosistema emergente en aplicaciones científicas basadas en la web.

Este ejemplo muestra lo fácil que es configurar un modelo de regresión lineal y hacer predicciones con solo unas pocas líneas de código. Otra pieza crítica son los modelos estadísticos que se centran en el análisis estadístico. Aquí estamos usando una simple regresión de mínimos cuadrados ordinarios e imprimiendo un resumen estadístico completo del modelo. Así que tomemos un momento para recapitular lo que hemos cubierto hasta ahora. Estos son los ingredientes clave que componen un ecosistema de computación numérica maduro.

Primero, las sutilezas sintácticas, cosas como operadores de tubería y sintaxis expresiva que hacen que el código sea legible. Luego, enlaces optimizados para hardware como glass y lapack bajo el capó para asegurar que el rendimiento escale. Luego, estructuras de datos como nd arrays y data frames que forman la base para un trabajo numérico serio. Luego, vectorización porque los bucles for no escalan y finalmente bibliotecas especializadas como scikit-learn y modelos estadísticos para ayudarte a construir una fuerza laboral real, no solo ejemplos de juguete.

Ahora la pregunta es, ¿puede JavaScript cumplir con este estándar? Haz una pausa y reflexiona por un segundo. La buena noticia es que estamos viendo un ecosistema emergente. Individualmente, estos son fuertes pero el desafío sigue siendo unirlos en una experiencia sin fisuras y ahí es exactamente donde proyectos como standard lib están apuntando a llenar el vacío. Así que lo que realmente es emocionante sobre este movimiento en el tiempo es que creo que estamos al borde de un nuevo y versionado ecosistema para el ecosistema científico basado en la web. Un ecosistema que impulsará y supercargará las aplicaciones web del futuro.

8. Introducing Standard Lib and Performance Benefits

Short description:

Enfoque en standard lib como un proyecto clave en el ecosistema emergente. Fancy indexing, operaciones Blast para álgebra lineal y análisis estadístico. Beneficios de rendimiento de la vectorización en standard lib.

Ahora es el momento de poner el foco en un proyecto clave que está impulsando este ecosistema emergente y ese proyecto es standard lib. Standard lib proporciona una base común con APIs estandarizadas sobre las cuales otros pueden construir bibliotecas específicas de dominio. Ahora revisemos nuestra lista de ingredientes que discutimos y veamos si standard lib tiene todo cubierto.

Fancy indexing y por fancy indexing nos referimos a la indexación al estilo de Python. En eso puedes crear y establecer cortes arbitrarios de datos de matriz y aplicar cosas como máscaras de matriz Booleanas e enteras para filtrado y extracción de datos. Así que aquí primero estamos importando el paquete independiente luego inicializamos nuestra matriz x. Aplicamos el método array to fancy en esa matriz luego podemos hacer recuperación de cortes y asignación de cortes y finalmente obtener el resultado. Después de eso tenemos Blast que es una colección de operaciones fundamentales utilizadas para álgebra lineal o análisis estadístico, transformación de imágenes y aprendizaje automático también.

Incluye operaciones para multiplicación de matrices, manipulación, escalado y transformaciones como d dot o d swap dsm dgmm etc. y en este segmento de código lo que estamos haciendo es primero importar solo los paquetes que requerimos luego inicializamos las matrices x e y, establecemos la constante alfa y luego usamos la operación DAX py. También tiene el paquete de álgebra lineal también conocido como LAPACK. Este es un ejemplo del método DLACPY que se utiliza para copiar toda o parte de una matriz A o solo una pequeña parte de la matriz A a otra matriz B.

9. Explorando el Rendimiento y las Aplicaciones de WebAssembly

Short description:

Configuración de tipos de datos y beneficios de rendimiento de la vectorización. Standard lib para análisis de datos y algoritmo PageRank. Alto rendimiento de WebAssembly en navegadores web y comparaciones con JavaScript y C para rutinas computacionales.

Como se muestra en el segmento de código, puedes establecer el tipo de datos, la forma del búfer, el orden que es el orden de la matriz y los pasos y desplazamientos. Hablamos sobre el rendimiento que obtenemos al usar la vectorización en lugar de simples bucles for. De manera similar, las ufuncs de standard lib también admiten la vectorización. En este bloque de código, estamos nuevamente importando solo los módulos requeridos. Inicializamos la matriz y aplicamos la función absoluta sobre toda la matriz de una vez en lugar de recorrer cada elemento y para ayudar a facilitar el análisis interactivo de datos, standard lib viene con su propio ripple que viene precargado con toda la funcionalidad de standard lib y que facilita cargar un conjunto de datos y comenzar a analizar el rendimiento.

Este ejemplo en particular muestra cómo se puede implementar el famoso algoritmo PageRank que es el algoritmo original que impulsa la búsqueda de Google usando solo la funcionalidad estándar. A un alto nivel, primero solo quiero que prestes atención a las declaraciones de importación. Estas pueden parecer demasiado al principio, pero eso es en realidad una ventaja porque solo necesitas importar aquellos paquetes que realmente necesitas en lugar de importar toda la biblioteca, lo que ayudaría a reducir los tamaños de los paquetes y cada una de las funciones utilizadas aquí es únicamente una funcionalidad de standard lib, por lo que no necesitas lidiar con diferentes bibliotecas. Standard lib puede ser tu tienda única para la computación numérica pero ¿qué pasa con WebAssembly entonces?

Bueno, para aquellos que no lo saben, WebAssembly es un formato binario portátil consistente y de alto rendimiento que se ejecuta dentro de los navegadores web a velocidades casi nativas nos permite escribir aplicaciones de alto rendimiento en lenguajes como C, C++ o REST. Luego compilarlas a WebAssembly y luego ejecutarlas dentro de los navegadores web. También admite funciones SIMD como para instrucciones simples y múltiples flujos de datos. También tenemos puertos de motores de juegos completos a WebAssembly para ejecutar el juego dentro de nuestros navegadores web.

10. Analizando el Rendimiento de WebAssembly y Bibliotecas

Short description:

Comparando JavaScript, C y WebAssembly para la rutina dexpy. Rendimiento de JavaScript y ventajas de WebAssembly. Superioridad de standard lib en rendimiento y tiempo de carga comparado con alternativas.

Este es otro ejemplo de un software de edición de imágenes completo Adobe Photoshop que está completamente basado en nuestros navegadores web, por lo que puedes hacer todas las operaciones de edición de imágenes directamente dentro del navegador web.

Aquí comparamos JavaScript contra C y WebAssembly para la rutina de nivel blast dexpy. Dexpy multiplica un vector por un escalar y luego suma el resultado a otro vector.

En el gráfico estoy mostrando dos mediciones diferentes de WebAssembly. La primera es WASM y la segunda es WASM copy. Para la primera medición de WebAssembly estoy midiendo el rendimiento de WebAssembly al realizar el cálculo sobre vectores que ya están asignados en el montón del módulo de WebAssembly.

En la segunda medición de WebAssembly, que es WASM copy, estoy midiendo el rendimiento de WebAssembly cuando necesitas copiar datos hacia y desde el módulo de memoria de WebAssembly además de realizar la operación blast.

Así que primero tienes que copiar los datos en el módulo de memoria y luego tienes que hacer la operación.

Este escenario es probablemente más preciso para usar en casos del mundo real, sin embargo, para hacerlo primero necesitas copiar todo el array de datos tipados en la memoria del módulo de WebAssembly y luego copiar los resultados de vuelta después de haber realizado la operación. Así que en este gráfico, como podrías haber esperado, realizar cálculos en WebAssembly sin necesidad de copiar funciona mucho mejor que cuando se necesita copiar, especialmente para rutinas como dexpy donde copiar datos añade una sobrecarga significativa en comparación con la operación real.

Pero lo que puede ser inesperado es que JavaScript todavía funciona bastante bien al comparar con WASM copy. Eso demuestra que especialmente para operaciones más simples usar JavaScript puro está bien. Es solo 2 o 2.

5 veces más lento en comparación con C.

Ha habido algunos esfuerzos más en esta dirección, como Pyodide para ejecutar Python dentro de tus navegadores web y WebR para ejecutar R dentro de tus navegadores web. Pero ahora la gente podría preguntar si es posible simplemente compilar y cargar bibliotecas como numpy y scipy y luego ejecutarlas directamente dentro de los navegadores web.

Aunque esto es posible, hacerlo viene con desventajas significativas en comparación con standard lib, como se puede observar en el gráfico de la derecha, especialmente para conjuntos de datos más pequeños, standard lib supera significativamente a pyodide. Basado en estos gráficos, podemos concluir que standard lib es mejor o igual a otras alternativas basadas tanto en el tiempo de carga como en la velocidad.

Así que hagamos un resumen de lo que acabamos de cubrir.

Primero vimos cómo la vectorización permite un código numérico rápido y legible en JavaScript. Luego vimos el papel de las bibliotecas especializadas para ML y estadísticas como scikit-learn y stats models. Luego también vimos cómo standard lib proporciona arrays indy, funciones universales, APIs matemáticas centrales y mucho más.

También glass y alipack ahora son accesibles dentro de los navegadores web usando standard lib y todo esto está convergiendo en un ecosistema emergente real con, por supuesto, standard lib en su centro. Entonces, ¿cómo puedes involucrarte en todo esto? Bueno, estos dos códigos QR enlazan al repositorio de standard lib y su blog.

Así que si solo sientes contribuir o enfrentar algún problema, puedes simplemente ir y hacer ping al repositorio de GitHub. También puedes leer los blogs de standard lib que se actualizan con bastante regularidad sobre las actividades recientes. Standard lib también participa en Google Summer of Code. Participó el año pasado y este año también.

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

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.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Documentación Full Stack
JSNation 2022JSNation 2022
28 min
Documentación Full Stack
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
SolidJS: ¿Por qué tanto Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: ¿Por qué tanto Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
De GraphQL Zero a GraphQL Hero con RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
De GraphQL Zero a GraphQL Hero con RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
Tanstack Start - Un Framework de React de Full-Stack Primero del Lado del Cliente
React Summit US 2024React Summit US 2024
30 min
Tanstack Start - Un Framework de React de Full-Stack Primero del Lado del Cliente
Top Content
We surveyed thousands of developers to show that a louder audience leads to a better presentation. There has been a shift in web app development towards server-first architectures, which has improved full-stack capabilities but at the cost of complexity and divergence from the client-centric approach. Tanstec Start is a meta-framework that aims to provide the best client-side authoring experience with powerful server-side primitives. The Tansec Router supports advanced routing features, URL state management, and JSON storage. Combined with the server-side rendering capabilities of TanStack Start, it becomes even more powerful. The TanStack Router has isomorphic loaders and integrates seamlessly with TanStack Query for additional features like polling and offline support. UseSuspenseQuery allows for dynamic streaming of data during SSR. TanStack Start also offers server-side features, API routes, server functions, and middleware. The future plans include RSCs, websockets, real-time primitives, and static pre-rendering. TanStack Start is now in beta and is suitable for building React apps. It is open source.

Workshops on related topic

Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
WorkshopFree
Miško Hevery
Miško Hevery
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.
De vuelta a las raíces con Remix
React Summit 2023React Summit 2023
106 min
De vuelta a las raíces con Remix
Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
La web moderna sería diferente sin aplicaciones ricas del lado del cliente respaldadas por potentes frameworks: React, Angular, Vue, Lit y muchos otros. Estos frameworks se basan en JavaScript del lado del cliente, que es su núcleo. Sin embargo, existen otros enfoques para el renderizado. Uno de ellos (bastante antiguo, por cierto) es el renderizado del lado del servidor completamente sin JavaScript. Descubramos si esta es una buena idea y cómo Remix puede ayudarnos con ello?
Prerrequisitos- Buen entendimiento de JavaScript o TypeScript- Sería útil tener experiencia con React, Redux, Node.js y escribir aplicaciones FrontEnd y BackEnd- Preinstalar Node.js, npm- Preferimos usar VSCode, pero también se pueden utilizar IDE en la nube como codesandbox (otros IDE también están bien)
Deja que la IA sea tu Documentación
JSNation 2024JSNation 2024
69 min
Deja que la IA sea tu Documentación
Workshop
Jesse Hall
Jesse Hall
Únete a nuestro masterclass dinámico para crear un portal de documentación impulsado por IA. Aprende a integrar ChatGPT de OpenAI con Next.js 14, Tailwind CSS y tecnología de vanguardia para ofrecer soluciones de código e resúmenes instantáneos. Esta sesión práctica te equipará con el conocimiento para revolucionar la forma en que los usuarios interactúan con la documentación, convirtiendo las búsquedas tediosas en descubrimientos eficientes e inteligentes.
Aspectos destacados:
- Experiencia práctica en la creación de un sitio de documentación impulsado por IA.- Comprensión de la integración de la IA en las experiencias de usuario.- Habilidades prácticas con las últimas tecnologías de desarrollo web.- Estrategias para implementar y mantener recursos de documentación inteligente.
Tabla de contenidos:- Introducción a la IA en la documentación- Configuración del entorno- Construcción de la estructura de documentación- Integración de ChatGPT para documentación interactiva
Aprende Fastify Un Plugin a la Vez
Node Congress 2021Node Congress 2021
128 min
Aprende Fastify Un Plugin a la Vez
Workshop
Matteo Collina
Matteo Collina
Fastify es un marco de trabajo HTTP para Node.js que se enfoca en brindar una buena experiencia de desarrollo sin comprometer las métricas de rendimiento. Lo que hace especial a Fastify no son sus detalles técnicos, sino su comunidad, que está abierta a contribuciones de cualquier tipo. Parte de la fórmula secreta es la arquitectura de plugins de Fastify, que permite a los desarrolladores escribir más de cien plugins.Este masterclass práctico está estructurado en una serie de ejercicios que cubren desde lo básico, como "hola mundo", hasta cómo estructurar un proyecto, realizar acceso a bases de datos y autenticación.

https://github.com/nearform/the-fastify-workshop
Construye una página de producto con el marco de trabajo Hydrogen de Shopify
React Advanced 2022React Advanced 2022
81 min
Construye una página de producto con el marco de trabajo Hydrogen de Shopify
Workshop
David Witt
David Witt
Sumérgete en Hydrogen, un marco de trabajo basado en React para construir tiendas en línea sin cabeza. Hydrogen está diseñado para el comercio de Shopify con todas las características que necesitas para una tienda en línea lista para producción. Proporciona un inicio rápido y un entorno de desarrollo rápido para que puedas centrarte en lo divertido: construir experiencias de comercio únicas. En este masterclass, crearemos una nueva tienda en línea y construiremos rápidamente una página de producto. Cubriremos cómo empezar, enrutamiento basado en archivos, obtener datos de la API de Storefront, los componentes integrados de Hydrogen y cómo aplicar estilos con Tailwind.Aprenderás:- Empezar con la plantilla hello-world en StackBlitz- Enrutamiento basado en archivos para crear una ruta /productos/ejemplo- Enrutamiento dinámico /productos/:handle- Consultar la API de Storefront con GraphQL- Mover la consulta dentro de la aplicación de Hydrogen- Actualizar la consulta para obtener un producto por su identificador- Mostrar título, precio, imagen y descripción.- Estilizado con Tailwind- Selector de variantes y botón de compra ahora- Bonus si hay tiempo: página de colecciones
Requisitos previos: - Un navegador basado en Chromium (StackBlitz)- Idealmente experiencia con React. Un conocimiento general de desarrollo web también es válido.
Construye una Biblioteca Universal de Datos Reactiva con Starbeam
JSNation 2023JSNation 2023
66 min
Construye una Biblioteca Universal de Datos Reactiva con Starbeam
WorkshopFree
Yehuda Katz
Yehuda Katz
Esta sesión se centrará en los bloques de construcción universales de Starbeam. Usaremos Starbeam para construir una biblioteca de datos que funcione en múltiples frameworks.Escribiremos una biblioteca que almacene en caché y actualice datos, y admita relaciones, ordenación y filtrado.En lugar de obtener datos directamente, funcionará con datos obtenidos de forma asíncrona, incluidos los datos obtenidos después de la representación inicial. Los datos obtenidos y actualizados a través de web sockets también funcionarán bien.Todas estas características serán reactivas, por supuesto.Imagina que filtras tus datos por su título y luego actualizas el título de un registro para que coincida con el filtro: cualquier resultado que dependa de los datos filtrados se actualizará para reflejar el filtro actualizado.En 90 minutos, construirás una increíble biblioteca de datos reactiva y aprenderás una nueva herramienta poderosa para construir sistemas reactivos. La mejor parte: la biblioteca funciona en cualquier framework, incluso si no piensas en (o dependes de) ningún framework al construirla.
Tabla de contenidos- Almacenar un registro obtenido en una celda- Almacenar múltiples registros en un Mapa reactivo- La iteración reactiva es una iteración normal- El filtrado reactivo es un filtrado normal- Obtener más registros y actualizar el Mapa- La ordenación reactiva es una ordenación normal (¿se está volviendo un poco repetitivo?)- Modelar la invalidación de la caché como datos- Bonus: relaciones reactivas