DHTMLX provides a wide range of highly customizable and performant JavaScript UI components covering the needs of modern business applications. Apart from rich functional capabilities, you can integrate DHTMLX widgets with popular technologies to achieve various web development goals.
This time, we want to focus on real-time data synchronization. This functionality is essential for seamless multiuser collaboration, ensuring all participants see the most up-to-date information without delays. Delivering a real-time experience from scratch can be a challenging and time-consuming process. Therefore, dev teams use various tools that simplify the implementation of live event tracking and data synchronization on the web. One remarkable option is Cloud Firestore.
In this post, you will learn more about the advanced Firebase database – Cloud Firestore, its benefits in real-world scenarios, and how to integrate it with DHTMLX Scheduler.
What is Cloud Firestore Database by Firebase?
Cloud Firestore is a cloud-hosted NoSQL database provided by Google as a part of its popular Firebase platform. It is a next-generation database designed by the Firebase team to address the pain points of its predecessor, Firebase Realtime Database. Cloud Firestore uses the document-collection model to store data and supports real-time data updates by syncing changes across all connected clients (devices) almost instantly.
Apart from enhanced real-time performance, Cloud Firestore can offer other significant benefits to development teams:
- Powerful querying
Using the extensive querying capabilities of Cloud Firestore, it is possible to fetch specific documents from collections. Queries are indexed by default and may include compound filtering and sorting setups.
- Offline support
Cloud Firestore comes with support for offline data access and queries across various platforms. Therefore, users can work with their data locally (in offline mode), and all updates will be synchronized once their devices are back online.
- Security
Firestore follows non-cascading security rules, including authorization and validation.
- Write and transition operations
Cloud Firestore allows using two types of atomic operations for reading and writing data. They are transactions (multi-step operations) and batched writes.
- Scalability
Thanks to its automatic scalability and efficient indexing, this regional and multi-region database performs well with growing amounts of data.
Web developers commonly choose this solution for apps that require immediate updates and ample opportunities for scaling, such as collaborative project management tools (planning boards, scheduling systems, etc.), E-commerce platforms, live dashboards for teams, etc.
When Cloud Firestore Shines (and When It Doesn’t)
Cloud Firestore is a practical choice for small teams with limited development resources, especially when building applications where real-time performance and fast development cycles are critical.
At the same time, Cloud Firestore is not a one-size-fits-all solution. If your app requires complex aggregations, low-latency operations, or on-premise hosting, Cloud Firestore may not be the best option. With such specific requirements, it is often necessary to build a custom backend for real-time updates.
Backed by Google, Cloud Firestore is constantly evolving and providing new capabilities for handling data. With its quick setup and focus on scalability, this database is widely used for various projects, from startups to long-term enterprise projects.
Why Combine DHTMLX Components with Cloud Firestore
Real-time data updates and multi-user synchronization are especially relevant in project management solutions. In such apps, it is often necessary to ensure that multiple end-users can simultaneously create, edit, or delete tasks (or events), and the results of these interactions should be instantly visible to all users without requiring page reloads.
DHTMLX JavaScript components, like JS Gantt and JS Scheduler, offer comprehensive feature sets for handling workflows, managing events, and planning activities in project management apps. It can be great to complement these products with an easy way to enable real-time updates and multi-user collaboration in web apps.
There are various approaches to achieving this goal. One of the most developer-friendly options is the integration with Cloud Firestore. Unlike other techniques such as Websockets, server-side events (SSE), or traditional polling, Cloud Firestore provides built-in real-time data synchronization and abstracts much of the complexity involved in managing persistent connections, event handling, and sync logic. It also eliminates the need to build and maintain a custom backend infrastructure. After delegating infrastructure responsibilities to Cloud Firestore, developers can pay more attention to the core functionalities of their projects.
How to Connect DHTMLX Components to Cloud Firestore
Now, let us discuss what’s going on when connecting DHTMLX components to Cloud Firestore and which tools you’ll need to make real-time data synchronization happen. Let’s consider implementing real-time data updates in task and event scheduling apps with DHTMLX Scheduler.
What You’ll Need:
- Firebase project with Firestore (get started with Cloud Firestore guide in the official documentation)
- DHTMLX Scheduler + Cloud Firestore GitHub demo
Before integrating DHTMLX JS Scheduler with Firestore, it is necessary to set up the development environment and configure a Firebase project with Firestore enabled. These stages are quick and guided by the official Firebase documentation, laying the groundwork for the next step, where the actual integration takes place. The integration will also be much easier with the new GitHub demo prepared by our team to facilitate the task.
Here are the four main steps of combining DHTMLX Scheduler with Cloud Firestore:
1) Map DHTMLX Scheduler actions to the Firestore collection. So, creating, updating, or deleting an item in the UI automatically updates the database.
What you’ll need to do that: createDataProcessor()
switch (action) {
case "create":
{
const createdDoc = await addDoc(eventsRef, ev);
if (createdDoc.id) {
return { action: "inserted", tid: createdDoc.id };
}
}
break;
case "update":
{
return updateDoc(doc(db, "events", id), ev);
}
break;
case "delete":
{
const deletedDoc = await deleteDoc(doc(db, "events", id));
if (deletedDoc) {
return { action: "deleted" };
}
}
break;
}
});
2) Retrieve existing data (tasks, events, etc.) from Firestore when the app starts. Thereby, the component starts with the latest data already in place.
What you’ll need to do that: IIFE pattern
const EventsSnap = await getDocs(eventsQuery);
const bulkEvents = EventsSnap.docs.map((ev) => processEvent(ev));
scheduler.parse(bulkEvents);
watchRealtime();
})();
3) Track changes in the Firestore collection in real time and update the UI immediately after changes occur.
What you’ll need to do that: the watchRealtime function that listens to Firestore’s onSnapshot() for updates and applies them to the UI using remoteUpdates.events
Here, we want to elaborate on what is happening after loading events from Firestore, specifically on keeping the Scheduler in sync with remote changes. Firestore lets you subscribe to live updates with onSnapshot. In this setup, you can track any changes to your events collection and immediately reflect them in Scheduler:
let EventsLoaded = false;
onSnapshot(eventsQuery, (querySnapshot) => {
if (!EventsLoaded) {
// first snapshot sends the current state
// we have already loaded it at the previous step
EventsLoaded = true;
return;
}
querySnapshot.docChanges().forEach((change) => {
// processes only the server-side changes
if (change.doc.metadata.hasPendingWrites) return;
const event = processEvent(change.doc);
switch (change.type) {
case "added":
remoteUpdates.events({ type: "add-event", event });
break;
case "modified":
remoteUpdates.events({ type: "update-event", event });
break;
case "removed":
remoteUpdates.events({ type: "delete-event", event });
break;
}
});
});
};
In this piece of code, remoteUpdates is one of the built-in Scheduler helpers for collaborative editing. Any live update system consists of two parts: one part that broadcasts local changes to all clients, and another part that listens to those broadcasts and applies them to the current client.
The remoteUpdates helper belongs to the latter group. It provides a ready-made entry point where you can feed commands, and it will apply them directly to the Scheduler instance. Check out this section to learn more.
The key difference between calling remoteUpdates and using regular API methods like scheduler.addEvent or scheduler.deleteEvent is that remoteUpdates marks the change as “remote”. This prevents the DataProcessor from treating the update as a new local change that should be sent back to the server. In other words, remoteUpdates ensures you don’t get into an infinite loop of updates being rebroadcast to all clients.
4) Convert Firestore data into DHTMLX-friendly format. It will help to ensure smooth rendering in the UI.
What you’ll need to do that: processEvent()
const event = docSnapshot.data();
event.id = docSnapshot.id;
return event;
};
Finally, you can initialize and deploy your app.
As a result, your DHTMLX-based app will be available online with live frontend data updates powered by Firestore.
In this tutorial, you can find a complete step-by-step guide on how to integrate our JavaScript scheduling component with Cloud Firestore.
Wrapping Up
As you can see, Cloud Firestore is a solid option for quickly adding real-time updates and multiuser synchronization to DHTMLX-based project management apps. This kind of integration is especially suitable for small and medium-sized projects, where development speed and ease of setup are priorities. It can also become a good choice for startups and small teams aiming to shorten time to market and reduce backend development costs. If this sounds like you, download a free 30-day trial version of DHTMLX Scheduler and use our integration materials to taste a real-time user experience.
Soon, we’ll share with you how to deliver real-time Gantt chart integration with DHTMLX and Cloud Firestore. Stay tuned!