Упрощенное решение для кэширования на стороне клиента для HTTP-запросов.

В компьютерных науках есть только две сложные вещи: инвалидация кеша и присвоение имен вещам.

— Фил Карлтон

Если вы программист, вы, вероятно, уже знаете, как сложно кэшировать данные на стороне клиента. Кэш в памяти — это здорово, но сохранение данных может оказаться сложной задачей. Local Storage API прост в использовании, но предлагает ограниченное пространство (~ 5 МБ) и совместим только со строками. IndexedDB предлагает более надежный API, но его интерфейс на основе обратного вызова и сложный синтаксис заставят вас почесать голову, пока данные вашего клиента уплывают в никуда. И это без упоминания об аннулировании вашего кеша и обеспечении достаточной свежести ваших данных для обслуживания!

Было бы неплохо, если бы кто-нибудь придумал, как быстро настроить постоянный кеш, который обрабатывает за вас все грязные биты? Что ж, у нас для вас хорошие новости: мы это сделали! Мы хотели бы официально представить FlacheJS, решение для кэширования на стороне клиента, предлагающее поддержку кэширования в памяти, локального хранилища и IndexedDB.

FlacheJS — это легкая библиотека, которая автоматически кэширует любые сделанные вами HTTP-запросы и использует их для выполнения будущих запросов без какой-либо дополнительной логики или настройки. Для начала обязательно включите FlacheJS в свой проект, запустив «npm install flachejs».

Просто включите «flacheClient» в свой проект, создайте новый экземпляр магазина, и вперед за гонками. Оттуда просто сделайте все ваши HTTP-запросы через хранилище, а ваш flacheClient позаботится обо всем остальном.

FlacheJS использует собственный API-интерфейс Fetch для выполнения HTTP-запроса от вашего имени и кэширует результаты в соответствии с любыми настройками, которые вы включили. Поддерживая тот же интерфейс, что и при обычном запросе на выборку, мы обеспечили отсутствие необходимости в дополнительной логике для правильной обработки ответа. FlacheJS деконструирует ответ, сохранит данные в кеше вашего клиента и реконструирует ответ, прежде чем вернуть его вам. Таким образом, ответы, обслуживаемые из кеша, идентичны ответам, которые пришли бы из конечной точки API.

FlacheJS использует политику вытеснения наименее недавно использовавшихся (LRU) вместе со стратегией аннулирования время жизни (TTL). По умолчанию FlacheJS будет хранить данные на стороне клиента в пользовательском кэше в памяти для быстрого поиска, удаления и изменения порядка записей, но также предлагает поддержку IndexedDB и локального хранилища с помощью localforage.

Настройка вашего flacheClient так же проста, как передача параметров вашему экземпляру flacheClient.

Чтобы создать постоянное хранилище через IndexedDB или локальное хранилище, передайте определенные «драйверы» через flacheClient.

Ваш flacheClient попытается инициализировать ваш кеш в том же порядке, в котором вы передаете параметры драйвера. Если хранилище не инициализируется, запасной вариант — это следующий драйвер, переданный в ваш массив параметров. Для получения более подробной информации о том, как работают драйверы, не стесняйтесь ознакомиться с документацией localforage здесь.

FlacheJS поставляется с готовой поддержкой инструмента расширения Chrome, который вы можете использовать для просмотра ваших запросов в режиме реального времени, отслеживания задержек и проверки попаданий в кеш при разработке приложения. Хотя расширение еще не опубликовано в Интернет-магазине Chrome, исходный код расширения доступен в нашей учетной записи Github, и вы можете загрузить и настроить его для локальной работы в вашей среде разработки.

В целом, FlacheJS облегчает задачу настройки решения для кэширования на стороне клиента для ваших приложений, позволяя вам сосредоточиться на том, что действительно важно: на создании потрясающего опыта для ваших пользователей. Кроме того, по сравнению с традиционными запросами на выборку, в наших локальных тестах попадания в кеш возвращаются в среднем менее чем за 2 мс. Если вы хотите начать использовать FlacheJS в своем проекте, вы можете загрузить его прямо из нашей учетной записи Github здесь или установить через npm как flachejs.

Мы будем рады услышать ваши отзывы! Если вы хотите связаться с нами, вы можете связаться с нами через Github. Удачного кодирования!

Документация и исходный код:

Гитхаб FlacheJS | https://github.com/oslabs-beta/flachejs/tree/main

Веб-сайт FlacheJS | флаш.ио

Команда:

Ирадж Зубери | https://github.com/izuberi

Джейк Поликано | https://github.com/jdpolicano

Джасмайр Джасвал | https://github.com/twojaytech

Вернита Лоурен | https://github.com/v-law