Firekit concepts to sync Firebase and redux – Tarik Huber – Medium

Firekit concepts to sync Firebase and redux  #react #firebase #javascript #redux #reactjs

  • That is one of the main concepts firekit uses to manage the sync of the firebase realtime database and the redux store.
  • Firekit allows you to make your firebase reference with all the native firebase query and filtering functions and just send the resulting reference to firekit and it will listen to all changes and sync them to the redux store.Saving only simple jsonIf using instances of classes in your library you get into the situation to save to the redux store complicated objects and functions.
  • By saving only simple json in your redux store persistence can be done however you want and with every tool and concept you wish.Persistent listenersThe main reason I choose to create firekit is that all other libraries link the whole listening cycle to a single component.
  • You can leave the listening cycle in a component, page, application or any other level you want.This approach is the same no matter if you are listening to lists or simple paths in the firebase realtime database.ConclusionFirebase is made to make our developer lives easier.
  • The main goals are to give the user maximal flexibility for using firebase and just providing easy and simple tools to sync data to the redux store.I you are interested on how the library works or want to try a real world project visit the github repo with the source code or the demo page.If you like how this library works you could put a star on the github repo đ

Firekit is a library that helps you sync your Firebase realtime database with the redux store of your react application. It uses some new approaches witch we will try to present in this article. If…

@ReactDOM: Firekit concepts to sync Firebase and redux #react #firebase #javascript #redux #reactjs

If you don’t know what Firebase is take a look on the video below. If you are familiar with it just continue without the video.

call. That is one of the main concepts firekit uses to manage the sync of the firebase realtime database and the redux store. That allows firekit to be a library without usage of any kind of classes that must be initialized.

The second concept that firekit is introducing is the creation of the firebase app outside of the library. Every library I could find until now either needs the firebase configs to initialize the firebase app itself with its own code or the library had to be copied to you project to be able to access the firebase app. Firekit is making here a simple but very effective approach. You create your firebase app how you want. With the configs you want and in they way you want it. This allows us to use firekit for different versions without the need to update the firekit library. It just uses the firebase version and instance you give it trough the provider.

call.

One more thing that makes other libraries complicated is that they try to abstract the firebase API calls to they’r own ones. This has more negative effects. You get very depended to the library. You can call only those functions that library has implemented and only on the version it supports. And if there are new features in Firebase you have to wait until the library has implemented them. Most of those libraries use for the querying of the realtime database they’re own functions and methods of initialized classes. Firekit allows you to make your firebase reference with all the native firebase query and filtering functions and just send the resulting reference to firekit and it will listen to all changes and sync them to the redux store.

If using instances of classes in your library you get into the situation to save to the redux store complicated objects and functions. Tough it is possible it makes one thing to a real nightmare and that is persistence. More and more applications on the web are implementing the PWA concepts and one main concept is offline capability and that is only possible if using persistence. By saving only simple json in your redux store persistence can be done however you want and with every tool and concept you wish.

The main reason I choose to create firekit is that all other libraries link the whole listening cycle to a single component. In most cases it is even hard to control how to and when to start and end the listening of a database reference. There is a problem I have with this approach.

Lets imagine we have a huge list with several thousands of child elements. We are scrolling in the list and want to edit one of the child elements. By clicking on it a new window with a form opens where we can edit the child. Now comes the problematic part. When we go back to the list the whole list will be downloaded from firebase because the listening cycle is linked to the component that renders the list. Even the user doesn’t notice this behavior but it is present and it should make you as developer think about it: “Every time you revisit a large list the list will be downloaded with all its data as if it was never there”.

The solution for such user cases are “persistent listeners”. The main concept behind them is that you start to listen to a database reference path on one place in your application and end the listening in a different place. This approach allows us to start the listening to a large list only if we really visit it and the listening to the list should stay on while we are using the application because all list events can’t have more traffic than downloading the whole list again and again from zero. You can then stop the listening on application exit. Firekit has for such scenarios a simple call that turns all listeners off that are currently active.

All database listeners in firekit are persistent from default. You have full control on where and when the listening starts and ends. You can leave the listening cycle in a component, page, application or any other level you want.

This approach is the same no matter if you are listening to lists or simple paths in the firebase realtime database.

Firebase is made to make our developer lives easier. Syncing the Firebase realtime database with a redux store should also be easy and simple. Even it is possible to make it so there are almost no libraries that are providing a such approach. Firekit tries to solve this problem by providing new concepts on how to sync the data. The main goals are to give the user maximal flexibility for using firebase and just providing easy and simple tools to sync data to the redux store.

I you are interested on how the library works or want to try a real world project visit the github repo with the source code or the demo page.

Firekit concepts to sync Firebase and redux – Tarik Huber – Medium