Firekit - это библиотека, которая помогает вам синхронизировать вашу базу данных Firebase в реальном времени с хранилищем redux вашего приложения реакции. Он использует некоторые новые подходы, которые мы постараемся представить в этой статье.

Код Surce: https://github.com/TarikHuber/firekit

Демо: https://www.react-most-wanted.com/

Если вы не знаете, что такое Firebase, посмотрите видео ниже. Если вы знакомы с этим, просто продолжайте без видео.

Вы разработчик реакции, который использует redux. Вы погружаетесь в удивительный мир функций Google Firebase, и теперь вам нужно синхронизировать свою базу данных Firebase в реальном времени с вашим хранилищем redux. Это кажется довольно сложным, если вы посмотрите на существующие библиотеки, которые пытаются вам в этом помочь. Они часто делают его более сложным, чем есть на самом деле, или даже усложняют его без причины. Firekit основан на нескольких концепциях, которые должны сделать его более понятным и простым:

  • нет использования экземпляров
  • создание приложения firebase вне библиотеки
  • обслуживание приложения firebase через провайдера
  • возможность получать ссылки в качестве параметров прослушивания
  • сохранение в состояние только простого json
  • настойчивые слушатели

Нет использования экземпляров

Большинство доступных в настоящее время библиотек для синхронизации firebase и redux усложняют задачу. Одна из причин этого заключается в том, что большинство из них пытаются использовать API базы данных в реальном времени firebase, используя экземпляры классов для выполнения вызовов on и off ссылки в одном экземпляре. Если вы посмотрите на API Firebase для базы данных в реальном времени, кажется, что они должны быть в одном экземпляре, но это не так. Вы можете вызвать on из любого места вашего приложения, а off - откуда угодно. Это одна из основных концепций, которые firekit использует для управления синхронизацией базы данных firebase в реальном времени и хранилища redux. Это позволяет firekit быть библиотекой без использования каких-либо классов, которые необходимо инициализировать.

Создание приложения firebase вне библиотеки

Вторая концепция, которую представляет firekit, - это создание приложения firebase вне библиотеки. Каждой библиотеке, которую я мог найти до сих пор, либо нужны конфигурации firebase для инициализации самого приложения firebase с его собственным кодом, либо библиотека должна быть скопирована в ваш проект, чтобы иметь доступ к приложению firebase. Firekit предлагает здесь простой, но очень эффективный подход. Вы создаете свое приложение Firebase так, как хотите. С конфигами, которые вам нужны, и в том виде, в каком вы этого хотите. Это позволяет нам использовать firekit для разных версий без необходимости обновлять библиотеку firekit. Он просто использует версию firebase и экземпляр, который вы передаете через провайдера.

Обслуживание приложения firebase через провайдера

Он использует очень простой поставщик, который принимает в качестве параметра инициализированное приложение firebase и отправляет его через контекст всем дочерним компонентам. Затем каждый компонент может с помощью вызова firekit withFirebase получить приложение Firebase и другие функции и инструменты firekit в качестве свойств компонента. Это очень похоже на вызов withRouter response-router.

Получать ссылки как параметры прослушивания

Еще одна вещь, которая усложняет другие библиотеки, заключается в том, что они пытаются абстрагировать вызовы API Firebase для своих собственных. Это имеет больше негативных последствий. Вы очень сильно зависите от библиотеки. Вы можете вызывать только те функции, которые реализованы в библиотеке, и только в той версии, которую она поддерживает. И если в Firebase есть новые функции, вам придется подождать, пока библиотека их не реализует. Большинство этих библиотек используют для запросов к базе данных в реальном времени собственные функции и методы инициализированных классов. Firekit позволяет вам создать ссылку на firebase со всеми встроенными функциями запроса и фильтрации Firebase и просто отправить полученную ссылку в firekit, и он будет прослушивать все изменения и синхронизировать их с хранилищем redux.

Сохранение только простого json

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

Постоянные слушатели

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

Представим, что у нас есть огромный список с несколькими тысячами дочерних элементов. Мы прокручиваем список и хотим отредактировать один из дочерних элементов. При нажатии на нее открывается новое окно с формой, где мы можем редактировать ребенка. Теперь перейдем к проблемной части. Когда мы вернемся к списку, весь список будет загружен из firebase, потому что цикл прослушивания связан с компонентом, который отображает список. Даже пользователь не замечает этого поведения, но оно присутствует, и оно должно заставить вас как разработчика задуматься об этом: «Каждый раз, когда вы повторно посещаете большой список, список будет загружаться со всеми его данными, как если бы его там никогда не было».

Решением для таких пользовательских случаев являются «постоянные слушатели». Основная концепция, лежащая в основе них, заключается в том, что вы начинаете прослушивать путь ссылки на базу данных в одном месте в своем приложении и заканчиваете прослушивание в другом месте. Этот подход позволяет нам начать прослушивание большого списка только в том случае, если мы действительно его посетим, и прослушивание списка должно продолжаться, пока мы используем приложение, потому что все события списка не могут иметь больше трафика, чем повторная загрузка всего списка и снова с нуля. Затем вы можете остановить прослушивание при выходе из приложения. Firekit имеет для таких сценариев простой вызов, который отключает всех активных слушателей.

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

Этот подход одинаков, независимо от того, слушаете ли вы списки или простые пути в базе данных реального времени firebase.

Заключение

Firebase создан, чтобы облегчить жизнь нашим разработчикам. Синхронизация базы данных Firebase в реальном времени с хранилищем redux также должна быть легкой и простой. Даже можно сделать так, чтобы почти не было библиотек, обеспечивающих такой подход. Firekit пытается решить эту проблему, предлагая новые концепции синхронизации данных. Основные цели - предоставить пользователю максимальную гибкость для использования firebase и просто предоставить простые и простые инструменты для синхронизации данных с хранилищем redux.

Если вам интересно, как работает библиотека, или вы хотите попробовать реальный проект, посетите репозиторий github с исходным кодом или демонстрационной страницей.

Если вам нравится, как работает эта библиотека, вы можете поставить звездочку на репозиторий github 😃