Pruebas de integración encantadoras con Testcontainers

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

Los servicios Dockerizados son una excelente herramienta para crear entornos aislados y repetibles ideales para pruebas de integración. En esta sesión, veremos las bibliotecas de Testcontainers que proporcionan una API flexible e intuitiva para controlar programáticamente el ciclo de vida de las dependencias de su servicio en contenedores Docker. Ejecutar bases de datos, Kafka, Elasticsearch e incluso tecnologías en la nube, directamente desde su código de prueba asegura que la configuración del entorno siempre esté actualizada y sea consistente durante el desarrollo local y en los pipelines de CI.

Aprenderás todo lo necesario para comenzar a agregar pruebas de integración poderosas a tu base de código sin el dolor de cabeza de administrar dependencias de servicio externas manualmente!

This talk has been presented at TestJS Summit 2022, check out the latest edition of this JavaScript Conference.

FAQ

Las pruebas de integración son cruciales porque permiten verificar que diferentes partes de una aplicación trabajen correctamente en conjunto. Esto es especialmente vital en aplicaciones modernas que suelen ser sistemas distribuidos, como microservicios, asegurando que interactúan adecuadamente con otras APIs y servicios externos.

Test Containers proporciona una API que permite una gestión programática de los contenedores, facilitando la creación, configuración, y limpieza de estos. Esto simplifica el proceso de configurar entornos de prueba complejos y hace que las pruebas sean más reproducibles y confiables comparado con la gestión manual directa con Docker.

Test Containers automatiza la creación de entornos de prueba al permitir la configuración y manejo programático de contenedores Docker. Esto elimina la necesidad de configuraciones manuales y ayuda a integrar las pruebas en pipelines de CI/CD, facilitando la ejecución de pruebas consistentes y repetibles.

Con Test Containers, es posible simular una amplia gama de servicios y tecnologías como bases de datos (por ejemplo, MongoDB, MySQL), brokers de mensajes como Kafka, y otros servicios necesarios para las pruebas de integración. Esto se logra gracias a la integración con Docker, que puede alojar prácticamente cualquier software necesario.

Sí, Test Containers está disponible en varias implementaciones para diferentes lenguajes de programación, incluyendo Java, JavaScript (Node.js), Python, .NET, entre otros. Esto permite que equipos que utilizan diferentes tecnologías puedan implementar pruebas de integración consistentes y confiables usando una metodología común.

Los Test Containers son bibliotecas en diversos lenguajes de programación que permiten crear entornos efímeros usando Docker para ejecutar las dependencias de servicios que requiere una aplicación. Estos entornos permiten realizar pruebas de integración de manera confiable, replicando las condiciones de producción en un entorno de prueba controlado.

Oleg Šelajev
Oleg Šelajev
21 min
03 Nov, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Las pruebas son cruciales para el desarrollo y la producción, con las pruebas de integración cada vez más populares. Testcontainers es una biblioteca que se integra con Docker para crear entornos de prueba confiables. Es flexible y se puede usar con varios marcos y bibliotecas de prueba. La configuración de IDE implica configurar el contenedor y conectarlo a la aplicación. Testcontainers se puede usar para operaciones complejas y permite ejecutar pruebas con dependencias reales.

1. Introducción a las pruebas de integración

Short description:

Las pruebas son súper importantes para el desarrollo y la producción. Las pruebas automatizadas son cruciales para la liberación de software. Las pruebas de integración se han vuelto más populares a medida que las aplicaciones dependen de las interacciones con sistemas de terceros. Proporcionan un conjunto de pruebas confiable que detecta problemas del mundo real.

Hola. Estás viendo TestJS Summit y estas son pruebas de integración encantadoras con Test Containers. Testing es muy importante. Más proyectos deberían probar las aplicaciones mejor y espero que después de esta breve sesión, aprendas cómo puedes hacer pruebas de integración que te gusten usando las bibliotecas de Test Containers.

Mi nombre es Alex Shoive y trabajo como una persona de Relaciones con Desarrolladores en Atomic Jar, una empresa creada... una startup creada por los mantenedores originales de Test Containers en Java y ahora tenemos más personas de diferentes ecosistemas de lenguajes que nos ayudan a trabajar en Test Containers. Si tienes alguna pregunta, puedes encontrarme en línea. Estaré encantado de charlar sobre cualquier cosa. Test Containers, así que testing relacionado o simplemente ingeniería de software en general. Creo que sería muy, muy genial. Así que envíame, envíame un mensaje.

Testing es súper, súper importante porque se encuentra en los caminos críticos desde el desarrollo hasta la producción. Si no tenemos un buen conjunto de pruebas automatizadas, no podemos liberar cosas bien. Necesitamos tener pruebas automatizadas porque queremos asegurarnos de que siempre que tengamos algo que potencialmente queramos liberar, podemos pasar por nuestro pipeline sin cuellos de botella en ningún proceso manual. Esto es útil durante una práctica de desarrollo normal, ciclo de desarrollo, pero también es súper útil en caso de que haya problemas de seguridad o problemas de cadena de suministro de seguridad donde actualizas los paquetes de terceros, y luego necesitas liberar cosas porque podrían ser problemas de seguridad y vulnerabilidades, pero si no tienes buenos conjuntos de pruebas en los que confíes, entonces este es un proceso manual y estás tan expuesto como siempre. Pero si lo haces, puedes ejecutar tus pruebas automatizadas. Puedes liberar inmediatamente porque tienes confianza en tus pruebas. Esto es muy, muy importante, y últimamente, la forma en que vemos qué tipos de pruebas queremos ejecutar ha cambiado.

En el pasado, teníamos la pirámide de testing y ejecutábamos un montón de unit tests y cubrían todos los escenarios posibles y teníamos una muy buena cobertura de pruebas, y aún así nos perdimos algunos problemas. Así que, recientemente, equipos independientes han estado saliendo a la luz sobre cómo están repensando la pirámide de testing y cómo ponen más y más énfasis en las pruebas de integración. Mientras tanto, tiene mucho sentido. Nuestras aplicaciones se han vuelto más pequeñas. Estamos escribiendo en su mayoría, y estamos hablando de las aplicaciones de backend aquí, estamos escribiendo principalmente microservices que hablan con otras APIs o hablan con varias tecnologías como bases de datos o intermediarios de mensajes o tecnologías de Cloud, y el comportamiento de la aplicación está muy codificado en las interacciones con esos sistemas de terceros más que en la lógica de negocio dentro de la aplicación particular, cómo transforma los data. Por lo tanto, tiene sentido tener menos pruebas de detalles de implementación, y usar la prueba de integración que ejecuta tu aplicación con el entorno inmediato, con todos los componentes necesarios para que tu aplicación funcione correctamente como lo haría en producción, pero en tu configuración de testing. Eso podría ser la mayor parte de nuestro conjunto de pruebas. Esa podría ser la prueba en la que confiamos y en la que nos apoyamos. Y todavía podemos tener pruebas de integración de extremo a extremo que se ejecutan en un entorno similar a la producción, donde todos los sistemas se activan al mismo tiempo. Y cuando verificamos los flujos de trabajo reales, como si fuera un entorno de producción, data de producción, o data similar, pero en un entorno mucho más grande. Así que para un conjunto de pruebas que ejecutas en todas partes, en tu máquina, en la máquina de tu colega, en tu CI, las pruebas de integración dan en el punto dulce entre la simplicidad de la configuración y también cuántos problemas con las tecnologías del mundo real pueden detectar. Por eso están ganando más y más popularidad.

2. Introducción a Test Containers

Short description:

Test Containers es una biblioteca que se integra con Docker para crear entornos efímeros para ejecutar dependencias de servicios de terceros. Te permite probar tu aplicación con dependencias reales, haciendo tus pruebas más confiables. Test Containers utiliza Docker como el entorno para iniciar contenedores. Sin embargo, Docker a veces es inflexible para las pruebas de integración. Aquí es donde entra TestContainers, proporcionando acceso programático para crear y administrar contenedores para pruebas.

Esto nos lleva a Test containers. Test containers son bibliotecas en diferentes lenguajes, incluyendo la implementación de test getters' node que funciona para JavaScript y TypeScript. Se integran con Docker para crear entornos efímeros donde puedes ejecutar las dependencias de servicios de terceros que tu aplicación requiere. Puedes ejecutar las bases de datos, puedes ejecutar tu Kafka, puedes ejecutar tu Elasticsearch, puedes aprender tu local stack, si trabajas con tecnologías LWS.

Puedes ejecutarlos en Docker containers, y tu aplicación tiene el control total sobre el ciclo de vida de estos. Y tus pruebas tienen el control total sobre la configuración de estos. Así que puedes probar tu aplicación con las dependencias reales y saber que funciona como se espera.

Test containers ha sido recientemente nombrado en el Radar de Tecnología de ThoughtWorks. Fue puesto en la categoría Adulto, lo que significa técnicamente que debería haber una fuerte razón. Realmente deberías saber lo que estás haciendo, si no quieres usar Test containers. Test containers te permite crear un entorno confiable con la creación programática de esos containers ligeros para tus dependencias. Y hace tus pruebas más confiables, e intenta empujarte a hacer las cosas correctas con tus pruebas de integración, y por eso hay cada vez más proyectos, que están utilizando Test containers en diversas configuraciones y entornos.

Test containers utiliza Docker como el entorno donde inicia esos containers que tu aplicación quiere ejecutar. Y esto es genial porque Docker está casi universalmente disponible, funciona en todos los sistemas operativos populares, y sus desarrolladores entienden cómo funciona Docker, o cómo usar Docker desde el exterior. Así que esta es una gran opción para aprovechar un tiempo de ejecución para ejecutar esas dependencias para tu aplicación. Sin embargo, el aspecto y la sensación de Docker no son a veces lo suficientemente flexibles para tus pruebas de integración.

Docker es genial porque tiene todo el software del mundo que puede ser ejecutado en Docker. Hay registros donde puedes obtener todas las tecnologías que tu alma requiere. Te proporciona aislamiento de procesos. Te proporciona la capacidad de configurar tanto el contenedor como la aplicación dentro del contenedor. Te dan los límites de CPU y memoria. Todas esas cosas buenas, pero es un poco inflexible para las pruebas específicamente porque durante las pruebas, queremos poner nuestra aplicación en escenarios específicos donde algo podría salir mal. ¿Qué sucederá cuando la aplicación trabaje con una database y el esquema de data sea incorrecto? ¿O qué sucederá si mi aplicación no tiene una latencia larga hasta que llegue a Kafka? ¿O qué sucede cuando los números de clave de mi Redis están cerca del rango de enteros y están tratando de desbordarse? Todos los diferentes escenarios y todos rompen la configuración de alguna manera. Esta es la noción de pruebas. Esto es lo que las pruebas deberían hacer. Ponen tu aplicación bajo estrés y luego quieren averiguar si se comporta correctamente. Así que con Docker, una vez que rompes el entorno, es muy, muy difícil recrear el entorno. Y aquí es donde entra TestContainers.

TestContainers te da acceso programático para crear, administrar, ciclo de vida y limpiar los containers que quieres ejecutar. Te da una API para configurar tanto el contenedor, como exponer qué puertos quieres exponer desde el contenedor si estás trabajando con él a través de la red.

3. Introducción a Test Containers Continuación

Short description:

Test containers es un enfoque popular para las pruebas de integración que proporciona una configuración flexible. Se integra con varios marcos de trabajo y bibliotecas de pruebas, incluyendo Jest. Test containers se encarga de la limpieza de los contenedores, asegurando un entorno repetible. La biblioteca viene con módulos para ejecutar tecnologías populares en contenedores, permitiendo a los desarrolladores centrarse en la lógica de negocio. No se limita a Node.js y puede ser utilizado en cualquier ecosistema de lenguaje de programación.

O qué archivos quieres copiar, o si quieres seguir programáticamente los registros del contenedor y así sucesivamente. Así que puedes configurar todo desde tus pruebas de aplicación, desde tu IDE. Y no necesitas, puedes, puedes hacer esto cualquier número de veces. Así que las pruebas traen su propio entorno al juego. Y también se integra con varios frameworks y bibliotecas de pruebas.

Por ejemplo, hay un módulo para Jest test containers, que simplifica el trabajo con Jest test, y test containers, donde puedes especificar declarativamente qué containers quieres, por ejemplo. Testcontainersnode, como las otras implementaciones de test containers, es un proyecto de código abierto. Christian es un verdadero héroe de la implementación de testcontainersnode, el principal mantenedor actualmente. Hay un paquete npm, que es cómo obtienes test containers en tu aplicación. Y lo que hace, utiliza docker-node para hablar con el entorno docker, así que tu entorno docker no necesita ser ninguna implementación docker en particular. Por supuesto, funciona con Docker Desktop, pero también puede funcionar con cualquier otra implementación docker compatible. Así que, por ejemplo, si estás ejecutando Minikube, el ligero clúster de Kubernetes que expone la API de Docker, puedes usar eso para ejecutar tus pruebas basadas en test containers. O si estás usando un Docker remoto, tus test containers pueden hablar con eso. Y internamente en Atomic Jar, estamos construyendo la solución cloud, donde puedes obtener una VM bajo demanda y ejecutar tus pruebas de test containers contra eso. Así que es una configuración muy, muy flexible, y funciona realmente bien.

Una cosa que es muy importante aquí es que test containers se encarga de la limpieza de los containers. Sabemos que para pruebas de integración confiables, necesitas tener un entorno repetible, y para eso, siempre quieres limpiar después de la ejecución. Eso significa que si tus pruebas pasan, limpiamos los containers y los eliminamos. Si tus pruebas fallan, limpiamos los containers y los eliminamos. Si tu máquina funciona con un entorno Docker remoto y tu máquina se bloquea, como si Internet explotara, todavía limpiaremos los containers en el host Docker remoto. Eso significa que nunca estarás en una situación en la que tu prueba se conecte a la instancia de Kafka que iniciaste hace dos semanas y que por alguna razón está persistiendo en tu potente máquina CI. Y luego porque los problemas que surgen de eso son realmente, realmente difíciles de reproducir e increíblemente difíciles de debug y arreglar. Así que las bibliotecas de test containers intentan empujarte en la dirección correcta con las pruebas de contenedores de prueba para permitir la paralelización de las pruebas de manera agradable, para empujarte a usar la API correcta, para hacer la limpieza en todo momento. Y en general, es un enfoque muy, muy popular.

Además de ser una buena biblioteca por sí misma, test containers viene con un ecosystem de los modules donde las tecnologías populares tienen una pequeña implementación, pequeñas bibliotecas, pequeños modules, que especifican y codifican cómo ejecutar esa tecnología particular en tu code. Así que no tienes que averiguar qué necesitas hacer para ejecutar Cassandra en un contenedor Docker o Kafka en un contenedor Docker, pero puedes simplemente usar la API y especificar, dame un contenedor Kafka, dame un contenedor MongoDB, y obtendrás una instancia de eso inmediatamente para ti, lo cual es genial porque eso te permite concentrarte en la lógica de negocio real de tus tareas sin gastar tiempo en averiguar la infraestructura, porque eso es gestionado por task containers. Y no es sólo un proyecto de nodo, ¿verdad? Task containers es bueno las pruebas de integración son necesarias en cualquier ecosystem de cualquier lenguaje de programación. Así que lo que puedes hacer, puedes tener el enfoque similar en tu aplicación Java, en tus aplicaciones .NET, en tu aplicación Go, hay Python, hay task containers Rust. Así que es un enfoque de ingeniería muy, muy popular. Y ahora me gustaría mostrarte un poco cómo se siente tener tareas y cuáles son los bloques de construcción de la API que necesitas conocer para ser productivo con task containers.

4. Explorando IDE y Configuración Básica

Short description:

Vamos a explorar el IDE. Podemos declarar la dependencia como de costumbre para obtener el paquete npm. El bloque de construcción básico es el contenedor genérico, que representa el contenedor gestionado por task containers. Configuramos el contenedor especificando el nombre de la imagen Docker, exponiendo los puertos y copiando archivos. El contenedor puede ser ejecutado en cualquier lugar, y utilizamos la instancia del contenedor genérico para proporcionar información para que nuestra aplicación se conecte. Después de las pruebas, test containers limpia el contenedor. La prueba en sí misma coloca y recupera valores en Redis.

Vamos a explorar el IDE. Bien. Así que tengo un proyecto muy, muy simple aquí. No tiene ni siquiera la aplicación real. Solo quiero darles una idea de la API y hablar de lo que es importante desde el punto de vista de task containers.

Muy bien. Así que podemos declarar la dependencia como de costumbre para obtener ese paquete npm. Y aquí en nuestro archivo de prueba, lo que podemos hacer, podemos requerir task containers y el bloque de construcción básico es el contenedor genérico. El contenedor genérico es una abstracción que representa el contenedor que podemos gestionar a través de task containers. Lo que necesitamos darle, necesitamos darle el nombre de la imagen Docker, que es en los casos actuales, Redis vamos a ejecutar con el contenedor Redis y luego hacemos la configuración. Podemos exponer los puertos. Podemos configurar qué archivos necesitamos copiar en el contenedor. Por ejemplo, esta es una buena manera de instanciar tu esquema de database enviándolo a tu contenedor. Y luego, por supuesto, tenemos los métodos para usar y configurar el ciclo de vida de nuestros containers de nuestra infraestructura que necesitamos para la prueba.

Así que aquí en esta prueba, estamos. Especificamos que queremos crear el contenedor antes de todas las pruebas. Así que este contenedor será compartido entre todas las pruebas. Actualmente, no tenemos muchas, pero creamos el contenedor y luego esto es lo interesante, el contenedor puede ser ejecutado en cualquier lugar. Puede estar ejecutándose en el host Docker remoto o en tu host local o en una VM en algún lugar. Cuando nos aseguramos de que nuestra aplicación sabe cómo hablar con la tecnología, con la database, o en este caso, Redis en ese contenedor, no codificamos ninguna configuración, pero usamos esa instancia de contenedor genérico para proporcionar información de dónde se está ejecutando para que podamos configurar nuestra aplicación correctamente. Así que aquí simplemente decimos, oh Redis, vas a hablar con Redis, el cliente Redis, lo siento. Vas a hablar con Redis por ese host, que obtenemos del contenedor y el puerto expuesto 6379 será mapeado al puerto aleatorio de alto nivel en el lado del host aquí. Digamos, obtenemos el puerto mapeado para ese valor, y luego nuestro cliente Redis está listo para conectarse a Redis. Después de todo, limpiamos todo, pero no tenemos que hacerlo. Al menos no tenemos que limpiar el contenedor porque test containers, cuando nuestras pruebas pasan, test containers lo limpiará por sí mismo. Pero esta es aún una buena práctica, si quieres desplegar miles de containers durante una suite de pruebas, tal vez deberías cuidar del ciclo de vida tú mismo y detenerlos. Así que simplemente no usan todos los recursos al mismo tiempo. Así que la prueba en sí misma es súper simple. Solo queremos poner los valores en Redis y obtener los valores en Redis. Y puedes ver que si ejecuto mi aplicación, entonces podemos ver que los containers están allí.

5. Ejecución de Pruebas e Importación de Módulos

Short description:

Al ejecutar las pruebas, los contenedores se activan y se ejecutan en la nube de TestCenter. Se proporciona un ejemplo de una aplicación express que utiliza MongoDB como almacenamiento. Las pruebas utilizan SuperTest para pruebas funcionales de alto nivel, esperando solicitudes exitosas y recuperación de datos. En lugar de construir los contenedores nosotros mismos, importamos módulos para tecnologías comunes como MySQL, MongoDB, Kafka, Elasticsearch y Postgres. Se agradecen las contribuciones de módulos para otras tecnologías.

Entonces, si hago docker stats. Actualmente solo está el contenedor raíz, que es el contenedor testing que usa internamente para limpiar con fines de limpieza. Entonces, si solo hago. Configuración muy simple aquí. Así que volveré a ejecutar las pruebas y puedes ver que los containers se activarán por un segundo y luego también se ejecutarán.

Entonces, no ejecuto mi Docker localmente aquí. Utilizo la cloud de TestCenter, que está conectada a un clúster cercano. Ahí es donde se ejecutan mis containers Docker. Y luego, si quieres un ejemplo más grande de nuestra situación, entonces tengo uno diferente. Esta es una aplicación express real que utiliza MongoDB como almacenamiento. Permíteme solo la prueba muy simple. Veamos la prueba. Solo usamos SuperTest para enviar una solicitud, pruebas funcionales de alto nivel reales para nuestra aplicación. Y luego esperamos que esas solicitudes tengan éxito. Y luego esperamos los data de vuelta. Entonces, esta es una prueba funcional de muy alto nivel.

Y la parte interesante aquí es que no construimos los containers nosotros mismos. No decimos cómo configurar MongoDB. Pero lo que estamos haciendo, solo estamos importando el módulo que podemos tener. Y si miras el... Si miras el repositorio, puedes ver que hay algunos modules que son para tecnologías bastante comunes. MySQL, Mongo, Kafka, Elasticsearch, Postgres que están ahí. Y no es una implementación tan grande. Entonces, si estás interesado en cualquier otra tecnología que quieras ejecutar, tal vez después de averiguarlo para tu entorno, considera contribuir con un módulo de vuelta. Eso sería un gran uso. Correcto. Entonces aquí usamos Mongo. Y puedes ver cómo funciona. Entonces, una forma de ser contenedor que ejecutamos.

6. Uso de Test Containers para Operaciones Complejas

Short description:

Los contenedores de prueba proporcionan una única forma de soportar operaciones complejas de larga duración, como iniciar contenedores y esperar a que se inicien. Es un enfoque flexible y fácil de integrar que te permite ejecutar pruebas con dependencias reales. Puedes construir topologías complejas, esperar a que se inicie la base de datos, crear imágenes al vuelo y realizar diversas operaciones con Docker. Consulta la fuente en GitHub y únete a la comunidad de Slack para más discusiones.

Esperamos a eso. Eso va a notar es una magia. No solo paquete. Así que una única forma de soportarlo, por supuesto, para todas las operaciones complejas de larga duración como iniciar containers y esperar a la tecnología, el contenedor para comenzar. Y luego podemos configurar nuestro cliente MongoDB para usar la cadena de conexión de nuestro modelo. Ni siquiera necesitas saber qué es exactamente la cadena de conexión o cómo se ve. ¿Cuál es el formato de eso? Solo puedes ejecutarlo. Y esto es muy, muy genial.

Así que ahora después de eso, por supuesto, nos desconectamos y luego podemos ejecutar las pruebas. Y aquí ejecutamos más pruebas. Así que si ejecuto NPM test aquí, puedes ver en segundo plano, si la imagen de Docker no está en la caché de mi demonio de Docker, entonces la imagen será automáticamente extraída del Hub de Docker para soporte de Escritorio, los registros privados también, authentication, cualquier cosa que puedas extraer con Docker sería soportada. Y luego puedes simplemente ejecutarlo. Y luego después de que todo está dicho y hecho, los containers se limpian y se eliminan junto con los volúmenes y todo eso. Así que es un enfoque muy, muy flexible. Es muy fácil de integrar en tus aplicaciones. También puedes empaquetar tu aplicación en un contenedor de Docker, pero yo preferiría ejecutarlo normalmente, ejecutarlo normalmente en mi máquina para mi ID, porque entonces pueden enviar puntos de interrupción y ejecutarlo a voluntad.

Así que solo una diapositiva más. Hay que puedes hacer las cosas complejas. Puedes construir topologías complejas con red. Puedes esperar a que la database en el contenedor se inicie. Puedes crear las imágenes al vuelo. Puedes extraer los registros y copiar archivos de ida y vuelta y ejecutar los comandos. Cualquier cosa que funcione con Docker funciona como test containers. Y creo que este es un enfoque realmente, realmente genial. Y eres bienvenido a consultar la fuente en GitHub. Y si tienes alguna pregunta o si quieres probar y hablar con la community, por favor únete a Slack en SlackTaskContainers.org para hablar con personas de ideas afines. Eso es todo. Muchas gracias por ver. Y si tienes alguna pregunta, estaré encantado de responderla. 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

Escalando con Remix y Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Escalando con Remix y Micro Frontends
Top Content
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
Componentes de Full Stack
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Componentes de Full Stack
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
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.
Haciendo JavaScript en WebAssembly Rápido
JSNation Live 2021JSNation Live 2021
29 min
Haciendo JavaScript en WebAssembly Rápido
Top Content
WebAssembly enables optimizing JavaScript performance for different environments by deploying the JavaScript engine as a portable WebAssembly module. By making JavaScript on WebAssembly fast, instances can be created for each request, reducing latency and security risks. Initialization and runtime phases can be improved with tools like Wiser and snapshotting, resulting in faster startup times. Optimizing JavaScript performance in WebAssembly can be achieved through techniques like ahead-of-time compilation and inline caching. WebAssembly usage is growing outside the web, offering benefits like isolation and portability. Build sizes and snapshotting in WebAssembly depend on the application, and more information can be found on the Mozilla Hacks website and Bike Reliance site.
¿Webpack en 5 años?
JSNation 2022JSNation 2022
26 min
¿Webpack en 5 años?
Top Content
In the last 10 years, Webpack has shaped the way we develop web applications by introducing code splitting, co-locating style sheets and assets with JavaScript modules, and enabling bundling for server-side processing. Webpack's flexibility and large plugin system have also contributed to innovation in the ecosystem. The initial configuration for Webpack can be overwhelming, but it is necessary due to the complexity of modern web applications. In larger scale applications, there are performance problems in Webpack due to issues with garbage collection, leveraging multiple CPUs, and architectural limitations. Fixing problems in Webpack has trade-offs, but a rewrite could optimize architecture and fix performance issues.
Hacia una Biblioteca Estándar para Runtimes de JavaScript
Node Congress 2022Node Congress 2022
34 min
Hacia una Biblioteca Estándar para Runtimes de JavaScript
Top Content
There is a need for a standard library of APIs for JavaScript runtimes, as there are currently multiple ways to perform fundamental tasks like base64 encoding. JavaScript runtimes have historically lacked a standard library, causing friction and difficulty for developers. The idea of a small core has both benefits and drawbacks, with some runtimes abusing it to limit innovation. There is a misalignment between Node and web browsers in terms of functionality and API standards. The proposal is to involve browser developers in conversations about API standardization and to create a common standard library for JavaScript runtimes.

Workshops on related topic

Domina los Patrones de JavaScript
JSNation 2024JSNation 2024
145 min
Domina los Patrones de JavaScript
Top Content
Featured Workshop
Adrian Hajdin
Adrian Hajdin
Durante esta masterclass, los participantes revisarán los patrones esenciales de JavaScript que todo desarrollador debería conocer. A través de ejercicios prácticos, ejemplos del mundo real y discusiones interactivas, los asistentes profundizarán su comprensión de las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables. Al final de la masterclass, los participantes ganarán una nueva confianza en su capacidad para escribir código JavaScript de alta calidad que resista el paso del tiempo.
Puntos Cubiertos:
1. Introducción a los Patrones de JavaScript2. Patrones Fundamentales3. Patrones de Creación de Objetos4. Patrones de Comportamiento5. Patrones Arquitectónicos6. Ejercicios Prácticos y Estudios de Caso
Cómo Ayudará a los Desarrolladores:
- Obtener una comprensión profunda de los patrones de JavaScript y sus aplicaciones en escenarios del mundo real- Aprender las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables- Mejorar las habilidades de resolución de problemas y la legibilidad del código- Mejorar la colaboración y la comunicación dentro de los equipos de desarrollo- Acelerar el crecimiento de la carrera y las oportunidades de avance en la industria del software
Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado
React Day Berlin 2022React Day Berlin 2022
86 min
Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado
Top Content
Workshop
Hussien Khayoon
Kahvi Patel
2 authors
Usar una biblioteca puede parecer fácil a primera vista, pero ¿cómo eliges la biblioteca correcta? ¿Cómo actualizas una existente? ¿Y cómo te abres camino a través de la documentación para encontrar lo que quieres?
En esta masterclass, discutiremos todos estos puntos finos mientras pasamos por un ejemplo general de construcción de un editor de código usando CodeMirror en React. Todo mientras compartimos algunas de las sutilezas que nuestro equipo aprendió sobre el uso de esta biblioteca y algunos problemas que encontramos.
Testing Web Applications Using Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
Top Content
Workshop
Gleb Bahmutov
Gleb Bahmutov
Esta masterclass te enseñará los conceptos básicos para escribir pruebas end-to-end útiles utilizando Cypress Test Runner.
Cubriremos la escritura de pruebas, cubriendo cada característica de la aplicación, estructurando pruebas, interceptando solicitudes de red y configurando los datos del backend.
Cualquiera que conozca el lenguaje de programación JavaScript y tenga NPM instalado podrá seguir adelante.
Desatando los Componentes del Servidor React: Una Inmersión Profunda en el Desarrollo Web de la Próxima Generación
React Day Berlin 2023React Day Berlin 2023
149 min
Desatando los Componentes del Servidor React: Una Inmersión Profunda en el Desarrollo Web de la Próxima Generación
Workshop
Maurice de Beijer
Maurice de Beijer
¡Prepárate para potenciar tus habilidades de desarrollo web con los Componentes del Servidor React! En esta inmersiva masterclass de 3 horas, desbloquearemos el potencial completo de esta tecnología revolucionaria y exploraremos cómo está transformando la forma en que los desarrolladores construyen aplicaciones web rápidas y eficientes.
Únete a nosotros mientras nos adentramos en el emocionante mundo de los Componentes del Servidor React, que combinan sin problemas el renderizado del lado del servidor con la interactividad del lado del cliente para un rendimiento y una experiencia de usuario inigualables. Obtendrás experiencia práctica a través de ejercicios prácticos, ejemplos del mundo real y orientación experta sobre cómo aprovechar el poder de los Componentes del Servidor en tus propios proyectos.
A lo largo de la masterclass, cubriremos temas esenciales, incluyendo:- Entender las diferencias entre los Componentes del Servidor y del Cliente- Implementar Componentes del Servidor para optimizar la obtención de datos y reducir el tamaño del paquete JavaScript- Integrar Componentes del Servidor y del Cliente para una experiencia de usuario fluida- Estrategias para pasar datos efectivamente entre componentes y gestionar el estado- Consejos y mejores prácticas para maximizar los beneficios de rendimiento de los Componentes del Servidor React
0 a Auth en una Hora Usando NodeJS SDK
Node Congress 2023Node Congress 2023
63 min
0 a Auth en una Hora Usando NodeJS SDK
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 de Node.JS + frontend de React) para autenticar usuarios con OAuth (inicio de sesión social) y contraseñas de un solo uso (correo electrónico), incluyendo:- Autenticación de usuario - Administrar interacciones de usuario, devolver JWT de sesión / actualización- Gestión y validación de sesiones - Almacenar la sesión para solicitudes de cliente posteriores, validar / actualizar sesiones
Al final del masterclass, también tocaremos otro enfoque para la autenticación de código utilizando Flujos 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.
Tabla de contenidos- Una breve introducción a los conceptos básicos de autenticación- Codificación- Por qué importa la autenticación sin contraseña
Requisitos previos- IDE de tu elección- Node 18 o superior
Búsqueda de texto completo basada en JavaScript con Orama en todas partes
Node Congress 2023Node Congress 2023
49 min
Búsqueda de texto completo basada en JavaScript con Orama en todas partes
Workshop
Michele Riva
Michele Riva
En este masterclass, veremos cómo adoptar Orama, un potente motor de búsqueda de texto completo escrito completamente en JavaScript, para hacer que la búsqueda esté disponible donde sea que se ejecute JavaScript. Aprenderemos cuándo, cómo y por qué sería una gran idea implementarlo en una función sin servidor, y cuándo sería mejor mantenerlo directamente en el navegador. Olvídate de las APIs, configuraciones complejas, etc.: Orama facilitará la integración de la búsqueda en proyectos de cualquier escala.