В калькуляторе стоимости жизни, над которым я работаю, есть несколько любопытных модулей.
-
Сохранение redux store в local storage. Эта штука запоминает все настройки калькулятора в браузере и восстанавливает их при последующих посещениях. Достаточно тривиальная на первый взгляд задача, которая осложняется изменением структуры стейта: приложение изменяется, вместе с чем я часто добавляю или удаляю ключи. В качестве решения я решил использовать deep object shape match и написал простой, но эффективный итеративный алгоритм сравнения. При этом null и любое скалярное значение считаются идентичными. Вместо этого можно было бы использовать популярный redux-persist, который умеет ещё и мёржить стейты, но я не уверен, что это хорошая идея — можно налететь на кривое состояние. Плюс выглядит он куда более монструозным.
-
Сериализация части стейта в URL. Вы можете поделиться своим расчётом с другом — для этого создаётся ссылка, в которой кодируются все важные настройки (фактически, часть стейта). Сейчас это сделано в полуручном режиме — ключи и аббревиатуры я задаю статично, но, при желании, упаковку-распаковку можно сделать стабильной и автоматизировать подобно protobuf, покрыть тестами и сделать конфигурируемый адаптер для чтения части URL и обновления store.
-
Разбиение строки на подстроки по совпадению с фильтром. Города в выпадашках для выбора можно фильтровать с клавиатуры, и я написал свой несложный и быстрый парсинг для разбиения строк на куски. Части строки потом обрамляются в span или любые другие элементы с подходящими стилями. Можно сделать и заопенсорсить либо небольшой react-компонент, либо саму библиотечку + любую презентационную часть.
-
Модуль-шина для обмена сообщениями между React и не-React частями сайта. Я заморочился (зря наверное) и сделал лендинг на чистом HTML/JS, а уже в него встраивается react-приложение. При этом мне хотелось, чтобы приложение могло реагировать на события из ванильной части кода (изменение языка влияет и на предварительно отрендеренную разметку, и на react-компоненты) и наоборот: можно переключиться из калькулятора на первый экран, а это триггерит анимации на лендинге и заново инициализирует написанные на чистом JS компоненты, которые меняют картинки и запускают Typewriter.
-
Typewriter, эмулятор печати с мигающим курсором. Класс на чистом JS (на самом деле, TS) без реакта, который удаляет и печатает названия городов как это делал бы человек. Посмотрите на новом лендинге (если вы уже пользовались калькулятором и попадаете в табличку с расчётом, нажмите на кнопку “Start over” или “Начать заново”). Промежутки между “нажатиями” на клавиши достаточно реалистично рандомизируются — получилось неплохо. Его можно выкладывать как есть, добавив примеров, и прикрутить дополнительные фичи: например, удаление и печать не только с конца, а части текста, или более хитрый алгоритм сравнения строк и удаление/печать только разницы.
Пригодилось бы что-то из этого в ваших проектах? Могу заопенсорсить и пригласить вас контрибьюторами.
PS Как вам новый дизайн лендинга и калькулятора? Он почти закончен, но не хватает мобильной версии — пожалуйста, не плюйтесь слишком сильно 😁 Скоро сделаю.
