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

[adam_cowley]

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.

adamcowley.co.uk – 7 Jan 20

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

How to build a Real-time UI on top of Neo4j with VueJS using websockets, driven by Kafka and the Neo4j Streams plugin.

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

[granmoe]

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?

[adam_cowley]

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:

adamcowley.co.uk – 3 Jul 19

Social Feed Cursor Based Pagination

How to squeeze as much peformance out of a high-traffic, high-volume social feed using Neo4j's Core API.

[granmoe]

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.

[cameroncruz]

Hey @granmoe did you ever solve this offline sync requirement? I'm building an application with similar requirements and after extensive research still unsure if there's a stack with Neo4j that supports this use case.

[granmoe]

I started to look into using Replicache https://replicache.dev/ to do so. It offers data sync and offline-first for any tech stack. Then life got really busy, and I lost touch with the Replicache guys...now I'm going back to this project and probably not going to use Neo4j because I was very disappointed with the pricing model for Aura I'll probably just use some other DBaaS that already has offline support built in (Firebase or FaunaDB).

[adam_cowley]

I guess this is something that isn't really the responsibility of the data store and should instead be built into the application layer - it looks like that's what Firebase and Fauna do for you anyway.

What disappointed you about the Aura pricing by the way?