Skip to main content

Immutable.js with firebase

To store data we can use either object or we can use array in javascript. Both have their own advantage and disadvantage.

Array : Array has advantage of maintaining order, but negative side is that If you want to update any element inside array you have to find the index of the element. May be via looping through the whole array if indexes are not predictable.

Object : You can store element as object property. It's like key-value pair, So If you want to update any property (element) of object, you can update it easily using key. So, It's easy to update the elements in object, but object uses hash for property, So order is not guaranteed.


Immutable.js with firebase


Firebase provides live updates. Suppose you are having a program where you are listening for live updates on some last x elements, while retaining others for display only, but order of display matters. 

You are listening for last x elements live, So you have to update the data of those elements when you receive update  from firestore, but also have to maintain order of all the elements.

Here comes immutable.js, to get advantage of both Array and Object. Using OrderedMap from immutable.js which has ability to update with key and which guarantees the order as well, solves the problem.


[Source code]

In orderedMap element stored in order of they are set, But for existing key it updates the existing element with that key. So, you get your update with key problem solved here.

Now next issue is display in order

You can convert OrderdMap to an array using toArray method on it. So you will alway get orderd output.

[Source code]

Real world uses case is pagination. How ??? Try to implement a pagination with infinite scroll which fetches old message when scrolled up while also listens live to the last X messages while on the bottom.

Comments

Post a Comment

Popular posts from this blog

Firebase - update a spacific fields of single element of object of array in firestore

Firebase - update a spacific fields of single element of object of array in firestore  Its actully advisable to use map instead of array when ever it is possible. But, there are cetain cases where you don't have option to do so.  For example, you are directly saving the response from some outer source without any modification and they send you an array. In this case you will have array to work with. Firestore does not support array here is why  "bad things can happen if you have multiple clients all trying to update or delete array elements at specific indexes. In the past, Cloud Firestore addressed these issues by limiting what you can do with arrays " For more details information you can refer to Kato Richardson post Best Practices: Arrays in Firebase .  Firestore document having array [ used from stackoverflow question ] Suppose you have array of object something like shown in array. Now you want to update endTime field of the object on the index [1]

Sciter : GUI Application with Golang using HTML/CSS

GUI library for golang sciter This is the words from Sciter's Web site, Sciter brings a stack of web technologies to desktop UI development. Web designers and developers can reuse their experience and expertise in creating modern looking desktop applications. Various GUI frameworks offer different UI declaration and styling languages, such as QML and  XAML (Microsoft WPF) . On the contrary, Sciter allows using time proven, robust, and flexible HTML and CSS for GUI definition and GPU accelerated rendering.   Before using sciter I already tried other alternatives but none of them was satisfactory as an example first i tried andlabs / ui  library   i already have written a post on it. You can read it on post gui programming with golang .  But this library is still under construction and has no support for production apps. Secondly, I go for electron but the problem was my simple calc like the app was of size 150mb. Which is 15mb of go and other was the e

Apache : setup basic auth with apache in windows

Authentication is any process by which you verify that someone is who they claim they are. Authorization is any process by which someone is allowed to be where they want to go or to have information that they want to have. I will show here how to set up basic auth on the apache with windows. Pre-requests  Windows VPS Apache server ( That's it ) ( In windows it might be difficult to setup the Apache alone. So instead use something ling xampp , wamp or laragon .) RestClient (  I personally use the postman , but you can use your preferable client)  Windows VPS provider Steps  Enable the necessary modules in the Apache Create the password file Set the auth directives in the virtual host file. Verify basic auth. Enable the  necessary   modules  in the Apache Open the httpd.conf file in the apache's conf folder. httpd.conf file Enable the necessary modules to make the basic auth working. Necessary modules  mod_auth_basic