intive Argentina Blog

Cómo mantener nuestra salud mental con Formik

— ¿Cuántos de nosotros hemos trabajado con formularios?

— ¿Y cuántos de nosotros lo odiamos?

Con este pregunta rompí el hielo en nuestra meetup más reciente. Y sí, lo volvimos a hacer. Seguimos patrocinando, organizando y participando de muchas meetups. Esta vez, partimos desde esta tecnología de frontend para resaltar el uso de Formik, una librería de componentes desarrollada para React.

Formik y otros caminos para mantener nuestra salud mental mientras hacemos formularios

Todas las páginas web tienen al menos un input, ¿cierto? Entonces ¿cómo un requerimiento que es tan común es al mismo tiempo tan complejo? Si buscamos en Stack Overflow cómo validar un email nos aparece esto:

Lo que hace esta cosa horrible es validar si una dirección de mail es realmente una dirección de mail. Constantemente iteramos sobre este mismo código y, la cantidad de boilerplate (bloques de códigos que repiten una y otra vez lo mismo) que utilizamos termina siendo impresionante.

Acá vemos un ejemplo:

Todo el tiempo, para cada formulario es fundamental agregar un método handleChange de manera de poder manejar el cambio de estado dentro del formulario. De esta forma, React conoce el valor actual del input.

Y así, más boilerplate:

Porque cada vez que tenemos que hacer un formulario debemos crear un método handleSubmit, para manejar las acciones necesarias y que se ejecute el submit del formulario. Podemos utilizar diferentes acciones, como hacer una request, algún evento asincrónico, validaciones, entre otros. Pareciera que cada vez que empezamos un formulario hubiera que hacer esto, lo que resulta poco eficiente.

Y nos falta hablar de las validaciones. ¿Cuántas líneas de validaciones (una tras otra) tenemos que hacer? Nos encontramos con un montón de if anidados.

Bien, ¡Formik llegó para salvarnos!

Se trata de una librería creada por Jared Palmer, que básicamente nos da 2 opciones:

Primera opción: Render Props

Render Props es un patrón de renderizado de componentes,

Esta solución nos provee de un set de herramientas que permite manejar los cambios, agregar validaciones de diferentes tipos, ejecutarlas, verificar el HandleBlur (es decir, si fue tocado o no el elemento), etc. En definitiva, hace posible todas esas cosas que nos hacen la vida más fácil porque alguien ya lo hizo por nosotros.

Aquí, un ejemplo de Render Props

La segunda opción: Higher Order Components (HOC)

HOC cuenta con nuevas versiones que tienen Hooks. ¿Y a quién no le gusta Hooks? Pues bien, HOC viene a trabajar en función de la nueva tecnología que nos está ofreciendo React. Este es un ejemplo:

Tanto con Render Props como con HOC obtenemos el mismo pool de herramientas. La decisión de cuál camino tomar es personal. Ahora bien, para las validaciones podemos usar Yup Validation, una librería de npm que se encarga de validar esquemas. Lo que busca es evitar que nosotros tengamos que repetir ese código de, por ejemplo, email validation o si un campo es requerido. Eso nos permite hacer todo un poco más legible. Esto, claro, siempre dentro de un marco de validation schema.

Entonces quedan esas dos formas de hacerlo (Render Props u HOC) y, si existe alguna validación extra, se puede usar el Yup Validation. Por otro lado, también tenemos Custom Components.

¿Por qué Custom Components? Cuando empezamos a trabajar con formularios, nosotros tenemos que agregar un OnClick, OnChange u OnBlur. Para esto, Formik ya nos da un componente. Nosotros simplemente le decimos el nombre y ya la herramienta lo asocia con los datos que tiene dentro del formulario y, listo. No hay que agregarle de forma manual un OnChange ni OnBlur ni nada. Entonces representa un ahorro a nivel semántico, no hay que agregar líneas demás.

¡Ni hablemos del error message!

Cuando queremos manejar un error, tendríamos que preguntarnos primero si el input fue tocado y, si lo fue, luego preguntarnos si tiene un error. En caso de tenerlo, deberíamos mostrarlo. Esto, por lo general, es una línea con ands y ternarios anidados, lo que no nos gusta porque es ilegible.

Los pros y contras de Formik

Como siempre sucede con todas las herramientas, usar Formik tiene sus pros y contras. Veamos:

Pros:

  1. Formik no depende de otros manejadores de estado. Por lo general aquellos que trabajan con formularios y Redux, tienen que tenerlos envueltos en acciones de Redux, de no ser así no funcionarían.
  2. No requiere de una configuración previa. Es tan simple como hacer npm install de Formik e importarlo y vincular los componentes del proyecto con él.
  3. Las versiones recientes usan Hooks. Eso dice que quieren ir a la vanguardia.
  4. Formik tiene buena documentación. Es bastante entendible y da un montón de ejemplos de distintas situaciones que se te pueden presentar.
  5. En su documentación, React lo recomienda.

Contras:

  1. Formik solo es útil para React y React Native.
  2. Los Custom Components no son tan fáciles de personalizar.

Y ustedes, ¿ya probaron Formik? ¿Qué experiencia tuvieron?

Josmer Delgado

Josmer Delgado es desarrollador React -previamente QA (manual y automation) – en intive, donde trabaja desde noviembre de 2016. Estudió Ingeniería en Mecatrónica, Robótica y Automatización en la Universidad Nacional Experimental Politécnica “Antonio José de Sucre” de Venezuela – su país natal-, y realizó cursos en programación de microcontroladores. Vive con su esposa Leydis -quien también trabaja en la empresa como recruiter- y con su adorada hija Eva Sophia.  Apasionado jugador de ajedrez, disfruta también de los videojuegos y el fútbol.

Deja un comentario