Validaciones de Formularios en Vue con Vest

Rate this content
Bookmark

Los formularios en la web siempre han estado con nosotros, pero aún parece que siempre tienes que luchar con ellos para que la validación funcione como lo planeaste, e incluso con las mejoras significativas que nos brindan las bibliotecas y frameworks modernos, el mantenimiento sigue siendo en su mayoría una molestia.

Vest es una nueva generación de framework de validación de formularios. Toma su sintaxis y estilo de los frameworks de pruebas unitarias como Mocha o Jest (de ahí el nombre), lo que aporta la elegancia y la naturaleza declarativa de estos frameworks al mundo de la validación de formularios, reduciendo en gran medida la sobrecarga necesaria para escribir, mantener y reutilizar validaciones en tus aplicaciones JS.

21 min
20 Oct, 2021

Video Summary and Transcription

VEST es un framework de validación de formularios inspirado en las bibliotecas de pruebas unitarias. Proporciona un enfoque estructurado para la validación de formularios, facilitando el mantenimiento y la reutilización. VEST admite múltiples validaciones por campo, validaciones de advertencia, validación de campos interdependientes, validaciones asíncronas y memoización. Es ligero y se puede integrar con varios frameworks y bibliotecas. El orador está abierto a la colaboración y contribuciones para agregar una interfaz reactiva utilizando el modelo de reactividad de VUE.

Available in English

1. Introducción a VEST y la motivación detrás de él

Short description:

Soy Aviatar, un ingeniero de front-end en Facebook y el autor de VEST, un marco de validación de formularios inspirado en bibliotecas de pruebas unitarias. Hoy les mostraré cómo VEST puede mejorar las validaciones de formularios en aplicaciones Vue. Antes de sumergirnos en VEST, permítanme explicar la motivación detrás de él. Anteriormente, luché con la falta de estructura al agregar validaciones a los formularios. Esto dificultaba el mantenimiento y la reutilización. Inspirado en las pruebas unitarias, desarrollé una estructura para la validación de formularios que permite una fácil descripción del comportamiento deseado y flexibilidad para diferentes características. Vamos a explorar esta estructura con un ejemplo que valida el campo de nombre de usuario.

¡Hola! Soy Aviatar. Soy un ingeniero de front-end en Facebook y soy el autor de VEST. VEST es un marco de validación de formularios inspirado en bibliotecas de pruebas unitarias como Mocha o Jest. Así que si has hecho aunque sea un poco de pruebas unitarias en tu carrera, creo que te sentirás como en casa trabajando con VEST.

Hoy quiero mostrarte cómo podemos usar VEST para mejorar la forma en que escribimos validaciones de formularios en nuestras aplicaciones Vue. Pero antes de comenzar a hablar sobre VEST en sí, quiero mencionar un poco la motivación detrás de VEST y lo que me llevó a escribir VEST en primer lugar.

En mi experiencia escribiendo formularios y construyendo formularios antes de usar VEST, tuve un gran problema de falta de estructura. Estaba tratando de agregar validaciones al formulario y no estaba seguro de dónde debía colocar la lógica de validación. ¿Debería ponerlas dentro de los controladores de cambio? ¿Debería ponerlas en algún lugar de mi función en una biblioteca compartida? ¿Cómo lo escribo? ¿Cómo evito que sea demasiado específico para mi función? Y no hay una estructura específica que las validaciones deban seguir.

Así que terminé haciéndolo funcionar escribiéndolo en algún lugar entre mis controladores y mi función. Pero luego, cuando quería hacer cambios y mantener la función, como agregar más campos en la función o hacer que los campos dependan entre sí o incluso eliminar un campo, era muy, muy difícil porque todo estaba vinculado a la función. Y debido a que todo es muy específico de la función, también era muy difícil aprovecharlo nuevamente. Por ejemplo, tomarlo y usarlo en un formulario diferente o en una función diferente, como el campo de contraseña en restablecer contraseña e iniciar sesión.

Todo esto me llevó a pensar en una solución. Y hace un par de años, cuando trabajaba con un empleador anterior, acabábamos de comenzar a escribir pruebas unitarias para nuestras aplicaciones. Y vi que los patrones que tienen las pruebas unitarias, que tenemos esa suite de pruebas con descripciones y expectativas. Y se parecía mucho a la forma en que estaba pensando en la validación de formularios en mi mente. Porque las pruebas unitarias son declarativas por naturaleza, por lo que puedes describir exactamente lo que quieres que suceda. Y junto con eso, son muy buenos para expresar lo que hay en comparación con cómo debería ser. Entonces pones una función en una prueba, y lo mismo ocurre con la validación de formularios.

Entonces quiero que mis valores, mis datos, pasen por algunas pruebas. Y todo parece muy relevante para el mundo de la validación de formularios. Por supuesto, no es exactamente lo mismo, y la terminología es diferente, y no ejecutamos pruebas unitarias en producción. Pero con algunos ajustes de diseño, pude llegar a algo que todavía es muy similar a la forma en que escribimos pruebas unitarias y sigue siendo muy relevante para la validación de formularios. Y la estructura que se me ocurrió es esta. Primero creamos una suite separada del código de nuestra función y agregamos un callback a ella. Dentro del callback, agregamos nuestras pruebas, similares a las pruebas de pruebas unitarias, con un campo adicional o un parámetro adicional, que es el nombre del campo que estamos validando. Entonces, en este caso, tenemos una prueba y estamos probando el nombre de usuario. Y luego tenemos el error que el usuario recibirá en caso de un fallo de validación. El nombre de usuario debe tener al menos tres caracteres.

2. Using VEST with a Real Live Vue App

Short description:

Dentro del callback de esa prueba, tenemos nuestras afirmaciones. Quiero mostrarte cómo funciona con una aplicación Vue en vivo real. Esta es nuestra aplicación, una aplicación básica sin ninguna validación todavía. Agregué componentes de entrada para el estilo, nombres de clase para error, advertencia y éxito, props para errores y advertencias, un spinner de carga y una función de validación vacía. Creemos nuestra suite e importemos create de VEST.

Y dentro del callback de esa prueba, tenemos nuestras afirmaciones. Así como assert o expect, hacemos cumplir que data.username sea más largo que dos, o cualquier validation que tengamos allí. Y quiero mostrarte cómo funciona con una aplicación Vue en vivo real.

Solo ten en cuenta que aquí estoy usando la API de opciones, pero también podría funcionar con la API de composición sin ningún cambio en el código de VEST.

Entonces esta es nuestra aplicación. Es una aplicación muy básica sin ninguna validación todavía. Agregué algunos componentes de entrada que están allí solo para el estilo. Agregué algunos nombres de clase. Agregué un nombre de clase para error. Lo convierte en rojo. Permíteme refrescar. Ok, se vuelve rojo. Agregué un nombre de clase para advertencia. Eso lo vuelve naranja y uno para éxito. Eso lo vuelve verde. Junto con eso, también agregué algunas props. Una para errores. Toma una matriz de cadenas. Y cuando se muestra, muestra el error en el campo. Lo mismo para las advertencias. También agregué un spinner de carga porque más adelante vamos a hacer algunas validaciones asíncronas. Entonces, loading es verdadero. Y vamos a ver un spinner. Eso es todo lo que tenemos aquí. También tenemos la función de validación, que está vacía. Toma el nombre y el valor del campo que estamos validando. Y creemos nuestra suite. Fuente. Y vamos a importar create de VEST.

3. Using VEST for Form Validation

Short description:

Crearé una suite usando la función create y la almacenaré en la constante 'suite'. Luego, importaré esta suite en mi formulario y la usaré dentro de la función validate. El resultado de la validación se almacenará en la variable 'res' y se actualizará cada vez que haya un cambio en la función validate. Ahora, escribamos nuestra primera prueba para el campo de nombre de usuario, verificando que sea obligatorio. También escribiremos pruebas para el campo de contraseña, especificando los requisitos de longitud mínima. Cuando actualicemos y comencemos a escribir, veremos los mensajes de validación para ambos campos.

Y haré const suite equals create. Y exportaré por defecto esa suite. Entonces, exportar por defecto suite. Ahora importaré esta suite en mi formulario. Entonces, importar suite desde suite. Y la usaré dentro de mi función validate. Entonces, suite, y la llamaré. Ahora almacenaré el resultado de la validación en nuestro data. Entonces, res equals suite.get. Y también lo actualizaré cada vez que haya un cambio en la función validate. Entonces, this.res equals el resultado de suite. Y tomaré el valor y el nombre y también pasaré el this.input. Entonces, pasemos todo. Y el nombre del campo que estamos validando.

Volviendo a la suite, escribamos nuestra primera prueba. Entonces, primero tomemos el data, que está vacío en este momento. Y tomemos test y enforce. Ahora escribir la primera prueba es muy simple. Probemos que el nombre de usuario y digamos que si falla, el usuario dirá que el nombre de usuario es obligatorio. Y luego hacer cumplir que data.username no esté vacío. Si vuelvo al formulario y ya tengo esto aquí, solo iré al campo de entrada y haré errores equals y luego res.getErrors o el campo username. Y si comienzo a escribir y luego elimino todo, veré que se requiere el nombre de usuario. Que es lo que escribimos.

Dupliquemos esto también para la contraseña y continuemos escribiendo el resto de nuestras pruebas. Así que otro para el nombre de usuario y podemos tener múltiples pruebas para el mismo campo y no tienen que estar en la misma función, lo que facilita mucho entender qué está pasando. Entonces, el nombre de usuario debe tener al menos tres caracteres más largo que dos. Hagamos lo mismo para la contraseña. Y digamos que la contraseña debe tener al menos cinco caracteres. Entonces, más largo que o igual a cinco. Y ahora, si actualizo y comienzo a escribir, veremos que obtenemos el mensaje de validación para el nombre de usuario y también para la contraseña.

4. Improving Validation and Styling

Short description:

El campo de contraseña se ilumina cada vez que escribo dentro del campo de nombre de usuario, pero queremos que solo se ilumine para sí mismo. Podemos lograr esto utilizando la función 'only' para especificar los campos que queremos validar. Además, podemos usar la utilidad 'class names' para dar estilo a nuestra aplicación según el estado de validación. Por ejemplo, podemos establecer los nombres de clase como 'success' para entradas válidas, 'error' para entradas inválidas y 'warning' para entradas con advertencias. Esto nos permite proporcionar retroalimentación visual al usuario. También podemos usar la función 'warn' para manejar validaciones de advertencia, como notificar al usuario sobre contraseñas débiles sin bloquear el envío del formulario.

Ahora, si te has dado cuenta, el campo de contraseña se ilumina cada vez que escribo dentro del campo de nombre de usuario, lo cual no es el resultado esperado. En realidad, queremos que solo se ilumine para sí mismo. Y esto es realmente fácil. Simplemente importemos 'only' y 'only' nos permite especificar los campos que queremos validar en cualquier momento dado. Así que ejecutemos 'only'. Y recuerda, estamos pasando el nombre del campo que estamos validando a la suite. Podemos tomarlo aquí, campo actual, y pasarlo a 'only'. Y ahora, cada vez que escriba dentro de cualquiera de los campos, solo se iluminará. Ahora agreguemos algo de color. VEST no es un marco de interfaz de usuario, pero proporciona algunas utilidades de interfaz de usuario para que puedas dar estilo a tu aplicación. Importemos 'class names' de 'vest class names'. Y lo que hace la utilidad 'class names' es darte la capacidad de especificar qué nombres de clase deben aparecer en qué estado de validación. Así que haré un valor computado y usaré... Y devolveré 'class names' y le pasaré el resultado de la validación. Y también las clases que quiero que aparezcan en cualquier etapa. Entonces, si es válido, quiero que sea 'success'. Y si es inválido, quiero que sea 'error'. Y si es una advertencia, quiero que sea 'warning'. Así que ahora puedo tomar los nombres de clase y ponerlos en la clase. Entonces, class equals CN, esa es nuestra propiedad, con el campo de nombre de usuario. Y si comienzo a escribir, veremos que se vuelve rojo y luego verde. Hagamos lo mismo para la contraseña. Y esto está sucediendo de la misma manera. ¿Qué pasa si queremos algunos campos de advertencia? Por ejemplo, la fortaleza de la contraseña no debería bloquear el envío del formulario, pero debería notificar al usuario que hay un problema. Hagámoslo. Tenemos la función de validaciones de advertencia. Solo tenemos que llamar a la función 'warn' de VEST. Así que probemos la contraseña. Y digamos que es débil, que no tiene números. La contraseña es débil.

5. Using VEST for Advanced Validations

Short description:

Quizás agreguemos un número y hagamos Coincidencias, que toma una expresión regular. Y hagámoslo, tiene del 0 al 9. Y ahora, todo lo que tengo que hacer es agregar 'warn' a eso, lo cual indica que este es un campo de advertencia. A veces también queremos tener validaciones asíncronas. Por ejemplo, si el nombre de usuario ya está en uso, queremos verificar eso en lugar de permitir que el usuario envíe el formulario y solo luego informarle. Tengamos una función simulada que implemente la lógica de si el usuario existe. Y todo lo que tenemos que hacer ahora es escribir una prueba que devuelva si el usuario existe. Ahora, si comienzo a escribir aquí, algún usuario, notarás que no sucede nada. Y esto se debe a que VEST necesita informar al formulario que se completó la validación. Entonces, todo lo que tenemos que hacer y tal vez primero agreguemos un spinner. Para que sepamos qué está sucediendo, agreguemos una nueva propiedad de datos. Entonces, 'username loading' es igual a falso. Este es el valor predeterminado. Y ahora hagamos esto, si el campo que estamos validando es el nombre de usuario, hagamos que 'this.username is loading' sea igual a verdadero.

Quizás agreguemos un número y hagamos Coincidencias, que toma una expresión regular. Y hagámoslo, tiene del 0 al 9. Y ahora, todo lo que tengo que hacer es agregar 'warn' a eso, lo cual indica que este es un campo de advertencia. Y a medida que escribo, verás que después de cinco caracteres, se vuelve naranja, pero no estamos viendo el mensaje de validation. Y esto se debe a que solo estamos tomando los errores de validation. Así que tenemos que duplicar esto y decir 'Get Warnings'.

Y si comienzo a escribir ahora, la contraseña es débil. Quizás agreguemos un número. Genial. A veces también queremos tener validaciones asíncronas. Por ejemplo, si el nombre de usuario ya está en uso, queremos verificar eso en lugar de permitir que el usuario envíe el formulario y solo luego informarle. Y todo lo que tenemos que hacer en VEST es simplemente devolver una promesa o una prueba asíncrona dentro de nuestra suite.

Así que simplemente lo haré. Tengamos una función simulada que implemente la lógica de si el usuario existe. Entonces, función asíncrona 'does user exist'. Toma un nombre de usuario. Y si el nombre de usuario es igual a 'some user', deberíamos lanzar un error, lanzar un nuevo error. Y también hagámoslo esperar un segundo, obtendré el paquete 'wait'. Así que espera, espera un segundo. Y todo lo que tengo que hacer ahora es escribir una prueba que devuelva si el usuario existe. Entonces, prueba 'username', 'username already taken'. Y solo necesito devolver 'does user exist' y llamarlo con 'data.username'. Ahora, si comienzo a escribir aquí, algún usuario, notarás que no sucede nada. Y esto se debe a que VEST necesita informar al formulario que se completó la validation. Y aquí está esperando un segundo. Así que todo lo que tenemos que hacer y tal vez primero agreguemos un spinner. Para que sepamos qué está sucediendo, agreguemos una nueva propiedad de datos. Entonces, 'username loading' es igual a falso. Este es el valor predeterminado. Y ahora hagamos esto, si el campo que estamos validando es el nombre de usuario, hagamos que 'this.username is loading' sea igual a verdadero.

6. Using VEST for Async Validation

Short description:

Para cancelar el spinner de carga cuando se completa la validación, usa la función 'done' para obtener el resultado de la validación. Establece 'username loading' en falso para cancelar el spinner. La validación asíncrona se puede implementar usando 'sweet.get' para obtener el resultado de validación actual. Eso es todo lo que necesitas hacer para la validación asíncrona.

Y ahora, solo para hacer que funcione, hagamos que 'loading' sea igual a 'his name is loading'. Así que solo para ver, tenemos el spinner, y ahora necesitamos cancelarlo cuando se complete la validation. Entonces, hagamos que comience 'done', abramos 'this.res.done', 'done' es una función que nos da una devolución de llamada cuando se completa la validation. Y todo lo que tenemos que hacer es 'this.res' igual a 'sweet.get' nos da el resultado de validation actual. Y también cancelamos 'username is loading'. Entonces, establecemos 'username loading' en falso. Ahora, si escribo 'some user', se supone que debemos obtener 'username already taken'. Y eso es todo. Eso es todo lo que tienes que hacer para la validation asíncrona.

7. Improving Async Validations

Short description:

Pero por supuesto, se puede mejorar. Podemos indicarle a VEST que omita una validación cuando ya está fallando. Al usar la función 'skip when' y especificar los criterios, como el resultado de validación que tiene errores para el campo de nombre de usuario, podemos evitar validaciones asíncronas innecesarias. Esto asegura que la validación solo se active cuando sea necesario, mejorando el rendimiento.

Pero por supuesto, se puede mejorar. Porque si te fijas, verás que comienzo a escribir. Aunque la validation está fallando para la validation más corta, por ejemplo, debe tener al menos tres caracteres, todavía estamos mostrando el spinner, lo que significa que todavía estamos consultando al servidor, lo cual no es una gran idea, porque podría ser una validación asíncrona muy costosa. Y para evitar eso, simplemente podemos decirle a VEST que omita una validation según ciertos criterios. En este caso, siempre que la validation esté fallando desde el principio. Entonces, en nuestro caso, usemos 'skip when'. Y nos permite indicar cuándo queremos omitir algo y tomamos un salto cuando y nuestro criterio es sweet dot GET, que nos da el resultado de validation tiene errores para el nombre de usuario. Entonces, cada vez que el nombre de usuario esté fallando, no ejecutes lo que está dentro de esa devolución de llamada. Y si hago esto, OK, intentemos escribir algo. E, A, sin spinner, L, hay un spinner, por lo que no estamos validando la validation asíncrona antes de que esté lista.

8. Manejo de Validaciones Costosas con Memoization

Short description:

Ahora hagamos nuevamente una prueba de usuario y está correcta, pero ahora estoy agregando otro carácter y fuimos al servidor y ahora es válida y lo eliminaré. Y fuimos al servidor nuevamente, a pesar de que sabemos que la validación ya está fallando porque ya la hemos visto fallar para el mismo usuario. Nuevamente, podría ser una validación costosa y podemos manejarla con memoization dentro de VEST. Y todo lo que tenemos que hacer es tomar nuestra prueba y hacer test.memo y luego simplemente agregar nuestras dependencias. Entonces, en nuestro caso, queremos memoizarlo por el nombre de usuario, así que data.username. Mientras el nombre de usuario no cambie o mientras se repita el nombre de usuario, la validación nos dará inmediatamente la misma respuesta sin ir al servidor. Y este es el ejemplo. Entonces, algún usuario, vamos al servidor, agrego un carácter y si lo elimino, verás que obtenemos una respuesta inmediata. Y ahora verás que el formulario es válido, todo está bien, solo quiero agregar una cosa más. Quiero deshabilitar el envío antes de que el formulario esté completamente válido. Y esto es fácil de hacer, todo lo que tenemos que hacer es ir a nuestra plantilla nuevamente y luego agregar disable a nuestro botón de envío y decir que queremos deshabilitarlo cuando res no sea válido, es decir, no res es válido. Y déjame ver, oh, deshabilitado, okay. Y ahora está deshabilitado, y si escribo algo, algún usuario uno, perfecto, y contraseña, ejemplo uno, y solo nota que la advertencia no evita el envío del formulario, una advertencia no calificada como inválida, que es justo lo que buscamos. Y así, en solo, creo, seis líneas de lógica dentro de Vue, pudimos validar este formulario completamente con muchas, muchas validaciones complejas, lo cual es bastante impresionante, creo.

Ahora hagamos nuevamente una prueba de usuario y está correcta, pero ahora estoy agregando otro carácter y fuimos al servidor y ahora es válida y lo eliminaré. Y fuimos al servidor nuevamente, a pesar de que sabemos que la validación ya está fallando porque ya la hemos visto fallar para el mismo usuario. Nuevamente, podría ser una validación costosa y podemos manejarla con memoization dentro de VEST. Y todo lo que tenemos que hacer es tomar nuestra prueba y hacer test.memo y luego simplemente agregar nuestras dependencias. Entonces, en nuestro caso, queremos memoizarlo por el nombre de usuario, así que data.username. Mientras el nombre de usuario no cambie o mientras se repita el nombre de usuario, la validación nos dará inmediatamente la misma respuesta sin ir al servidor. Y este es el ejemplo. Entonces, algún usuario, vamos al servidor, agrego un carácter y si lo elimino, verás que obtenemos una respuesta inmediata. Y ahora verás que el formulario es válido, todo está bien, solo quiero agregar una cosa más. Quiero deshabilitar el envío antes de que el formulario esté completamente válido. Y esto es fácil de hacer, todo lo que tenemos que hacer es ir a nuestra plantilla nuevamente y luego agregar disable a nuestro botón de envío y decir que queremos deshabilitarlo cuando res no sea válido, es decir, no res es válido. Y déjame ver, oh, deshabilitado, okay. Y ahora está deshabilitado, y si escribo algo, algún usuario uno, perfecto, y contraseña, ejemplo uno, y solo nota que la advertencia no evita el envío del formulario, una advertencia no calificada como inválida, que es justo lo que buscamos. Y así, en solo, creo, seis líneas de lógica dentro de Vue, pudimos validar este formulario completamente con muchas, muchas validaciones complejas, lo cual es bastante impresionante, creo.

9. Características y Beneficios de VEST

Short description:

VEST tiene varias características, incluyendo validación de campos cambiados al interactuar, múltiples validaciones por campo, validaciones de advertencia, validación de campos interdependientes, validaciones asíncronas, memoization y validaciones estructuradas. A pesar de su complejidad, VEST es ligero, con menos de seis kilobytes cuando se comprime, lo que lo convierte en uno de los marcos de validación más pequeños pero más poderosos disponibles.

Y hemos visto algunas de las características que tiene Vest, pero no todas. Hay algunas más, y hay validación de campos cambiados al interactuar, lo cual ya hemos hecho. Múltiples validaciones por campo, validaciones de advertencia. Podemos tener validación de campos interdependientes, por lo que podemos tener pruebas que dependen una de otra. Tenemos validaciones asíncronas y también podemos memoizarlas. Podemos agrupar pruebas y anidar pruebas dentro de grupos, por ejemplo, cuando tenemos un formulario de varios pasos. En general, tenemos validaciones estructuradas. Estas son algunas de las características de VEST, pero no todas. Incluso con todas esas características y toda esta complejidad, VEST sigue siendo menor de seis kilobytes cuando se comprime. Creo que esto hace de VEST uno de los marcos de validación más pequeños pero más poderosos que existen.

QnA

Excitación, Preguntas e Integración

Short description:

Estoy realmente emocionado trabajando con VEST. Disfruto escribiendo validaciones de formularios con VEST. Si estás emocionado acerca de VEST hoy, no dudes en contactarme en Twitter, o incluso ir a la página de GitHub, o incluso enviar un PR, mejorando la documentación para Vue, o incluso mejorando y agregando algo de código. Muchas gracias por acompañarme hoy. Pasemos a algunas preguntas. Primera pregunta, ¿cómo maneja la API la lógica de validación asíncrona? Por ejemplo, si la validación depende de alguna otra API asíncrona como solicitudes HTTP. Simplemente pasas una función asíncrona o devuelves una promesa. Si esa función es rechazada o arroja un error, entonces la validación falla. Siguiente pregunta, ¿VEST admite la validación de esquemas JSON o tiene integración con validadores de esquemas JSON, como AJV? VEST no es una biblioteca de validación de esquemas, pero se integra con cualquier cosa. Enforce, la función de afirmación dentro de VEST, tiene funciones de validación de esquemas muy extensas.

Estoy realmente emocionado trabajando con VEST. Disfruto escribiendo validaciones de formularios con VEST. Agradezco que te hayas unido hoy. Si estás emocionado acerca de VEST hoy, no dudes en contactarme en Twitter, o incluso ir a la página de GitHub, o incluso enviar un PR, mejorando la documentación para Vue, o incluso mejorando y agregando algo de código. Realmente lo aprecio. Muchas gracias por acompañarme hoy. Que tengas un excelente día.

Pero primero, veamos los resultados de la pregunta de la encuesta, que se trataba de nuestro consumo de café. Parece que todos nosotros, o la gran mayoría de nosotros, tenemos un problema de cafeína, incluyéndome a mí. Creo que Amitar y yo tuvimos la misma respuesta. Si quieres compartir cuál es nuestro problema. Sí. No se trataba de tu problema de cafeína. Se trataba de mi problema de cafeína, solo para aclarar. Y sí, mi opción fue la tercera, sin duda, beber café. Así que sí, solo trataba de sentirme cómodo con mi consumo, para dejarlo claro. Bueno, estás en buena compañía porque soy buena compañía y eso es lo que importa.

Ok, pasemos a algunas preguntas. Primera pregunta, lo siento. No quiero arruinar tu nombre, pero tus iniciales son J H. ¿Cómo maneja la API la lógica de validación asíncrona? Por ejemplo, si la validación depende de alguna otra API asíncrona como solicitudes HTTP. Esto es algo que mostré en mi presentación. Probablemente la pregunta se hizo antes de esa parte. Y lo único que tienes que hacer es pasar, en lugar de pasar solo una función de validación, simplemente pasas una función asíncrona o devuelves una promesa. Y si esa función es rechazada o arroja un error, entonces la validación falla y funciona exactamente igual que con cualquier otra validación sincrónica. Genial. Ok, siguiente pregunta de Saffity. Lo siento si estoy arruinando los nombres, de verdad lo siento. ¿VEST admite la validación de esquemas JSON o tiene integración con validadores de esquemas JSON, como AJV? VEST, como concepto general, no es una biblioteca de validación de esquemas, aunque se integra con cualquier cosa. Y solo como una nota rápida, Enforce, la función de afirmación dentro de VEST, tiene funciones de validación de esquemas muy extensas.

Usando Patrones de Prueba y Desafíos al Escribir VEST

Short description:

La forma recomendada de validar formularios es a través de diferentes pruebas para cada campo. También se pueden utilizar validaciones de esquema en las pruebas. Escribir VEST fue un desafío ya que requería adaptar patrones de un mundo diferente. Las pruebas unitarias son sin estado, por lo que se implementó un estado interno en VEST para retener los resultados de validación para cada campo.

No es la forma más recomendada porque la forma en que pienso que los formularios deben validarse es a través de diferentes pruebas para cada campo, pero estas son compatibles. Y si estás utilizando validaciones de esquema en tus formularios, entonces sí, por supuesto que puedes usar las mismas validaciones de esquema dentro de tu prueba. Mientras arroje un error o devuelva un booleano, puedes ponerlo dentro de tu prueba de validación.

Genial. La siguiente pregunta de Organized Chaos. Me gustan las personas que tienen palabras normales. De todos modos, la pregunta es, muy interesante usar patrones de prueba para la validación de formularios. Parece bastante factible. ¿Has encontrado algún problema al escribir las pruebas u otras dificultades? Sí, muchos de ellos. Escribir VEST no fue sencillo porque estaba tratando de llevar algunos patrones que provienen de un mundo completamente diferente al mundo de la validación de formularios. Y los principales problemas a los que me enfrentaba es que las pruebas unitarias son básicamente sin estado. Así que cada vez que las ejecutas, todo el estado se genera una y otra vez. Y lo que tuve que hacer para que VEST realmente valga la pena y no solo desperdicie tu tiempo gestionando tu propio estado es tener un estado interno que retenga los resultados de validación para cada uno de los campos que se validan. Y luego solo tienes que hacer la parte agradable de escribir las validaciones personalizadas.

Integración con Nuxt, Beautify y Vuex

Short description:

VEST es un marco versátil que se puede integrar con cualquier marco o biblioteca, como Nuxt, Beautify y Vuex. Toma una entrada, devuelve un resultado de validación y se puede utilizar en varios contextos. Migra tus validaciones sin cambiar tu código para integrarlo con un marco específico.

De acuerdo. La siguiente pregunta es de Anonymousio. Yo uso Nuxt, Beautify y Jest. Si uso VEST, ¿cómo se integra con Nuxt, Beautify y Vuex y todas las bibliotecas? Vaya, eso fue mucho nombre. Nuxt, Beautify y Vuex, y todas las bibliotecas. Mm-hm. Y todas ellas. En realidad, debido a que VEST es un marco que toma un valor, toma una entrada y devuelve un resultado de validación, puedes integrarlo con cualquier cosa y no está intencionalmente vinculado a un marco específico o a ninguna biblioteca específica, por lo que es muy versátil y puedes usarlo en muchos conceptos y aspectos diferentes y en muchos contextos diferentes. Así que puedes usarlo con Nuxt, sin Nuxt, o puedes usarlo con Vuex, o si vienes de React, simplemente puedes migrar tus validaciones y no tener que cambiar las cosas solo para integrarlo con un marco específico.

Soporte de VEST para la validación de tipos de archivo

Short description:

VEST no admite la validación de tipos de archivo u otras validaciones específicas del negocio. Evita la redundancia y permite a los usuarios tomar sus propias decisiones con respecto a estas validaciones. Sin embargo, VEST proporciona la flexibilidad para ampliar sus afirmaciones con marcos y bibliotecas personalizadas, lo que permite la integración con soluciones existentes de validación de tipos de archivo.

De acuerdo, y en realidad tenemos una pregunta de nuestro maravilloso moderador de preguntas hoy, así que un agradecimiento a todo el arduo trabajo de... Voy a destrozar esto. Lo siento mucho. Pero la pregunta es, ¿VEST admite la validación de tipos de archivo o planeas aplicarla? Oh, sí, eso es una buena pregunta. Y esto es algo que he visto en muchos otros marcos y bibliotecas para validación, y típicamente, algunos de ellos lo hacen, pero típicamente no admiten algún tipo de validaciones. VEST es uno de ellos, de los marcos que no admiten estas validaciones. Y esto es cierto para la validación de tipos de archivo o cualquier medida de archivo, es cierto para la validación de correo electrónico, y es cierto para algunas otras. Y la razón es que estas son muy específicas del negocio. Y cada vez que intentas validar algo que es específico de cualquier tamaño de archivo, cualquier tipo de archivo, VEST tendría que conocer mucho sobre tu negocio para tomar esas decisiones si es válido o no. E incluso si no lo fuera, tendría que venir con mucha redundancia que muchos usuarios no necesitarían. Lo mismo ocurre con el correo electrónico. He estado en lugares donde, por ejemplo, no se permiten alias de correo electrónico, como el signo más después de tu nombre de usuario, y en algunos lugares solo se permite para las direcciones de correo electrónico de la propia empresa. Y VEST no puede saber esto. Por lo tanto, te brinda las decisiones que debes tomar con respecto a las validaciones específicas del negocio. Y lo bueno de VEST es que las afirmaciones se pueden ampliar con marcos y bibliotecas personalizadas. Por ejemplo, si usas una biblioteca que ya maneja la validación de tipos de archivo, simplemente puedes hacer enforce.dot.extend y darle esa entrada, y funcionará como cualquier otra validación dentro de VEST. Muy bien.

Interfaz Reactiva y Colaboración de VEST

Short description:

Actualmente, VEST tiene una interfaz funcional, pero estoy interesado en agregar una interfaz reactiva que funcione con el modelo de reactividad de VUE. Agradecería las contribuciones y la colaboración de la comunidad en esto. Si tienes conocimiento o interés en el modelo de reactividad de VUE, conectémonos y trabajemos juntos.

De acuerdo. La siguiente pregunta es si VEST tiene una interfaz funcional, y generalmente cuando se trabaja con VUE se espera que sea más reactiva. ¿VEST tiene una interfaz reactiva? ¡Oh, genial! Solo quiero decir que vengo originalmente de un fondo de react, y creo que una de las cosas más agradables de VUE es su modelo de reactividad. Creo que es realmente agradable cómo se actualizan las cosas y cómo funcionan de esta manera. La verdad es que quiero agregar una interfaz reactiva a VEST. Pero requiere bastante investigación, y creo que es algo que VEST debería tener, o al menos un puente, que funcione con el modelo de reactividad de VUE. Esto es algo en lo que me encantaría recibir contribuciones de la comunidad. Entonces, si sabes algo sobre el modelo de reactividad de VUE, o si simplemente quieres aprender y colaborar en ello, estoy interesado. Creo que definitivamente esta es la audiencia adecuada para eso.

Borrando la Caché de Validación en VEST

Short description:

VEST ofrece varias formas de borrar la caché de validación, incluyendo descartar la suite y generar una nueva, usar la función suite.reset para eliminar todo el estado, o usar la función suite.remove para eliminar un campo específico. Estas opciones rara vez son necesarias, pero ofrecen flexibilidad cuando se requiere.

Otra pregunta de OrganizedChaos, mencionaste que llevas un seguimiento del estado interno de VEST. ¿Has expuesto formas de borrarlo programáticamente? Sí. De acuerdo, lo explicaré un poco más. Entonces, VEST tiene varias formas de borrar la caché de validación. Una forma es descartar la suite y generar una nueva, y obtendrás un estado limpio. Simplemente crea una nueva suite. Las otras dos formas son básicamente, puedes hacer suite.reset, que es una función que cuando la llamas, se borra todo el estado. Y la otra, si por ejemplo, quieres eliminar un campo específico en caso de que tengas validaciones dinámicas, como cuando el usuario agrega un elemento y ahora tienes que ejecutar validaciones en él, y luego el usuario lo elimina, puedes hacer suite.remove y especificar el nombre del campo que deseas eliminar, y solo se eliminará ese campo. Por lo general, no tienes que hacer ninguna de estas dos cosas, pero a veces sí. Y cuando lo haces, tienes tanto reset como remove. De acuerdo, última pregunta, pero siento que esta podría ser larga. ¿Por qué debería usar VEST en lugar de vValidate o VULIDATE? Sí, sí, gracias por eso. Solo quiero decir que ambas opciones son geniales. Quiero decir, tienen su reputación por una razón. Son buenas y se adaptan a la audiencia de VUE, y son muy similares a muchas otras frameworks y bibliotecas que he visto en otros lugares. Entonces, si las estás usando y te funcionan, no deberías cambiar. Nunca debes cambiar una tecnología que funciona cuando no tienes una buena razón para hacerlo. Pero VEST tiene algunas ventajas cuando quieres usarlo. Y una de ellas es que la sintaxis es bastante única. Se inspira en otro lugar, y creo que hace que sea muy fácil expresar cosas que en otras frameworks son bastante complejas. Y esto es algo en lo que VEST es realmente bueno. Además, VEST está separado de la lógica de tu interfaz de usuario. Entonces, si, por ejemplo, tu aplicación usa un framework y una parte diferente de tu aplicación usa, como, por ejemplo, React, o no sé qué. Tienes, como, una aplicación multi-framework o un microfrontend, puedes compartir tus validaciones porque puedes usar las mismas funciones de VEST, la misma suite de VEST. Además, si tienes multiplataforma, móvil o Node.js o lo que sea, simplemente puedes compartir cosas. Es muy fácil porque todo está separado. Y esto es algo que creo que ni VValidate ni VValidate te ofrecen. Eso es justo. Sí. Sí. Muy bien. Muchas gracias, Eviatar. Fue muy esclarecedor.

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

Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk!
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.

Workshops on related topic

Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
- Intro 3D - Intro WebGL- ThreeJS- Why TresJS- Installation or Stackblitz setup - Core Basics- Setting up the Canvas- Scene- Camera- Adding an object- Geometries- Arguments- Props- Slots- The Loop- UseRenderLoop composable- Before and After rendering callbacks- Basic Animations- Materials- Basic Material- Normal Material- Toon Material- Lambert Material- Standard and Physical Material- Metalness, roughness - Lights- AmbientLight- DirectionalLight- PointLights- Shadows- Textures- Loading textures with useTextures- Tips and tricks- Misc- Orbit Controls- Loading models with Cientos- Debugging your scene- Performance
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
Workshop
In this workshop, you will learn how to use vee-validate to handle form validation, manage form values and handle submissions effectively. We will start from the basics with a simple login form all the way to using the composition API and building repeatable and multistep forms.

Table of contents:
- Introduction to vee-validate
- Building a basic form with vee-validate components
- Handling validation and form submissions
- Building validatable input components with the composition API
- Field Arrays and repeatable inputs
- Building a multistep form
Prerequisites:
VSCode setup and an empty Vite + Vue project.
Vue.js London Live 2021Vue.js London Live 2021
116 min
Building full-stack GraphQL applications with Hasura and Vue 3
Workshop
The frontend ecosystem moves at a breakneck pace. This workshop is intended to equip participants with an understanding of the state of the Vue 3 + GraphQL ecosystem, exploring that ecosystem – hands on, and through the lens of full-stack application development.

Table of contents
- Participants will use Hasura to build out a realtime GraphQL API backed Postgres. Together we'll walk through consuming it from a frontend and making the front-end reactive, subscribed to data changes.
- Additionally, we will look at commonly-used tools in the Vue GraphQL stack (such as Apollo Client and Urql), discuss some lesser-known alternatives, and touch on problems frequently encountered when starting out.
- Multiple patterns for managing stateful data and their tradeoffs will be outlined during the workshop, and a basic implementation for each pattern discussed will be shown.
Workshop level

NOTE: No prior experience with GraphQL is necessary, but may be helpful to aid understanding. The fundamentals will be covered.
Vue.js London Live 2021Vue.js London Live 2021
72 min
A Different Vue into Web Performance
Workshop
Solving your front-end performance problems can be hard, but identifying where you have performance problems in the first place can be even harder. In this workshop, Abhijeet Prasad, software engineer at Sentry.io, dives deep into UX research, browser performance APIs, and developer tools to help show you the reasons why your Vue applications may be slow. He'll help answer questions like, "What does it mean to have a fast website?" and "How do I know if my performance problem is really a problem?". By walking through different example apps, you'll be able to learn how to use and leverage core web vitals, navigation-timing APIs, and distributed tracing to better understand your performance problems.