Не изобретайте велосипед! Или наборы утилит для Vue и React приложений
Втупление
Многие разработчики, когда дело заходит о стандартном веб функционале, например: хранение boolean значений, отлавливания нажатия клавиш или создания stepper, часто идут гуглить как сделать ту или иную функцию и чаще находят способ с реализацией функционала с полного нуля.
Нет смысла изобретать велосипед!
C такой реакцией на этот подход смотрят создатели и пользователи библиотек переиспользуемых функций для различных фрэймворков.
Для Vue — это, например, vueuse. (для vue utility функций)
Для React самая лучшая на сегодня — это свежая и активно поддерживаемая reactuse (для react хуков)
Какую проблему решают эти библиотеки?
Смысл их в том, чтобы упростить жизнь разработчикам. Заранее заготовить все возможные функции, которые могут понадобиться разработчику в его работе. Если он будет использовать готовый пакет, то он как минимум сэкономит свое время, а как максимум снизит до минимума вероятность его ошибки или допущения бага в коде, ведь каждая функция тестируется отдельно. Сценарий использования, на самом деле очень велик. С помощью подобных библиотек можно, к примеру:
использовать веб-сокеты
отправлять запросы
ловить геолокацию пользователя
пользоваться localStorage
легко создавать модальные окна
И это только малая часть из всех возможных сценариев.
Почему VueUse — это классно?
VueUse — одна из самых популярных библиотек для vue. Ведь предоставляет самый базовый переиспользуемый функционал. Некоторые считают, что это стандарт, и без него нельзя писать писать vue приложения. Тут сложно не согласится, библиотека состоит более чем из двухсот функций, и следуюет идеалогии, описанной выше.
Лучшая альтернатива для React
Расхваливая vueuse, как лучший способ прекрасной реализации прекрасной идеи не стоит забывать о топ 1 библиотеке/фреймворке на js — React. И тут ситуация была плачевнее. Ведь устоявшейся, надежной, обширной и единственной библиотеки для React нет. Были попытки от разных разработчиков, но где-то слишком мало хуков (в реакте это уже хуки, да), где-то непроработанное апи.
На смену этому всему, и как альтернатива vueuse, но в react, пришел reactuse.
Возьмем, например, и попробуем реализовать управление списком с помощью библиотеки и на ванильном react
reactuse:
import { useList } from "@siberiacancode/reactuse";
function App() {
const { value, set, push, removeAt, insertAt, updateAt, clear, reset } =
useList(["Pink Floyd", "Led Zeppelin"]);
}
export default App;
Мы получаем value (значение массива), set (функция присвоения значения другого массива), push (функция добавления в массив значений), removeAt (удаление по индексу), updateAt (изменение по индексу), clear (очистка массива), reset (возвращение к default значению) Теперь код, чтобы получить все эти стэйты и функции на ванильном react:
const [value, setValue] = useState(["Pink Floyd", "Led Zeppelin"]);
const [initialValue] = useState(["Pink Floyd", "Led Zeppelin"]);
const set = (newValue: string[]) => {
setValue(newValue);
};
const push = (valueToPush: string) => {
setValue((prevArray) => [...prevArray, valueToPush]);
};
const removeAt = (index: number) => {
setValue((prevArray) => [
...prevArray.slice(0, index),
...prevArray.slice(index + 1),
]);
};
const insertAt = (index: number, item: "string") =>
setValue((l) => [...l.slice(0, index), item, ...l.slice(index)]);
const updateAt = (index: number, newValue: string) => {
setValue((prevList) =>
prevList.map((element, index) => (index === index ? newValue : element))
);
};
const clear = () => setValue([]);
const reset = () => setValue(initialValue);
И мы получаем абсолютно те же методы и стэйт. А код на порядок меньше и проще
Библиотека активно поддерживается, добавляются новые хуки, есть удобный сайт с документацией, хуки используют простые исходники и имеют более проработанное API. Сейчас реализовано более 80ти хуков. Хочу еще отметить, что есть абсолютно новые реализации, которых я не видел нигде:
usePaint — для создания канваса, для рисования. Задается канвас, а хук дает возможность рисовать на нем, регулировать ширину кисти, цвет, непрозрачность и статус «рисует» или «не рисует»
useStopwatch — для создания секундомеров
useEyeDropper — для использования «пипетки» выбора цвета
огромное количество хуков для работы с устройством пользователя и браузерным апи (useMemory, useOperatingSystem, useClipboard, useBrowserLanguage, useHash и так далее)
Заключение
Такие библиотеки должны стать стандартом разработки, ведь позволяют не зацикливаться на деталях, которые уже давно были изобретены, их нужно лишь подключить и использовать.
reactuse ссылки
npm — github
