Building a Real-Time UI on top of Neo4j with Vue.js and Kafka

For those interested on build real-time applications on top of Neo4j, I've just written a blog post on how to use Neo4j Streams and Kafka to pass updates from the graph into a front end application - in this case written in Vue.js.

Feel free to fire any questions or comments my way below.

4 Likes

Very cool! I’ve just started exploring kafka and messaging architectures lately.

Do you have any recommendations on how one might build an app that supports offline and syncing across devices with Neo4j as the DB using either Aura or an equivalent custom solution?

That's a good question - I've built a couple of apps that had to tolerate bad network connections. You can use event listeners to put an app into online/offline mode - all I did was keep a log of the messages that couldn't be sent in an array (backed by an indexeddb in the browser) and then flushed the queue when the device came back online.


document.addEventListener('online', () => {
  // Update state and flush queue of messages to API
});
document.addEventListener('offline', () => {
  // Put app in offline mode
})

You could use a cursor based approach to pulling data when the device comes back online - this is similar to Twitter's 3 new messages type approach. You either generate a cursor or use an ID or timestamp to get a paginated list before/after the last data in the UI.

I wrote a blog post on something similar a while ago, hopefully this will be useful:

1 Like

Thank you for the reply!

Yeah, I've come across that "replay" approach, but what I'd really like to solve is data synchronization across multiple devices. I'm building a notes app. Similar to the Bear app, if you've seen that. So I need to support someone editing a note while offline on their phone, then editing the same note on desktop, then having a merge strategy to resolve conflicts as the different devices connect again in any arbitrary order. (This is something that Bear doesn't do, but which I'd like to support in order to offer a feature that they don't and which annoys their users.)

My data is also inherently graphical, so I really want to use Neo4j and a serverless API to integrate with it from my Flutter UI.