¿Para qué usar pruebas?!

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

En la charla explicaré los dolores y problemas de la validación de formularios. Luego explicaré el modelo mental de las pruebas unitarias y lo compararé con cómo pensamos en la validación de formularios.

Presentaré VEST con un poco de codificación en vivo mostrando su sintaxis de pruebas unitarias.

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

FAQ

VEST es un framework de validación de formularios que utiliza la sintaxis y el estilo de frameworks de pruebas unitarias como Unitest, Mocha o Jest. Está diseñado para abordar desafíos comunes en la validación de formularios, ofreciendo una estructura clara y facilitando el mantenimiento y las pruebas.

VEST aborda problemas como la falta de estructura en la colocación de validaciones, el código de validación entrelazado con la lógica de la aplicación, y la dificultad de realizar pruebas en formularios y validaciones, que suelen ser propensos a errores debido a su alta interacción con los usuarios.

A diferencia de las bibliotecas de validación básicas y de esquemas, VEST proporciona una aproximación más estructurada y extensible, permitiendo validaciones múltiples por campo, validaciones asíncronas, y la capacidad de manejar dependencias entre campos, todo esto sin estar atado a un framework específico.

Sí, una de las características destacadas de VEST es su soporte completo para TypeScript, lo que facilita la integración y mejora la experiencia de desarrollo al proporcionar validaciones de tipo en tiempo de compilación.

Para instalar VEST, puedes utilizar npm con el comando 'npm install vest'. Para más información, puedes visitar el sitio web de documentación en vestjs.dev, donde también encontrarás un enlace al servidor de Discord de la comunidad VEST.

Evyatar Alush
Evyatar Alush
11 min
03 Nov, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La charla de hoy presenta VEST, un marco de validación de formularios que combina la sintaxis y el estilo de Unitest con la validación de formularios. La falta de estructura en la validación de formularios es un problema importante que conduce a un código desordenado y difícil de mantener. La prueba de formularios y la validación de formularios pueden ser desafiantes, especialmente con lógica compleja. VEST ofrece una solución al permitir la creación de un conjunto de validación de formularios utilizando pruebas unitarias. Proporciona características como múltiples validaciones por campo, validaciones asíncronas y memorización, con soporte para cualquier entorno JavaScript y soporte completo de TypeScript.
Available in English: Using Tests for What?!

1. Introducción al Framework de Validación de Formularios

Short description:

Hoy vamos a hablar sobre un framework de validación de formularios que combina mi pasión por las herramientas y bibliotecas de código abierto con mi amor por Unitest. Toma la sintaxis y el estilo de Unitest y los introduce en el mundo de la validación de formularios.

Hola a todos, soy Evitar, soy un Ingeniero de Frontend en Meta, y una de mis pasiones es trabajar en herramientas y bibliotecas de código abierto y frameworks para que otros desarrolladores los utilicen, y hoy vamos a hablar sobre uno de ellos. Ahora este en particular es una combinación entre esa pasión y mi otra pasión, que es Unitest. Me gusta tanto Unitest que en realidad construí un framework de pruebas unitarias. Quiero decir, no realmente un framework, ya tenemos suficientes de esos, pero construí un framework de validación de formularios que toma la sintaxis y el estilo de Unitest y bibliotecas como Mocha o Jest y los introduce en el mundo de la validación de formularios.

2. Comprendiendo el Problema con la Validación de Formularios

Short description:

En el mundo de la validación de formularios, la falta de estructura es un problema importante. Al agregar formularios a nuestras características, a menudo no está claro dónde y cómo implementar la validación. Esto hace que el código de validación se entrelace con el código de la característica, lo que resulta en una base de código desordenada y difícil de mantener. Cuando realizamos cambios en la característica más adelante, tenemos que desmontar y volver a montar el código para adaptarlo a nuestras necesidades actuales.

Pero antes de hablar sobre VEST en sí, intentemos primero comprender cuál es el problema con la validación de formularios. Quiero decir, hemos estado haciendo formularios durante 20 años, ¿cuál es el problema? Y creo que hay tres problemas principales en el mundo de la validación de formularios, y todo comienza con la estructura, o más bien, la falta de ella. Cuando escribimos nuestra característica y agregamos los formularios, realmente no sabemos dónde y cómo colocar la validación del formulario. Quiero decir, sí, tenemos un controlador de cambios y debería salir de allí. Pero dentro de los formularios, generalmente no solo nos preocupamos por los datos, nos preocupamos por la característica y la experiencia del usuario. Y luego, gran parte del código de validación se entrelaza con el código de la característica. Y luego obtenemos un montón de código espagueti, realmente, que se trata tanto de la validación del formulario como de la experiencia del usuario. Y luego, cuando volvemos a mantener la característica, como meses después, y tratamos de agregar cosas o eliminar cosas o hacer cambios, como hacer que los campos dependan entre sí, tenemos que desmontar todo el código específico de la característica que escribimos y volver a montarlo de una manera adecuada a nuestras necesidades actuales.

3. Desafíos con la Prueba de Validación de Formularios

Short description:

Los formularios y la validación de formularios son difíciles de probar, especialmente cuando se trata de lógica de validación compleja. Esto lleva a que las áreas más propensas a errores de nuestras aplicaciones no sean probadas, lo cual es un problema.

Y otro problema es que los formularios y la validación de formularios son realmente difíciles de probar. Desafortunadamente, los formularios son las partes de nuestras aplicaciones con mayor interacción. Es donde las personas tocan, desplazan, escriben, básicamente hacen clic. Y también es de donde proviene el dinero. Y debido a que esta es la parte de nuestra aplicación con mayor interacción, también es la más propensa a errores. Desafortunadamente, es realmente, realmente difícil de probar. Quiero decir, todo lo que deseas hacer en términos de prueba de validación de formularios debe pasar por todos los flujos. Ya sea simulación de eventos de usuario o debes pasar por todos los datos. Y es realmente difícil de probar, especialmente si tienes alguna lógica de validación compleja por la cual no deseas pasar completamente. Y terminamos sin probar esas cosas, y eso es una pena.

4. Tipos de Validaciones de Formularios y Uso de Pruebas Unitarias

Short description:

Tipos de validaciones de formularios: comparadores funcionales, bibliotecas de validación de esquemas y bibliotecas de validación de estado de formulario o gestión de estado específicas del framework. Las pruebas unitarias se pueden utilizar en la validación de formularios mediante la creación de una suite de validación de formularios.

Pero, ¿qué tipos de validaciones de formularios existen? Quiero decir, esa no puede ser la primera biblioteca de validación de formularios. Quiero decir, todos hemos utilizado bibliotecas de validación de formularios, tanto en el cliente como en el servidor. Así que intentaré dar una breve descripción de lo que hay, y luego entenderemos cómo VEST es diferente.

Y primero tenemos los comparadores funcionales, como funciones básicas como isEmail, isNumber, más largo que, que básicamente nos dan una respuesta booleana si algún valor cumple con ciertos criterios. Y esto es realmente simple y también es muy útil. Pero no se preocupa mucho por la estructura, no nos ayuda con el mantenimiento, y tampoco con las pruebas. Y esto es muy útil, pero no es una solución completa para la validación de formularios.

En segundo lugar, tenemos las bibliotecas de validación de esquemas que dan un paso más allá de lo que acabamos de describir. Toman la forma de los datos, la estructura de los datos y la forma de los datos en su totalidad debe cumplir con ciertos criterios. Y esto es bueno principalmente para el nivel de la API. Pero cuando se trata del cliente, no tanto. Quiero decir, ¿qué haces cuando el usuario interactúa con un formulario, como escribir en el campo de nombre de usuario? ¿Validas todo el conjunto, todo el esquema? Y también es muy difícil describir ideas complejas, como campos que dependen entre sí, dentro de un esquema. Así que es muy útil, pero no necesariamente de la forma en que queremos que sea.

Y en tercer lugar, tenemos en el cliente bibliotecas de validación de estado de formulario o gestión de estado específicas del framework que son específicas del framework y te proporcionan componentes o controladores de eventos o directivas para usar en tu aplicación. Y lo que hace básicamente es quitarte un poco de control, pero te brinda toda la gestión de estado del formulario y toda la validación de formularios para el formulario, y luego estás listo y es bueno. Pero el problema es que es específico del framework, específico del framework de interfaz de usuario, por lo que no podemos compartir fácilmente entre el cliente y el servidor, o entre Angular o React o Vue, y la mayoría de nosotros tenemos al menos algunas aplicaciones o algunos tipos diferentes de nuestras aplicaciones. Y también, porque te quitan el control, ponen sus cosas dentro de tu aplicación, es muy difícil recuperar ese control cuando necesitas evitar algún comportamiento. Es bueno, pero no necesariamente, nuevamente, de la forma en que queremos que sea.

¿Y cómo encajan las pruebas unitarias? Esto es Test.js. Hace un par de años, como hace seis años, comencé a escribir pruebas unitarias como parte de mi trabajo, y me di cuenta de esto. Cuando escribimos una prueba unitaria, tenemos nuestra suite de pruebas unitarias. Que generalmente comienza con un describe, no tiene que ser así, pero comienza con alguna suite de nivel superior que describe la idea de lo que estamos probando nuestra función o aplicación o lo que sea. Dentro de ella, tenemos una serie de pruebas que básicamente describen qué afirmación estamos haciendo ahora y cuál es el error que mostraremos en caso de fallo. Luego tenemos nuestra afirmación, por ejemplo, expect y lo que esperamos que sea. ¿Y si pudiéramos usar esa misma idea dentro del mundo de la validación de formularios? Quiero decir, es prácticamente lo mismo. Cuando escribimos un formulario, tenemos nuestro concepto más alto de un formulario que queremos describir. Dentro de él, tenemos los diferentes campos, un conjunto de campos que queremos probar, y luego solo queremos hacer una afirmación. Ahora, en lugar de afirmar el comportamiento, queremos afirmar los datos. Jugué con esta idea específica, y esto es lo que se me ocurrió. Primero, creamos nuestra suite de validación de formularios.

5. Descripción general de la validación de formularios VEST

Short description:

En VEST, describes el formulario que estás validando y agregas una serie de pruebas. Cada prueba incluye el nombre del campo, un mensaje de error de validación y una afirmación utilizando la biblioteca Enforce. VEST admite múltiples validaciones por campo, incluidas validaciones asíncronas complejas. Puedes omitir las solicitudes al servidor para validaciones fallidas y memorizar los datos validados previamente. VEST ofrece muchas características, funciona con cualquier entorno JavaScript y tiene soporte completo de TypeScript.

Esto es ligeramente similar a una suite de pruebas unitarias. Describes, opcionalmente, el nombre del formulario que estás validando, y también pasas los datos del formulario con los que el usuario acaba de interactuar. Dentro de él, agregas, obviamente, una serie de pruebas. Tienes una prueba que es muy similar a una prueba de pruebas unitarias, solo que agrega un campo adicional que es el nombre del campo que estás validando, así que en este ejemplo, Nombre de usuario. Luego, pasas el mensaje que el usuario vería en caso de una validación fallida, tanto para descripción dentro del código, como para que el usuario lo vea. Luego, lo que tienes es básicamente una afirmación, y en lugar de usar Expect, que no es realmente bueno para producción, estoy usando Enforce que escribí, que es mucho más adecuado para la validación de formularios, tanto en términos de lo que hace como de cómo se comporta. Así que tienes Enforce, pasas cualquier dato que desees. En este caso, pasamos los datos del formulario, y luego agregamos nuestra afirmación, por ejemplo, NoEstáEnBlanco. Ahora, obviamente, la validación de formularios no es tan simple, y podemos agregar múltiples validaciones por campo. Podemos agregar tantas como queramos, e incluso podemos agregar más, incluso validaciones complejas, por ejemplo, validaciones asíncronas, en caso de que, por ejemplo, los nombres de usuario ya estén en uso en un servidor. Y al igual que en Jest y Mocha, pasar una función asíncrona hace que la prueba sea asíncrona. ¿Y qué pasa si, bueno, no queremos ir al servidor, en caso de que la validación ya esté fallando para el campo desde el principio, como cuando el nombre de usuario ya está fallando porque es demasiado corto? Bueno, podemos decirle que lo omita cuando tengamos errores para el campo de nombre de usuario. ¿Y qué pasa si aún no queremos que el usuario vuelva una y otra vez por el mismo nombre de usuario, incluso si es válido localmente? Entonces, bueno, podemos memorizarlo y decir, bueno, si el nombre de usuario vuelve a escribir el mismo nombre de usuario nuevamente, pues no vayas al servidor nuevamente. Y esto es solo la punta del iceberg en términos de lo que VEST puede hacer. Tiene muchas características, muchas capacidades y responde a todos los problemas que normalmente tenemos en la validación de formularios. Ahora, una de las características interesantes es que VEST funciona con cualquier cosa en JavaScript, básicamente. Si usas un framework o sin un framework o en un servidor o en cualquier lugar, realmente puedes usar VEST. Y una característica destacada de VEST es el soporte completo de TypeScript. Puedes validar cambios al interactuar. Puedes tener múltiples validaciones por campo individual. Tienes validación de advertencia. Por ejemplo, la fortaleza de la contraseña, que no solo falla el envío, sino que simplemente le dice al usuario: `Oye, aquí hay un problema`, y pone la validación en una categoría diferente. Podemos tener campos que dependen entre sí, como la confirmación y la contraseña. Tenemos validaciones asíncronas y tenemos memorización. Podemos agrupar pruebas, como en Nest para Describir. Podemos componer reglas de validación. Podemos extender VEST para agregar más aplicaciones personalizadas. Todo está estructurado y no depende de un framework. Puedes instalar VEST muy fácilmente, npm install vest. Trae algunas dependencias que son específicas de VEST, todas fueron escritas para VEST, por lo que no trae nada de terceros. Hay un sitio web de documentación, vestjs.dev. También hay un enlace al servidor de Discord allí, y si quieres echarle un vistazo, puedes probar todo esto. Muchas gracias. Y estoy muy emocionado de verte formar parte de la comunidad de VEST. 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.
Solicitudes de Red con Cypress
TestJS Summit 2021TestJS Summit 2021
33 min
Solicitudes de Red con Cypress
Top Content
Cecilia Martinez, a technical account manager at Cypress, discusses network requests in Cypress and demonstrates commands like cydot request and SCI.INTERCEPT. She also explains dynamic matching and aliasing, network stubbing, and the pros and cons of using real server responses versus stubbing. The talk covers logging request responses, testing front-end and backend API, handling list length and DOM traversal, lazy loading, and provides resources for beginners to learn Cypress.
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.

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
Diseñando Pruebas Efectivas con la Biblioteca de Pruebas de React
React Summit 2023React Summit 2023
151 min
Diseñando Pruebas Efectivas con la Biblioteca de Pruebas de React
Top Content
Featured Workshop
Josh Justice
Josh Justice
La Biblioteca de Pruebas de React es un gran marco para las pruebas de componentes de React porque responde muchas preguntas por ti, por lo que no necesitas preocuparte por esas preguntas. Pero eso no significa que las pruebas sean fáciles. Todavía hay muchas preguntas que tienes que resolver por ti mismo: ¿Cuántas pruebas de componentes debes escribir vs pruebas de extremo a extremo o pruebas de unidad de nivel inferior? ¿Cómo puedes probar una cierta línea de código que es difícil de probar? ¿Y qué se supone que debes hacer con esa persistente advertencia de act()?
En esta masterclass de tres horas, presentaremos la Biblioteca de Pruebas de React junto con un modelo mental de cómo pensar en el diseño de tus pruebas de componentes. Este modelo mental te ayudará a ver cómo probar cada bit de lógica, si debes o no simular dependencias, y ayudará a mejorar el diseño de tus componentes. Te irás con las herramientas, técnicas y principios que necesitas para implementar pruebas de componentes de bajo costo y alto valor.
Tabla de contenidos- Los diferentes tipos de pruebas de aplicaciones de React, y dónde encajan las pruebas de componentes- Un modelo mental para pensar en las entradas y salidas de los componentes que pruebas- Opciones para seleccionar elementos DOM para verificar e interactuar con ellos- El valor de los mocks y por qué no deben evitarse- Los desafíos con la asincronía en las pruebas de RTL y cómo manejarlos
Requisitos previos- Familiaridad con la construcción de aplicaciones con React- Experiencia básica escribiendo pruebas automatizadas con Jest u otro marco de pruebas unitarias- No necesitas ninguna experiencia con la Biblioteca de Pruebas de React- Configuración de la máquina: Node LTS, Yarn
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.
Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native
React Summit 2022React Summit 2022
117 min
Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native
Top Content
Workshop
Yevheniia Hlovatska
Yevheniia Hlovatska
A diferencia de las pruebas unitarias, las pruebas de extremo a extremo buscan interactuar con su aplicación tal como lo haría un usuario real. Y como todos sabemos, puede ser bastante desafiante. Especialmente cuando hablamos de aplicaciones móviles.
Las pruebas dependen de muchas condiciones y se consideran lentas e inestables. Por otro lado, las pruebas de extremo a extremo pueden dar la mayor confianza de que su aplicación está funcionando. Y si se hace correctamente, puede convertirse en una herramienta increíble para aumentar la velocidad del desarrollador.
Detox es un marco de pruebas de extremo a extremo en caja gris para aplicaciones móviles. Desarrollado por Wix para resolver el problema de la lentitud e inestabilidad y utilizado por React Native en sí como su herramienta de pruebas E2E.
Únete a mí en esta masterclass para aprender cómo hacer que tus pruebas de extremo a extremo móviles con Detox sean excelentes.
Prerrequisitos- iOS/Android: MacOS Catalina o más reciente- Solo Android: Linux- Instalar antes de la masterclass
Masterclass de Pruebas de API con Postman
TestJS Summit 2023TestJS Summit 2023
48 min
Masterclass de Pruebas de API con Postman
Top Content
WorkshopFree
Pooja Mistry
Pooja Mistry
En el panorama siempre en evolución del desarrollo de software, garantizar la fiabilidad y funcionalidad de las API se ha vuelto primordial. "Pruebas de API con Postman" es una masterclass completa diseñada para equipar a los participantes con los conocimientos y habilidades necesarios para sobresalir en las pruebas de API utilizando Postman, una herramienta poderosa ampliamente adoptada por profesionales en el campo. Esta masterclass profundiza en los fundamentos de las pruebas de API, avanza a técnicas de prueba avanzadas y explora la automatización, las pruebas de rendimiento y el soporte multiprotocolo, proporcionando a los asistentes una comprensión holística de las pruebas de API con Postman.
Únete a nosotros para esta masterclass para desbloquear todo el potencial de Postman para las pruebas de API, agilizar tus procesos de prueba y mejorar la calidad y fiabilidad de tu software. Ya seas un principiante o un probador experimentado, esta masterclass te equipará con las habilidades necesarias para sobresalir en las pruebas de API con Postman.
Monitoreo 101 para Desarrolladores de React
React Summit US 2023React Summit US 2023
107 min
Monitoreo 101 para Desarrolladores de React
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend.
Nivel de la masterclass: Intermedio