← Back to portfolio

Firebase Listeners: Navigating the Realtime App Development

Published on

There is an app for that. Not always but the continued growth of the ever-expanding marketplace for varying types of apps is creating a need to create apps in a timely effective manner. It is most assuredly tedious work. If you are a front-end developer it means you have to take a crash course in backend and consume some API knowledge to ensure your app functions. Not every developer has the time or luxury of learning a new stack, especially when dealing with app development. So in a pinch, you can turn to Google’s cloud-based platform Firebase.

Firebase bypasses the need to custom code your backend which is such a stark contrast to traditional app development. The nice thing about not only the range of tools provided it is cloud-based which means Google handles maintaining and operating the backend without the worry. It provides things like analytics, authentication, databases, configuration, and more. You may be wondering what type of apps are best when using Firebase. There really is not a limit. The limit will be the platforms the app may be used on. Most often iOS and Android are the number one targets for Firebase SDKs with an increasing support for web, Flutter, Unity, and C++.

What do you do when you successfully save your data for your application into Firebase? How does one retrieve it? The data is identified through nodes by utilizing listeners. Firebase listeners watch for changes in specified nodes similar to an event handler. Code is triggered based on the parameters and the listener automatically provides the application with the updated data. This is called a snapshot. Once that occurs your application takes the information from the snapshot to update the UI.

What makes this even more unique is that the databases allow you to use client SDK to setup the listeners for the location of the data you app wants to use. It allows your app’s display to remain up to date and fresh without the hassle of polling the data of interest.

Event Listeners are the Life of the Party

Now that we covered the basics, we can dive into more detailed information about the listeners. Every query in Realtime Database is a listener, there are several types of listeners you need to use, each with a different callback. As an example, there is a ValueEventListener and ChildEventListener.

One of the main reasons we use events rather than function calls is because events are listened to while calls are created or made. That being said, a function call is made to another object whereas listeners choose to listen for an event broadcasted from your object. The listener will always fire immediately with a response of the current state of the results, which you will note is not always a desirable outcome, leading to some navigation on how to ignore the results you don't care about while being able to respond to the new updates you do care about.

A ValueEventListener gives you the entire contents of a particular location, every time any portion of it changes, whereas a ChildEventListener gives you callbacks for individual child nodes under a location whenever one of those children is changed. This occurs whether it is added, changed, moved, or even removed.

The reason listeners are important to use is that they are vital for monitoring any changes due to interactions or information to communicate to the backend code. Every method has an event listener for the node contains a single argument as an object. This object is the subclass of the EventObject class.

As you develop your app, the listeners correspond to various features on the front end such as buttons or interactive features that once interaction has occurred trigger a response. So, listeners are the bridge between.

The reason this is useful is due to the fact that listeners do not create dependencies in your code. This gives you control as a developer. Dependencies in applications pose a threat to long-term stability. The more we listen the more control we have - cheesy but valid.

Reading and Writing Data on the Web

The value of listeners only adds to the ability to read and write data on the web. This is because Firebase is structured as a real-time database meaning it uses real-time processing to handle in a state that is constantly changing. You read data from it by registering an event listener to listen for changes to that database.

In a few cases, you may want to read the data once. This would mean you need a callback to be removed after calling it once. An example would be initializing a UI element that you don’t expect to change, you would then use addListenerForSingleValueEvent( ) method. What this does is it triggers once and then does not trigger again. We use this for data that is only expected to be loaded once due to infrequent changes or it may not require active listening.

When approaching the basic write operation, we use setValue( ) which saves data to a specified reference. This places any existing data at that path. Other methods to use:

For pass types that will correspond to available JSON types:

  • String
  • Long
  • Double
  • Boolean
  • Map
  • List

To pass a custom Java object, should the class that defines the object have a default constructor that does not take arguments with public getters for the properties to be assigned.

In cases that a Java object is used, the contents of the object are automatically mapped to child locations in a nested fashion. Admittedly, Java object makes your code more readable with easier maintenance.

Should you need to update or even delete data, be sure that you are not overwriting other child nodes, use the updateChildren( ) method. It allows you to update lower-level child values doing so by specifying a path for the key. In instances where the data is store in multiple locations, use data fan-out to update all the instances. Data fan-out is the process duplicating data within the database.

Another way to delete data is one of the more simpler approaches. Basically you recall remove( ) as a reference to the location of the data. Deleting by specifying null can also be used as the value using set( ) or update( ). Note that update( ) allows you to delete multiple children in a single API call.

Firebase does support varying database change events, the commonly used is the value event. It occurs when the data entry is initially created or when a change occurs. Other events that can be useful are child_added, child_removed, and child_changed.

Where to Learn More

Firebase offers so many tools for app development to help you get to market quickly by providing scalable building blocks. They encourage you to build your applications with best practices.

There are varying app development tutorials available online when it comes to the learning the basics of Firebase. Sites like hacker.io, Udemy, and referencing Stack Overflow are invaluable resources. Firebase also has informative documentation that provides sample codes, as referenced above, to assist in creating your app. The more you code the more you learn, it is recommended that you have some understanding of either JavaScript or Java when using Firebase.

Check out these great tutorial links on hackr.io: https://hackr.io/tutorials/lea...