Más Allá de los Mapas: Creando Experiencias Geoespaciales Inmersivas con React y deck.gl

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

Desbloquea el potencial de los datos geoespaciales combinando React y deck.gl para crear aplicaciones web inmersivas. Esta charla demostrará cómo transformar conjuntos de datos complejos en visualizaciones interactivas y de alto rendimiento que cautivan a los usuarios. Ya sea que estés trabajando en planificación urbana, monitoreo ambiental o narración de historias, aprende cómo elevar tus proyectos con tecnologías de mapeo de vanguardia.

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

Marko Letic
Marko Letic
26 min
17 Jun, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
¡Bienvenido al React Summit! Aprende sobre DEC GL, un marco de visualización geoespacial de Uber optimizado para React. Visualiza datos geoespaciales con facilidad utilizando DEC GL, React y WebGL para renderizar millones de puntos. Enfócate en integrar DEC GL con React, utilizando datos y variables de estado para capas de visualización. Combina datos para visualización, asegurando una jerarquía de capas adecuada para evitar superposiciones. Usando dev.gl o react-map-gl con Mapbox para la creación de mapas. Agregando propiedades en GeoJSON, enfocándose en la interacción de hover, actualizando la característica de hover con el controlador onHover. Gestión de Estado Eficiente para Capas Personalizadas en WebGL, Optimización del Rendimiento con las Características de Deck.gl.

1. Introducción a la Cartografía Geoespacial con React

Short description:

¡Bienvenidos al React Summit! Aprendan sobre DEC GL, un marco de visualización geoespacial de Uber, optimizado para React. Marko, un ingeniero de financiamiento en Fused, los guiará a través de experiencias geoespaciales inmersivas. Pueden contactar a Marko en Twitter, LinkedIn o GitHub para más información. Descubran las capas WebGL aceleradas por GPU de DEC GL para renderizar varios tipos de datos en mapas.

Hola a todos, bienvenidos a otra edición del React Summit. Es un placer para mí hablar aquí hoy con ustedes. Vamos a hacer un poco de mapeo con React. Así que mi charla se llama Más Allá de los Mapas, Creando Experiencias Geoespaciales Inmersivas con React y DEC GL. Y de qué se trata todo esto, lo veremos en los próximos minutos.

Así que, un par de cosas sobre mí. Mi nombre es Marko. Actualmente trabajo como ingeniero de financiamiento en Fused. Mi experiencia es en construir soluciones geoespaciales para la web durante más de 10 años. Y esto es exactamente lo que estoy haciendo en Fused. Así que, ya saben, los dominios son diferentes, somos diferentes. Redes inteligentes, movilidad urbana, y en los últimos años simplemente construyendo herramientas de análisis de datos geoespaciales de propósito general para la web. Anteriormente trabajé en Foursquare. Fui un orador técnico en Mozilla. Pueden contactarme en Twitter o XNOW, LinkedIn, GitHub. Hay un código QR si quieren ponerse en contacto conmigo también en LinkedIn. Sería un placer para mí compartir algunos puntos en común y compartir experiencias y cualquier comentario sobre la charla en general. Así que sí, empecemos.

¿Qué es DEC GL? Así que es muy ambiguo decir que vamos a hablar sobre mapas y React sin dar un poco de introducción al marco que realmente vamos a usar hoy. Así que DEC GL es un marco de visualización geoespacial de código abierto. Es desarrollado por el equipo de visualización de datos en Uber, y tienen un conjunto completo de herramientas para la visualización geoespacial. Algunas de ellas son un poco más familiares que otras, pero diría que DEC GL es el mejor. Así que permite capas WebGL aceleradas por GPU. Esto es un poco complicado, ¿verdad? Pero básicamente, aprovecha el poder de la GPU para renderizar muchos datos en sus mapas. Así que eso puede ser puntos, polígonos, geometrías 3D, mosaicos, diferentes tipos de vectores en general. Y es muy declarativo, así que puedes usarlo fácilmente con cualquier tipo de marco. Hoy vamos a hablar sobre cómo podemos usarlo con React. Diría que este es el caso de uso más común hoy en día, excepto por algunos ejemplos simples donde la gente simplemente usa JavaScript puro para visualizar un par de cosas. Así que tiene su propio componente de React, y vamos a ver cómo trabajar con eso. Así que el beneficio de DEC GL es que tiene un catálogo de capas extensible incorporado.

2. Integración Avanzada de DEC GL con React

Short description:

Visualiza datos geoespaciales con facilidad utilizando DEC GL, React y WebGL para renderizar millones de puntos. Integra la aplicación React, React Map GL y DEC GL para una visualización sin problemas. Asegura una representación adecuada de los datos y evita elementos superpuestos combinando mapas base con capas de DEC GL como capas de arco y de dispersión.

Así que lo que eso realmente significa es que puedes visualizar casi cualquier tipo de datos geoespaciales de diferentes maneras. Así que vamos a ver un par de demostraciones de diferentes capas, pero algunas de ellas son capas de dispersión para nubes de puntos, capas de hexágono para agregación, capas de viaje para animar algunos caminos, lo cual es muy interesante de ver en la visualización de la gestión de flotas urbanas o algo así. Así que el beneficio es que maneja grandes datos con facilidad. Así que es una combinación de JavaScript o TypeScript y WebGL.

Así que utiliza el poder de tu GPU y te permite renderizar millones de puntos en tu navegador. Así que, ¿cómo funciona eso realmente? Así que tienes tu aplicación React, y quieres usar algún mapa base. No es necesario, pero es muy útil si quieres colocar tus datos en una cierta región.

3. Integración Profunda de DEC GL con React

Short description:

Enfócate en integrar DEC GL con React, utilizando datos y variables de estado para las capas de visualización. DEC GL sincroniza el viewport con React Map GL para el control del mapa. LumaGL gestiona el renderizado de WebGL bajo DEC GL para una integración y visualización sin problemas.

Puede ser algo más. Y luego la parte de DEC GL, donde tienes tus superposiciones visuales, tus capas de DEC GL. Y la vinculación de datos se realiza en LumaGL, que es un envoltorio para algunas funcionalidades de WebGL. No vamos a entrar en esa parte hoy.

Así que nos vamos a enfocar en tu aplicación React, React Map GL y DEC GL. Esto es un poco más profundo de cómo debería funcionar. Así que tus datos, cuando digo datos, no me refiero solo a los datos que quieres visualizar, sino también a algunas variables de estado que quieres pasar a tus capas. Sabes, opacidad, visibilidad, cosas así.

Y luego DEC GL maneja el resto con su administrador de capas y sincroniza el viewport con React Map GL, donde controla el viewport del mapa, el mapa base y el estado del mapa. LumaGL está debajo de DEC GL, y maneja la parte de renderizado de WebGL. Así que así es como se ve, una integración de mapa base con DEC GL. Tienes tal vez dos capas. Una es una capa de arco, la otra es una capa de dispersión. Y tienes tu mapa base, digamos que usas Mapbox, y quieres mostrar las calles, pero tal vez quieras mostrar los edificios, especialmente sus alturas.

4. Visualizando Datos con React y dev.gl

Short description:

Combina datos para visualización, asegura una jerarquía de capas adecuada para evitar superposiciones. Configurando el mapa de React con dev.gl para una visualización eficiente.

Podría ser interesante visualizar eso. Y quieres combinar todos esos datos en una sola visualización. Así que lo que quieres hacer allí es ver los datos representados correctamente, ¿verdad? Quieres ver tu capa de dispersión todo el camino hacia abajo, para que no se superponga a los nombres de las calles. Quieres que tu capa de arco no atraviese los edificios, y que rompa un poco la UI, y rompa el modo de vista 3D que tienes. Así que esto es un poco lo que quieres usar, y cómo debería verse en realidad. Así que este es un ejemplo rápido de eso. Básicamente una capa de dispersión básica, una capa de arco, y Mapbox.

Así que como puedes ver, las capas de arco no están atravesando los edificios ni desordenando la vista, y la capa de dispersión está por debajo de las etiquetas de las calles. Así que puedes ver realmente todo lo que quieres en esta simple visualización.

Así que, ya sabes, Linus dice, hablar es fácil, muéstrame el código. Así que esta es una configuración básica de tu mapa de react con dev.gl. No tenemos mucho tiempo, no vamos a profundizar en la creación de capas personalizadas o algo así, pero tocaremos ese tema. Creo que esta masterclass está principalmente destinada a darte un buen comienzo, y decirte qué es posible, y mostrarte un par de pautas que pueden ayudarte a comenzar a construir soluciones de mapas web basadas en mapas impresionantes.

5. Creating Maps with dev.gl and Mapbox

Short description:

Usando dev.gl o react-map-gl con Mapbox para la creación de mapas. Configurando un estado de vista con coordenadas y añadiendo capas GeoJSON.

Así que aquí solo vamos a usar dos paquetes, vamos a usar dev.gl, o vamos a usar react-map-gl. Como mencionamos en las diapositivas anteriores, estos dos trabajan juntos, especialmente si quieres usar algo como React con ello. Aquí en la demostración estamos usando Mapbox, no necesariamente necesitas usar Mapbox para mapas base. Puedes usar Google Maps, puedes usar algo más, eso depende de tu caso de uso, política de la empresa o lo que sea.

Mapbox es el más famoso en este contexto, así que vamos a usar Mapbox aquí. Entonces, ¿qué queremos hacer? Queremos crear un mapa simple, y queremos dibujar algunos edificios en él. Los llamo edificios, puedes llamarlos rectángulos, en realidad no importa. Pero queremos mostrar esos edificios en nuestro mapa, así que primero queremos darle a nuestro mapa un estado de vista que es lo que vas a estar mirando cuando inicialices tu aplicación. Así que eso es información básica como longitud, latitud, zoom, inclinación o rumbo.

La inclinación o rumbo podría ser interesante si quieres visualizar el mapa en 3D. No estamos haciendo eso ahora mismo, pero es importante saber que también puedes establecer eso. Así que queremos establecer una nueva capa, y vamos a usar algo llamado una capa GeoJSON. Todos ustedes usan formatos JSON. Si no has encontrado GeoJSON, es básicamente un archivo JSON con algunas reglas especiales sobre cómo formas un objeto de geometría. Así que en GeoJSON, puedes mostrar, puedes definir puntos, líneas, polígonos. Así que te vamos a mostrar cómo dibujar tres polígonos que deberían representar algunos edificios en nuestro caso.

6. Managing Layer State in Map Creation

Short description:

Pasando propiedades para edificios, inicializando mapas con dev.jl, gestionando el estado de la capa con Jyoti, estableciendo visibilidad y opacidad.

Y vamos a pasar algunas propiedades para esos edificios. Vamos a entrar en cuáles son esas propiedades, y vamos a inicializar nuestro mapa. Así que vamos a usar un elemento de dev.jl, le vamos a pasar el estado de vista, y vamos a pasar nuestras capas. Solo tenemos una capa, así que esa es la que está ahí. Y para el mapa, solo tenemos que definir el estilo del mapa, así que puede ser un Street View Satellite View, Dark, Light mode. Mapbox tiene muchos estilos predefinidos que puedes usar. Y sí, voy a pasar tu token. Solo necesitas crear tu cuenta en Mapbox para esta instancia específica, y vas a poder usar eso. Y vas a obtener un mapa que tiene tres edificios, ¿verdad?

Entonces, ¿qué vamos a hacer con eso? No mucho, ¿verdad? Así que queremos demostrar cómo puedes gestionar fácilmente el estado de la capa. Así que vamos a usar Jyoti para gestionar el estado. Puedes usar algo más, puedes usar Zustand, puedes usar Redux. Creo que Jyoti está muy bien alineado con dev.jl, porque los cambios atómicos son muy adecuados para cambiar propiedades individuales en la capa. Y así es como se hace normalmente. Así que vamos a crear un átomo de estado de capa. Vamos a añadir visibilidad y opacidad a él.

Y luego vamos a usar esas propiedades para básicamente crear el átomo y usar esos valores. Y mientras usas esos valores a través del átomo, también te permite establecer el valor del átomo a través de una interfaz de usuario diferente. Ese componente puede definirse en otro lugar, por supuesto, mientras usas el valor creado. Puedes simplemente establecer la visibilidad o la opacidad en una parte completamente diferente de la aplicación. Así que aquí, estamos usando eso para establecer la visibilidad y la opacidad, crear una pequeña casilla de verificación para alternar la visibilidad, un pequeño control deslizante para crear la opacidad.

7. Enhancing Interactivity with Hovering in GeoJSON

Short description:

Añadiendo propiedades en GeoJSON, enfocándose en la interacción de hover, actualizando la función de hover con el controlador onHover.

Hemos añadido algunas propiedades en nuestro GeoJSON, que es algo así como el nombre del edificio. Lo llamo edificio uno, edificio dos, edificio tres. Puedes añadir muchas más propiedades. Solo depende de tu caso de uso. Puede que quieras mostrar un tooltip cuando un usuario pase el cursor sobre él. De hecho, puede que quieras hacer algo cuando un usuario selecciona el objeto. En este momento, en el ejemplo de interactividad, nos vamos a enfocar en la parte de hover.

Así que similar, como en el ejemplo anterior, vamos a crear un átomo y vamos a añadir una característica de hover allí. La característica de hover es en realidad el objeto que vamos a usar para mostrar como un tooltip. En nuestras propiedades de capa, vamos a añadir un controlador onHover para actualizar la característica de hover. Esto es algo que proviene de DevGL. Pasas ese onHover a tu capa GeoJSON y como un callback, obtienes información sobre el objeto que estás seleccionando. Puedes obtener su latitud, longitud, puedes obtener las propiedades del GeoJSON, o algunas otras cosas, dependiendo de lo que realmente necesites.

Cuando establecemos ese valor de hover, podemos usar ese valor de hover en nuestro componente que llamamos tooltip y simplemente mostrar la información. Todo esto es muy básico, como mencioné, pero vamos a entrar en algunos ejemplos más avanzados. Aquí ves una aplicación de relámpagos en el norte de Europa, construida por Gizpo de Finlandia. Es una aplicación muy genial, la descubrí recientemente, me encantó cómo lo hicieron. Esto está construido en DevGL y como puedes ver, tiene algunos puntos en común con lo que construimos en el ejemplo anterior. Tenemos nuestro mapa y tenemos algunos controles.

8. Controles Avanzados del Mapa y Variedad de Capas

Short description:

Gestionando Controles del Mapa, Filtrado de Animación, Variedad de Capas en DevGL.

Tenemos nuestro mapa y tenemos algunos controles. Esos controles están gestionando el estado que se pasa a la capa DevGL que se renderiza en nuestro mapa. También tenemos algo adicional aquí, que es la parte de animación. La animación está funcionando como un filtro. Puedes seleccionar el rango de tiempo, y cuando reproduces, el rango de tiempo se aplica como un filtro a tus datos en tiempo real y funciona perfectamente. Esto no es un video de esto. Esta es una aplicación que realmente se ejecuta y funciona. Es importante notar que después de la charla, compartiré las diapositivas en mis redes sociales y todos estos ejemplos estarán vinculados en la esquina superior izquierda para que tú puedas revisarlos.

Puedes ver que estás configurando la velocidad de animación, estás configurando el multiplicador del tamaño de los puntos en caso de que quieras resaltar la visualización que está ocurriendo aquí. En la parte superior izquierda, puedes ver que la información que proviene del control deslizante también se actualiza allí. Así que hablemos un poco más sobre las capas. Vimos cómo estábamos usando una capa GeoJSON, pero hay muchas otras capas en DevGL, y una de ellas es una capa H3, que es un sistema de indexación geoespacial jerárquico. Así que divide la superficie de la Tierra en celdas hexagonales a múltiples resoluciones, por lo que proporciona una cuadrícula para análisis espacial. Es muy eficiente para el almacenamiento de datos, búsqueda de proximidad rápida, agregación de resultados, y optimización.

Aquí hay una aplicación que te dice el número de pedidos, qué pedido no es importante, pero te da una retroalimentación visual muy agradable sobre lo que está sucediendo y qué partes de la ciudad en tal vez ciertos momentos del día están recibiendo más pedidos. Eso es muy importante por diferentes razones, dependiendo de tu caso de uso y la aplicación que estás construyendo. Los mapas de calor, todos ustedes creo que saben sobre los mapas de calor. Los han visto en muchas, muchas formas diferentes. Esta también es una de las capas que viene lista para usar con DevGL. No voy a profundizar en cómo se puede aprovechar esto, pero es importante notar que es una herramienta muy útil y una capa muy común para usar con DevGL.

9. Visualizing Movement and Custom Layers

Short description:

Isochronas para Visualización de Origen-Destino, Animación de Capas de Viaje, Mapas de Flujo Personalizados en DevGL.

Isochronas, también muy populares, especialmente cuando quieres averiguar algún tipo de una visualización de origen-destino. Así que representan áreas accesibles desde un punto dentro de un tiempo o distancia dada. Se utilizan mucho en áreas como averiguar zonas alcanzables para diferentes tipos de modos de transporte. Y te proporciona esa accesibilidad basada en el tiempo y te permite personalizar parámetros. Así que todo eso lo puedes usar para visualizar en DevGL. Esta es una de las más emocionantes. A la gente realmente le encanta esta animación de visualización. Como mencioné, todos los ejemplos están vinculados en mi presentación para que puedas verlos como una aplicación en tu navegador.

Así que esta es una capa de viaje que te permite animar suavemente los movimientos de los objetos desde el inicio hasta el punto final a lo largo de una línea de tiempo. Así que, por supuesto, es importante tener los datos en un formato adecuado. Pero es muy, muy común usar esto en visualización de gestión de flotas, análisis de tráfico, transporte público. Así que puedes expandir la trayectoria, puedes ralentizar, acelerar la animación. Puedes aplicar filtrado como en el ejemplo con los relámpagos, donde quieres enfocarte en un cierto período de tiempo, solo ciertos tipos de vehículos quizás. Así que esta visualización muestra viajes de taxi amarillo versus taxi verde en Manhattan. Ejemplo muy popular para DevGL.

Y como mencioné, hay formas de construir tus propias capas personalizadas, y este mapa de flujo es una de esas capas personalizadas construidas por mi amigo Ilya, completamente de código abierto. Así que, creo que te da una forma diferente de visualizar tu movimiento, movilidad, migraciones de transporte. Así que está completamente renderizado en WebGL, y tiene esa agregación y filtrado adaptativos, y eso te permite manejar un gran número de flujos. Así que puedes ver que desde dos puntos, puedes ver inmediatamente de dónde proviene el tráfico más en una dirección o la otra. Por supuesto, puedes aplicar muchos filtros diferentes encima de eso. Así que un par de casos de uso reales es el Foursquare Studio. Tuve la suerte de construir esta herramienta desde que comenzó en Unfolded y luego fue adquirida por Foursquare. Así que esta es una herramienta de visualización de datos geoespaciales de propósito general. Puedes inyectar cualquier tipo de conjunto de datos y visualizar diferentes tipos de capas. Así que también está utilizando DevGL, y puedes ver aquí un análisis de idoneidad con capas H3.

10. State-Driven Mapping and Data Visualization

Short description:

Análisis de Datos Inmobiliarios, Visualización H3, Mapeo Basado en Estado en React.

Por ejemplo, creo que esto utiliza algunos datos sobre bienes raíces. Así que puedes analizar el precio en ciertas áreas, en ciertos períodos de tiempo, basándote en ciertos criterios, y de inmediato obtienes un resultado de dónde podría ser una buena idea invertir, cómo van los precios, hacer alguna evaluación de mercado. Otro buen ejemplo de usar H3 para este tipo de visualización es el Auto-Tuner de Política de Movilidad. Esta es una aplicación que encontré, no la he usado, pero ilustra bastante bien los ahorros de CO2 en ciertas partes de la ciudad. Así que verifica el tráfico, tiene sus propios datos, por supuesto, pero puedes ver claramente qué partes de la ciudad tienen las mayores emisiones de CO2 en ciertas partes del día. Así que esta también es una buena herramienta para quizás municipios de la ciudad o algunas instituciones gubernamentales para averiguar qué quieren hacer.

Y esto también funciona de la misma manera. Tienes tu aplicación React, tienes tu propio estado, gestionas ese estado de la manera que mostramos en el ejemplo anterior. Y tienes tu UI que es muy reactiva, y tu mapa que reacciona a tus actualizaciones en tus controles. Y si están compartiendo el estado, hace que sea bastante fácil y eficiente y de alto rendimiento visualizar estos cambios. Así que puedes ver aquí nuestro ejemplo, otro ejemplo es la aplicación que estoy construyendo aquí en Fused. Utiliza edificios de overture. Así que aquí es un poco diferente a las aplicaciones que he mostrado antes, porque el código que está a la izquierda está procesando los datos y dándote el resultado de esa salida en el lado derecho. Así que lo que esta visualización está mostrando es en realidad cómo puedes combinar dos conjuntos de datos y visualizar un mapa 3D para quizás demostrar, en este ejemplo específico, qué riesgo de desastre hay en estos edificios específicos. Así que edificios específicos son obtenidos de los datos de overture, y el riesgo es capturado de los datos de NSI. Y combinamos esos dos datos para averiguar quizás cuáles son los edificios más amenazados por terremotos, y visualizar eso de manera bastante eficiente y de alto rendimiento en nuestro mapa.

Así que estamos hablando de conclusiones clave aquí. A continuación, queremos hablar sobre cómo construir un mapeo declarativo basado en estado. Así que trata tu mapa como un componente React, controla tu estado de vista, visibilidad de capas, filtros de datos, a través de props y hooks, en lugar de llamadas WebGL imperativas, lo cual sería una pesadilla hacer. Así que, ¿por qué es importante? Reduce el código repetitivo, hace trivial sincronizar los controles de la UI con las actualizaciones del mapa. Mostramos esto en un ejemplo muy simple. Pero te mostré cómo aplicaciones complejas están construyendo eso. Y el principio es bastante el mismo. Por supuesto, con la sobrecarga de diferentes capas, grandes conjuntos de datos, UIs complejas, vienen otros problemas, pero esos son los problemas que ya estamos resolviendo en diferentes partes de la web. Nada nuevo ahí. Y el beneficio es aprovechar la aceleración de la GPU para descargar tareas pesadas, geometría, agregación y animaciones a la GPU a través de WebGL. Puedes alimentar formatos de datos binarios en capas basadas en mosaicos. Y esto es algo que va más allá de lo que demostramos antes. Pero si estás interesado, solo contáctame, y voy a hablar de ello un poco más directamente. Una de las cosas principales es que puedes mantener tus 60 cuadros por segundo, incluso con millones de puntos.

11. Gestión Eficiente del Estado para Capas WebGL

Short description:

Gestión Eficiente del Estado para Capas Personalizadas en WebGL, Optimización del Rendimiento con las Características de Deck.gl.

La arquitectura depende de cómo estés estructurando tu aplicación. Pero si gestionas tu estado de manera eficiente, y encapsulas la carga de datos y la lógica de configuración de capas y hooks reutilizables de React, como use map data o use layer props, tu aplicación trabajará para ti. Y podrás reutilizar eso en diferentes partes de la aplicación, ya sea un mapa o algún tipo de componente de control de capas, no importa.

Construir tus capas personalizadas extendiendo la clase de capa de WebGL es algo que es mucho más avanzado y mucho más complejo. Y tal vez vamos a entrar en esa charla en alguna otra sesión. Tu resultado es un código más limpio, pruebas más fáciles, reutilización rápida de características a través de las aplicaciones. Así que si estamos hablando de patrones de rendimiento para escalar, es importante envolver las configuraciones de capas en use memo implementar la actualización de la capa para evitar redibujos innecesarios, dependiendo de cuándo quieras redibujar tu capa, eso puede ser algo costoso de hacer.

Puedes usar web workers y confiar en la agregación incorporada de deck jails para reducir las llamadas de dibujo. Así que todas las referencias y demos también están listadas aquí. Puedes echar un vistazo a ellas, hacer clic en cada enlace, pasar por los ejemplos, aplicaciones web. Si quizás olvidé agregar algo, solo contáctame, se añadirá. Y sí, eso es más o menos todo. Gracias por tu tiempo. Espero que lo hayas disfrutado y contáctame para conectar. Si tienes alguna pregunta, no dudes en hacerlo. 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

TypeScript y la Base de Datos: ¿Quién Posee los Tipos?
TypeScript Congress 2022TypeScript Congress 2022
27 min
TypeScript y la Base de Datos: ¿Quién Posee los Tipos?
Top Content
The Talk discusses the use of TypeScript and SQL together in software development. It explores different approaches, such as using an ORM like TypeORM or a schema generator like pg2ts. Query builders like connects JS and tools like PGTyped are also discussed. The benefits and trade-offs of using TypeScript and SQL are highlighted, emphasizing the importance of finding a middle ground approach.
Nunca usaría un ORM
JSNation 2023JSNation 2023
29 min
Nunca usaría un ORM
Top Content
Welcome to a talk on Object-Relational Mapping (ORM) and its potential pitfalls. The speaker discusses issues with modals and the MVC pattern, as well as the benefits of structuring code around system features instead. They introduce PlatformaticDB as a solution for easy backend development, showcasing its deployment and testing capabilities. The talk also covers integrating with Next.js, writing custom SQL queries, and the speaker's plans for future support and database compatibility.
Acceso a la base de datos en el Edge con Cloudflare Workers y Prisma
Node Congress 2022Node Congress 2022
31 min
Acceso a la base de datos en el Edge con Cloudflare Workers y Prisma
This Talk discusses database access on the edge with CloudFlare workers and the challenges of serverless platforms. It explores solutions for database access, including CloudFlare-specific solutions and using Prisma data proxy. The Prisma toolkit and demo are showcased, demonstrating how to convert an application to use a database. The process of setting up Prisma Data Platform and deploying the application to CloudFlare workers is explained. The Talk concludes with insights on database usage and the differences between serverless, CDN, and the Edge.
Lleva la búsqueda basada en IA a tu aplicación web
JSNation 2023JSNation 2023
31 min
Lleva la búsqueda basada en IA a tu aplicación web
The Talk discusses the use of machine learning in search engines, specifically focusing on semantic search and vector embeddings. It explores the integration of JavaScript and machine learning models, using Weaviate as an open-source vector database. The Talk demonstrates how to connect to Weaviate, query data, and perform machine learning queries. It also highlights the benefits of Weaviate, such as its superior developer experience and performance. Additionally, the Talk addresses customization options, data privacy concerns, and the varying effectiveness of different machine learning models.
Persistencia de Remix con DynamoDB
Remix Conf Europe 2022Remix Conf Europe 2022
41 min
Persistencia de Remix con DynamoDB
DynamoDB is a next-generation key-value database that is low-latency, scalable, and easy to use. It offers advantages such as local development options, a generous free tier, and fast performance. Common misconceptions about DynamoDB being expensive or hard to learn are debunked. The Talk covers topics like basic modeling, separating concerns, working with DynamoDB in Remix, and building a DynamoDB client. Overall, DynamoDB is a powerful database that integrates well with Remix and provides efficient data access patterns.
Software Local-Primero Con ElectricSQL
React Advanced 2023React Advanced 2023
29 min
Software Local-Primero Con ElectricSQL
Local-first software allows for instant display of data to the user, offering zero latency and offline functionality. It simplifies data synchronization and enables real-time multi-user sync. Popular tools like Facebook Messenger and Google Workspace apps have adopted this pattern. Electric SQL provides a drop-in sync layer for existing applications, combining real-time functionality with conflict-free offline capabilities. Local-first software replaces APIs and microservices with a standardized replication protocol, simplifying state management and reducing server load.

Workshops on related topic

Modelado de Bases de Datos Relacionales para GraphQL
GraphQL Galaxy 2020GraphQL Galaxy 2020
106 min
Modelado de Bases de Datos Relacionales para GraphQL
Top Content
Workshop
Adron Hall
Adron Hall
En esta masterclass profundizaremos en el modelado de datos. Comenzaremos con una discusión sobre varios tipos de bases de datos y cómo se mapean a GraphQL. Una vez que se haya establecido esa base, el enfoque se desplazará a tipos específicos de bases de datos y cómo construir modelos de datos que funcionen mejor para GraphQL en varios escenarios.
Índice de contenidosParte 1 - Hora 1      a. Modelado de Datos de Bases de Datos Relacionales      b. Comparando Bases de Datos Relacionales y NoSQL      c. GraphQL con la Base de Datos en menteParte 2 - Hora 2      a. Diseño de Modelos de Datos Relacionales      b. Relación, Construcción de Tablas Multijoin      c. Complejidades de Consulta de Modelado de Datos Relacionales y GraphQL
Prerrequisitos      a. Herramienta de modelado de datos. El formador utilizará dbdiagram      b. Postgres, aunque no es necesario instalar esto localmente, ya que estaré utilizando una imagen de Dicker de Postgres, de Docker Hub para todos los ejemplos      c. Hasura
Escalando tu base de datos con ReadySet
Node Congress 2023Node Congress 2023
33 min
Escalando tu base de datos con ReadySet
WorkshopFree
Aspen Smith
Nick Marino
2 authors
La base de datos puede ser una de las partes más difíciles de escalar en una aplicación web. Muchos proyectos terminan utilizando sistemas de caché ad-hoc que son complejos, propensos a errores y costosos de construir. ¿Qué pasaría si pudieras implementar un sistema de caché listo para usar para mejorar el rendimiento y la optimización de consultas sin necesidad de realizar cambios en el código de tu aplicación?
Únete a los desarrolladores Aspen Smith y Nick Marino para ver cómo puedes cambiar una línea de configuración en tu aplicación y utilizar ReadySet para escalar el rendimiento de tus consultas en órdenes de magnitud hoy mismo.
Crear una aplicación React Native de pila completa con Oracle 23ai
React Summit 2024React Summit 2024
37 min
Crear una aplicación React Native de pila completa con Oracle 23ai
WorkshopFree
Doug Drechsel
Doug Drechsel
En este masterclass, configurarás un entorno de pila completa local y crearás una aplicación móvil React Native que se ejecuta en esa pila.
Agenda:- Instalar el contenedor Docker de Oracle 23ai- Construir y ejecutar Parse Server con el nuevo adaptador de almacenamiento de Oracle- Construir y ejecutar una aplicación móvil React Native de Walking History en la pila
Walking History es una aplicación React Native que te permite caminar por la ciudad de Nueva York (o simularlo en un emulador de dispositivos) y te muestra la atracción o punto de interés más cercano.
Cómo Resolver Problemas del Mundo Real con Remix
Remix Conf Europe 2022Remix Conf Europe 2022
195 min
Cómo Resolver Problemas del Mundo Real con Remix
Workshop
Michael Carter
Michael Carter
- ¿Errores? Cómo renderizar y registrar tus errores del servidor y del clientea - Cuándo devolver errores vs lanzar excepcionesb - Configurar servicios de registro como Sentry, LogRocket y Bugsnag- ¿Formularios? Cómo validar y manejar formularios de varias páginasa - Usar zod para validar los datos del formulario en tu acciónb - Pasar por formularios de varias páginas sin perder datos- ¿Atascado? Cómo solucionar errores o funciones faltantes en Remix para que puedas continuara - Usar patch-package para solucionar rápidamente tu instalación de Remixb - Mostrar herramienta para gestionar múltiples parches y seleccionar solicitudes de extracción abiertas- ¿Usuarios? Cómo manejar aplicaciones de varios inquilinos con Prismaa - Determinar el inquilino por el host o por el usuariob - Base de datos múltiples o base de datos única/múltiples esquemasc - Asegura que los datos del inquilino siempre estén separados de los demás
Construyendo un Sistema RAG en Node.js: Bases de Datos Vectoriales, Embeddings y Chunking
Node Congress 2025Node Congress 2025
98 min
Construyendo un Sistema RAG en Node.js: Bases de Datos Vectoriales, Embeddings y Chunking
Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
Los Modelos de Lenguaje Grande (LLMs) son poderosos, pero a menudo carecen de conocimiento en tiempo real. La Generación Aumentada por Recuperación (RAG) cierra esta brecha al obtener información relevante de fuentes externas antes de generar respuestas. En esta masterclass, exploraremos cómo construir un pipeline RAG eficiente en Node.js utilizando feeds RSS como fuente de datos. Compararemos diferentes bases de datos vectoriales (FAISS, pgvector, Elasticsearch), métodos de embedding y estrategias de prueba. También cubriremos el papel crucial del chunking: dividir y estructurar datos de manera efectiva para un mejor rendimiento de recuperación.Requisitos Previos- Buen entendimiento de JavaScript o TypeScript- Experiencia con Node.js y desarrollo de API- Conocimientos básicos de bases de datos y LLMs son útiles pero no requeridos
Agenda📢 Introducción a RAG💻 Demo - Aplicación de Ejemplo (RAG con Feeds RSS)📕 Bases de Datos Vectoriales (FAISS, pgvector, Elasticsearch) y Embeddings🛠️ Estrategias de Chunking para Mejor Recuperación🔬 Pruebas y Evaluación de Pipelines RAG (Precisión, Recall, Rendimiento)🏊‍♀️ Consideraciones de Rendimiento y Optimización🥟 Resumen y Preguntas y Respuestas
Construyendo una aplicación en tiempo real con Remix y Supabase
Remix Conf Europe 2022Remix Conf Europe 2022
156 min
Construyendo una aplicación en tiempo real con Remix y Supabase
Workshop
Jon Meyers
Jon Meyers
Supabase y Remix hacen que sea fácil construir aplicaciones fullstack. En este masterclass, vamos a aprender cómo usar Supabase para implementar autenticación y autorización en una aplicación en tiempo real con Remix. Únete a Jon Meyers mientras construye esta aplicación desde cero y demuestra cómo puedes aprovechar el poder de las bases de datos relacionales!