Java, UX, HTML, CSS, WEB-design

Создание собственной библиотеки проверки React: опыт разработчика (часть 3)

Краткое описание по статье Создание собственной библиотеки проверки React: опыт разработчика (часть 3)

Название: Создание собственной библиотеки проверки React: опыт разработчика (часть 3) . Краткое описание: [ad_1] ⭐ Кристоф . Дата публикации: 24.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

  • Кристофер Гилтведт Селбекк

  • 0 Комментарии

Создание собственной библиотеки проверки React: опыт разработчика (часть 3)

  • 8 минут чтения

  • Реагировать, JavaScript, Формы

Краткое резюме ↬

Итак, мы уже видели, как можно реализовать основные части нашей библиотеки проверки и как добавить все полезные функции, которые нам нужны. Эта заключительная часть этой серии будет посвящена улучшению взаимодействия с пользователем для людей, которые будут использовать нашу библиотеку проверки: разработчиков.

Если вы следили за этой небольшой серией статей, вы теперь узнали, как собрать свою собственную библиотеку проверки. Он может справиться практически с любой задачей, которую вы можете ему бросить, и даже помогает с проблемами доступности! Единственный его недостаток в том, что с ним неудобно работать.

Да, верно. Пользовательский опыт с точки зрения разработчика серьезно отсутствует. Мы не получаем никаких полезных предупреждений, когда мы неправильно пишем слова, неправильно используем API или вообще что-то еще!

В этой статье вы узнаете, как улучшить взаимодействие разработчиков с вашей библиотекой проверки — или любой другой библиотекой для этого.

  • Часть 1: Основы
  • Часть 2: Особенности
  • Часть 3: Опыт

Начинающийся

Начиная с последней части этой статьи, мы вытащили весь код библиотеки в отдельные файлы. Взгляните на демо-версию CodeSandbox, чтобы увидеть, с чего мы начинаем.

Еще после прыжка! Продолжить чтение ниже ↓

Удобные функции

Мы хотим, чтобы наша библиотека была максимально простой в использовании для наиболее распространенных случаев. Способ двигаться к этой цели — добавить удобные служебные функции для определенных функций.

Одной из таких функций может быть проверка правильности нашей формы, т. е. все ли сообщения об ошибках null. Это то, что вы обычно проверяете в своем onSubmit обработчик, но он может быть полезен и в вашем методе рендеринга. Давайте реализуем это!

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

Мы предоставим этот флаг в нашем onSubmit обработчик формы, а также в нашем методе рендеринга.

  • См. демонстрацию CodeSandbox

Их можно было бы написать еще много, но пусть это будет упражнением для читателя.

Предупреждения и инварианты разработки

Одной из замечательных особенностей React является множество полезных предупреждений консоли во время разработки. Мы должны предоставить такое же качество и нашим пользователям.

Для начала мы создадим две функции — warning для вывода предупреждений на консоль и invariant для выдачи ошибки — и то, и другое, если заданное условие не выполняется.

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);
}

Вы хотите использовать invariant если ошибка приведет к сбою вашей библиотеки (или сделает ее бесполезной), и warning за плохую практику или другие советы.

Когда предупреждать

Очень важно решить, когда предупреждать. Слишком много, и ты просто раздражаешь. Слишком мало, и вы позволяете критическим ошибкам отправляться в производство. Поэтому нам нужно быть умными с нашими предупреждениями.

Поскольку наша библиотека принимает довольно большой объект конфигурации, имеет смысл как-то проверить это — хотя бы в процессе разработки. Мы могли бы решить эту проблему, используя систему типов, такую ​​как TypeScript или Flow, но это исключает всех обычных пользователей старого JavaScript.

Вместо этого давайте создадим средство проверки схемы во время выполнения, в котором мы проверяем, содержит ли конфигурация правильные поля, и выводим соответствующие предупреждения.

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
}

Возможно, мы могли бы продолжать делать это какое-то время, если бы хотели провести время. И вы должны! Это отличный способ улучшить опыт разработчиков вашего приложения.

Однако вам не обязательно писать их вручную. Существует браузерный порт популярной библиотеки проверки схемы объектов. joi это могло бы помочь с созданием действительно хорошей проверки проверки во время выполнения. Кроме того, как упоминалось ранее, система типов поможет отловить ошибки конфигурации во время компиляции для пользователей, использующих эту систему типов.

Разрешить гибкость

Хороший опыт разработчиков в значительной степени не мешает разработчикам. Давайте рассмотрим несколько способов улучшить этот опыт.

Составьте конфликтующие реквизиты

Во-первых, наши получатели свойств применяют некоторые свойства к нашим входам и формам, которые могут быть случайно переопределены нашими потребителями. Вместо этого давайте добавим объект переопределения свойств в наши геттеры свойств, которые будут объединять любые конфликтующие свойства вместе.

Вот как мы можем реализовать это в нашем 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] || '',
}),

Аналогичный подход можно использовать в getFormProps.

Помогите избежать сверления с опорой

Некоторые формы могут быть большими и разделенными на несколько компонентов. Вместо того, чтобы заставлять наших потребителей сверлить реквизиты по дереву, мы должны предоставить контекст. Таким образом, они могут получить доступ ко всем материалам, которые мы возвращаем из нашего пользовательского хука, в любом месте дерева ниже.

Во-первых, давайте создадим ValidationContext с помощью React. createContext метод:

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

Далее создадим компонент ValidationProvider, который предоставляет все значения из useValidation вместо этого ловите в контексте:

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

Теперь вместо вызова useValidation напрямую, мы бы обернули нашу форму в ValidationProvider компонент и получить доступ к свойствам проверки (getFormProps, errors д.), с помощью useContext крюк. Вы бы использовали это так:

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>}
    </>
  );
}

Таким образом, вы получаете лучшее из обоих миров! Вы получаете простой хук для этих простых сценариев, и вы получаете гибкость, необходимую для этих сложных частей.

Документация — это ключ к успеху 🔑

Всякий раз, когда я использую библиотеку, которую написал не сам, мне нравится отличная документация. Но на чем вам следует сосредоточиться и где вы должны документировать?

Первым шагом должно быть составление простого для понимания файла README с наиболее простыми примерами использования. Эндрю Хили написал замечательную статью о том, как написать хороший README, которую я настоятельно рекомендую вам прочитать.

Когда вы создали хороший README, чтобы заставить людей работать, веб-сайт документации может быть хорошей идеей. Здесь вы можете разместить более подробную документацию по API, рецепты для типичных случаев использования и старый добрый FAQ.

Существуют отличные инструменты для создания веб-сайтов с документацией. Мой любимый docusaurus из Facebook (скромное хвастовство: мы использовали его при создании create-react-app сайт), но есть несколько хороших альтернатив.

В этой статье мы не будем подробно рассказывать, как писать хорошую документацию. Есть несколько хороших статей — даже сообщество под названием «Write the Docs». Они написали отличное руководство о том, как начать писать отличную документацию.

Резюме

В этой серии статей мы создали довольно приличную библиотеку проверки. У него довольно простой API, гибкость, когда вам это нужно, хороший опыт разработчика и множество довольно сырых функций.

Мы шаг за шагом рассмотрели, как мы реализовывали вещи, и я надеюсь, что вы получили более глубокое понимание того, как вы можете создать свою собственную библиотеку и как сделать так, чтобы люди хотели ее использовать.

Пожалуйста, дайте мне знать в комментариях, что вы думаете, и были ли какие-то части, на которых вы застряли или с трудом поняли. Я постараюсь обновлять статью по мере поступления отзывов.

Чтобы закончить эту статью — вот окончательный вариант:

  • См. демонстрацию CodeSandbox

Спасибо за чтение!

Сокрушительная редакция
(дм, ук, иль)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Создание собственной библиотеки проверки React: опыт разработчика (часть 3)

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»