Creación de su propia biblioteca de validación de React: la experiencia del desarrollador (Parte 3)

 

 

 

  • SmashingConf Nueva York 2024
  • Implemente rápidamente. Implementar inteligentemente

  • Índice
    1. Empezando
    2. Funciones de conveniencia
    3. Advertencias e invariantes de desarrollo
      1. Cuando advertir
    4. Permitir flexibilidad
      1. Componer accesorios conflictivos
      2. Ayude a evitar la perforación de puntales
    5. La documentación es clave
    6. Resumen

    Ya hemos visto cómo podemos implementar las partes básicas de nuestra biblioteca de validación y cómo agregar todas las características interesantes que necesitábamos. Esta última parte de esta serie se centrará en mejorar la experiencia del usuario para las personas que utilizarán nuestra biblioteca de validación: los desarrolladores.

     

    Si ha estado siguiendo esta pequeña serie de artículos, ahora ha aprendido cómo crear su propia biblioteca de validación. Puede manejar casi cualquier desafío que se le presente, ¡e incluso ayuda con los problemas de accesibilidad! Su único inconveniente es que es una mierda trabajar con él.

    Sí, eso es correcto. La experiencia del usuario desde el punto de vista del desarrollador es muy deficiente. No recibimos ninguna advertencia útil cuando escribimos mal palabras, hacemos mal uso de las API o, bueno, ¡cualquier cosa, de verdad!

    Este artículo le guiará sobre cómo puede mejorar la experiencia del desarrollador de su biblioteca de validación, o de cualquier biblioteca.

    • Parte 1: Conceptos básicos
    • Parte 2: Las características
    • Parte 3: La experiencia

    Empezando

    Desde la última parte de este artículo, hemos extraído todo el código de la biblioteca en sus propios archivos. Eche un vistazo a la demostración de CodeSandbox para ver con qué estamos empezando.

    Funciones de conveniencia

    Queremos que nuestra biblioteca sea lo más sencilla posible de utilizar para los casos más comunes. Una forma de avanzar hacia ese objetivo es agregar funciones de utilidad convenientes para determinadas funciones.

    Una de esas características podría ser verificar si nuestro formulario es válido, es decir, si todos los mensajes de error son null. Esto es algo que normalmente verifica en su onSubmitcontrolador, pero también podría ser útil en su método de renderizado. ¡Vamos a implementarlo!

    const isFormValid = useMemo( () = Object.values(errors).every(error = error === null), [errors]);

    Proporcionaremos esta bandera en nuestro onSubmitcontrolador de formulario, así como en nuestro método de renderizado.

    • Ver demostración de CodeSandbox

    Hay muchos más que podrían escribirse, pero dejaré que sea un ejercicio para el lector.

    Advertencias e invariantes de desarrollo

    Una de las características más importantes de React son sus numerosas advertencias útiles en la consola durante el desarrollo. También deberíamos proporcionar el mismo tipo de calidad a nuestros usuarios.

    Para comenzar, crearemos dos funciones: warningpara registrar advertencias en la consola y invariantpara generar un error, ambas si no se cumple una condición determinada.

    function warning(condition, message) { if (process.env.NODE_ENV === 'production' || condition) { return; } console.warn('useValidation: ' + message);}function invariant(condition, message) { if (process.env.NODE_ENV === 'production' || condition) { return; } throw new Error('useValidation: ' + message);}

    Desea usarlo invariantsi el error va a bloquear su biblioteca (o dejarla inútil) y warningpara malas prácticas u otros consejos.

    Cuando advertir

    Decidir cuándo advertir es bastante importante. Demasiados y simplemente eres molesto. Si son muy pocos, dejarás que los errores críticos se envíen a producción. Por lo tanto, debemos ser inteligentes con nuestras advertencias.

    Dado que nuestra biblioteca acepta un objeto de configuración bastante grande, tiene sentido validarlo de alguna manera, al menos durante el desarrollo. Podríamos resolverlo usando un sistema de tipos como TypeScript o Flow, pero eso excluye a todos los usuarios habituales de JavaScript.

    En su lugar, creemos un verificador de esquemas en tiempo de ejecución, donde validamos que la configuración contiene los campos correctos e imprimimos las advertencias relevantes.

    function validateConfigSchema(config) { if (process.env.NODE_ENV === 'production') { return; } if (typeof config === 'function') { config = config({}); } invariant( typeof config === 'object', `useValidation should be called with an object or a function returning an object. You passed a ${typeof config}.`, ); invariant( typeof config.fields === 'object', 'useValidation requires a `field` prop with an object containing the fields and their validators. Please refer to the documentation on usage: https://link.to/docs' ); invariant( Object.values(config.fields).every(field = typeof field === 'object'), 'useValidation requires that the `field` object only contains objects. It looks like yours isn't. Please refer to the documentation on usage: https://link.to/docs' ); warning( ['always', 'blur', 'submit', undefined].includes(config.showError), 'useValidation received an unsupported value in the `showError` prop. Valid values are "always", "blur" or "submit".' ) // And so on}

    Probablemente podríamos seguir haciendo esto por un tiempo si quisiéramos pasar el tiempo. ¡Y deberías hacerlo! Es una excelente manera de mejorar la experiencia del desarrollador de su aplicación. Utensilios de cocina

     

    Sin embargo, no es necesario que los escriba a mano. Hay un puerto de navegador de la popular biblioteca de validación de esquemas de objetos joique podría ayudar a crear una verificación de validación en tiempo de ejecución realmente agradable. Además, como se mencionó anteriormente, un sistema de tipos ayudaría a detectar errores de configuración en el momento de la compilación para los usuarios que usan ese sistema de tipos.

    Permitir flexibilidad

    Una buena experiencia de desarrollador consiste, en gran medida, en no interponerse en el camino de los desarrolladores. Veamos algunas formas en que podemos mejorar esa experiencia.

    Componer accesorios conflictivos

    Primero, nuestros captadores de accesorios aplican algunos accesorios a nuestras entradas y formularios que nuestros consumidores pueden anular accidentalmente. En su lugar, agreguemos un objeto de anulación de accesorios a nuestros captadores de accesorios, que unirá cualquier accesorio en conflicto.

    Así es como podemos implementar esto en nuestro getFieldProps:

    getFieldProps: (fieldName, overrides = {}) = ({ onChange: e = { const { value } = e.target; if (!config.fields[fieldName]) { return; } dispatch({ type: 'change', payload: { [fieldName]: value }, }); if (overrides.onChange) { overrides.onChange(e); } }, onBlur: e = { dispatch({ type: 'blur', payload: fieldName }); if (overrides.onBlur) { overrides.onBlur(e) } }, name: overrides.name || fieldName, value: state.values[fieldName] || '',}),

    Se puede seguir un enfoque similar en getFormProps.

    Ayude a evitar la perforación de puntales

    Algunos formularios pueden ser grandes y estar divididos en varios componentes. En lugar de hacer que los accesorios de perforación de nuestros consumidores caigan del árbol, deberíamos proporcionar un contexto. De esta manera, pueden acceder a todo el material que devolvemos desde nuestro gancho personalizado en cualquier parte del árbol a continuación.

    Primero, creemos un ValidationContext con createContextel método de React:

    export const ValidationContext = React.createContext({});

    A continuación, creemos un componente ValidationProviderque proporcione todos los valores del useValidationgancho en contexto:

    export const ValidationProvider = props = { const context = useValidation(props.config); return (  {props.children}  );};

    Ahora, en lugar de llamar useValidationdirectamente, envolveremos nuestro formulario en un ValidationProvidercomponente y obtendremos acceso a los accesorios de validación ( getFormProps, errorsetc.) mediante el uso del useContextgancho . Lo usarías así:

     

    Import React, { useContext } from 'react';import { ValidationContext } from './useValidation';function UsernameForm(props) { const { getFieldProps, errors } = useContext(ValidationContext); return ( input {...getFieldProps('username')} / {errors.username {errors.username}/span} / );}

    ¡De esta manera obtendrás lo mejor de ambos mundos! Obtiene un gancho simple para esos escenarios simples y obtiene la flexibilidad que necesita para esas partes complejas.

    La documentación es clave

    Siempre que uso una biblioteca que no escribí yo mismo, me encanta la excelente documentación. Pero, ¿en qué debería centrarse y dónde debería documentarse?

    Un primer paso debería ser crear un archivo README fácil de entender, con los ejemplos de uso más básicos disponibles. Andrew Healey escribió un artículo asombroso sobre cómo escribir un buen archivo README , que recomiendo encarecidamente que lea.

    Cuando haya creado un buen archivo README para que la gente se ponga manos a la obra, un sitio web de documentación podría ser una buena idea. Aquí puede incluir documentación API más detallada, recetas para casos de uso típicos y unas buenas preguntas frecuentes.

    Existen excelentes herramientas para generar sitios web de documentación. Mi favorito es docusaurusel de Facebook (alardear humildemente: lo usamos al crear el create-react-appsitio web), pero existen varias buenas alternativas.

    No vamos a explicar cómo escribir buena documentación en este artículo. Existen varios artículos buenos, incluso una comunidad llamada " Write the Docs ". Han escrito una excelente guía sobre cómo comenzar a escribir documentación excelente .

    Resumen

    A través de esta serie de artículos, hemos creado una biblioteca de validación bastante decente. Tiene una API bastante simple, flexibilidad para cuando la necesites, una buena experiencia de desarrollador y muchas funciones bastante interesantes.

    Hemos explicado cómo implementamos las cosas paso a paso y espero que comprendas más profundamente cómo puedes crear tu propia biblioteca y cómo convertirla en algo que a la gente le encantaría usar.

    Déjame saber en los comentarios lo que piensas y si hubo algunas partes en las que te quedaste atascado o te costó entender. Haré todo lo posible para actualizar el artículo a medida que lleguen comentarios.

    Para finalizar este artículo, aquí está la versión final:

    • Ver demostración de CodeSandbox

    ¡Gracias por leer!

    (dm, yk, il)Explora más en

    • Reaccionar
    • javascript
    • Formularios





    Tal vez te puede interesar:

    1. Creación de su propia biblioteca de validación de React: las características (Parte 2)
    2. Introducción a Quasar Framework: creación de aplicaciones multiplataforma
    3. Creación de un componente web retro que se puede arrastrar con iluminación
    4. Creación y acoplamiento de una aplicación Node.js con arquitectura sin estado con la ayuda de Kinsta

    Creación de su propia biblioteca de validación de React: la experiencia del desarrollador (Parte 3)

    Creación de su propia biblioteca de validación de React: la experiencia del desarrollador (Parte 3)

    SmashingConf Nueva York 2024 Implemente rápidamente. Implementar inteligentemente Índice Empezando

    programar

    es

    https://aprendeprogramando.es/static/images/programar-creacion-de-su-propia-biblioteca-de-validacion-de-react-la-experiencia-del-desarrollador-parte-3-987-0.jpg

    2024-05-20

     

    Creación de su propia biblioteca de validación de React: la experiencia del desarrollador (Parte 3)
    Creación de su propia biblioteca de validación de React: la experiencia del desarrollador (Parte 3)

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20