Supabase Realtime Has 3 Primitives. Most Devs Only Use One | Eddie Jaoude, PayPal

In this talk, Eddie, a developer advocate at PayPal, explores the significance of real-time data in applications, especially within the context of the open-source project Supabase. He engages the audience with a game of Whac-A-Mole to demonstrate real-time interactions, emphasizing the importance of avoiding page refreshes for updated content. The speaker discusses various approaches to handling real-time data, contrasting traditional polling and techniques like WebSockets. He highlights the advantages of Supabase, focusing on its real-time features such as database events, presence tracking, and broadcasting. Eddie also shares his experiences in developing the game using AI and presents the practical application of these technologies to enhance user engagement.

Thank you everyone for the warm welcome. I'm super excited. I'm glad we've got quite a full house here today. So, my name is Eddie and thank you so much for being here. I'm a dev advocate as part of the PayPal team and today I want to talk about real-time data. But first, let's play a game. I'm super excited to see how this goes. As mentioned, the game

is Whac-A-Mole. Who knows the game Whac-A-Mole? Oh, 75% Yeah, that's really good. Okay, great. I promise you no moles were hurt in the making or playing of this game. But just to clarify, this talk is not about game development. It is about real-time data with the open source project Superbase. The aim of the game is to whack the mole if you haven't played before, but I'm not

going to go into that. I want to skip that. It seems like you all know how to do it. But the bit you don't know is there with the moles, there are some PayPal logos where you can get a bonus 10 points. So, do try and get those and they appear appear in the second half of the game. Let's play. So, if you scan this QR code

This is a great photo a second. Can I get a photo with you all? Perfect. Scan the QR code. If you don't want to scan the QR code or your phone doesn't have a camera, you can use the the link later on and you can send it to your friends if they're not here as well. Please use the name on your badge for two reasons. One, it's

going to be up on the screen and I don't want anything rude. And two, there are big prizes to be won. There is extra swag that you get for being here, but it is on a first come, first serve basis. So, do go to the booth straight afterwards and say you've been here and show them the game on your app, maybe a photo of the of of

me on stage. Um and also, there is an iPad Air, I think it's an Air, to be one at 5:00 p.m. today. So, you'll need to be at the booth at 5:00 p.m. to see who won. One last thing, don't close the browser after the game, because we need that for the end of the talk. So, while you're playing, let's just talk about real-time data. So, why

is real-time data important? Nobody wants to keep refreshing the page. When I'm uh showing the leaderboard, I don't want to keep refreshing it and seeing if new data has come in. And polling is not really a good solution, because I don't think it really solves anything. It might do in the short term, but every request is going to the server, and maybe nothing has changed. So, that

wastes compute, wastes bandwidth, and really compounds at scale. And for this game, as I'm going to show you in a minute, I specifically need some real-time features. Like, so I can see how many people are playing right now. We'll get to how that probably works shortly. I mean, you use real-time data every day, Slack, Discord, WhatsApp. So, you see it all the time. So, let me bring

up the uh leaderboard and see how the the scores are doing. How is everyone doing? Wow. Okay, my computer was asleep and locked. Let me just start everything again. Wow, 150 160 games in progress. I mean, that's really, really awesome. Hope someone's taking a screenshot of this. I think I need to. Hopefully that worked, little keyboard shortcut. But uh yeah, people are playing. Thank you so much.

This is great. Let me explain to you a bit about the leaderboard and what's real-time. Well, all of it is real-time. But if you look at the games in progress, that's people playing right now. And we're going to talk how we can achieve that. And then you've got the total games played, as well. That will increase as games in progress decrease. So, as the results come in

when the game finishes, then total games played will increase. And also the leaderboard and other sections will also update in real Okay. I'm not I think someone spelled their name wrong. There might be a typo in the in the first place. How many games have you played? Just one, two? Two? Okay, perfect. We're ready to ready to move on. Did anyone manage to get the the PayPal

logo? Oh, a few people. One of them or two of them or three of them? Anyone get three? Oh, there's a three in a three Oh, there's a few of you. The game's too easy. I need to make it make it harder next time. Okay, awesome. I want to give you a very brief backstory, not on my 15 years uh how I got here, but how I

got here today um with uh with PayPal. So, I recently joined PayPal and and they said, uh "Can you do a fun talk at JS Nation?" And I thought, "Well, I do talk on open source, full stack development, automated testing. I think that's fun, but maybe that doesn't, you know, count as fun." So, I thought I'd do something a bit different and uh I saw Nikki from

my team a moment ago and she gave me the idea of building a game. And I I never built a game before, so I thought that that'd be fun for for me as well. So, I started thinking of what games would work well in the browser and on our phones. And what do we all do in 2026? We ask AI. Interestingly enough, I didn't ask AI for

ideas of games. That Looking back, that probably would have been a good idea. I did that manually, went old school with that one. Um but uh when I found Whack-A-Mole, I thought, "Right, I'll get AI to MVP uh a client-side solution that I could I could play with. So, this was me. I was I was really really happy. But, unfortunately, it didn't go to plan. Uh so,

I asked AI to build an MVP and uh it came up with results, but it wasn't the result I was expecting. The Initially, the model was like squashed the start button didn't have a a pointer on it. So, on my computer, I I didn't think I could click on it, but I I could. And that wasn't the biggest problem I had. The biggest problem I had the

start button did nothing. It didn't work. There was probably like I don't know a thousand lines of code in this project that AI had generated, but it didn't work. Like the start button So, I was going back and forth with AI and trying to get it to to fix the problem. But, unfortunately, it was just over-engineering it. I mean, has anyone had a similar challenge? A few

hands went up. Yeah, it's it was saying, "I'll take a screenshot." And I was like, "Okay, go ahead, approved. Uh I'll take a video." There's no video that there's a button and nothing happens. And it was changing hundreds of lines of code. So, but yeah, it wasn't wasn't a good start to the MVP. I didn't think that would go so So, what I did, I thought I'd

start This time, I wouldn't leave the model on auto. I would pick a specific model. So, uh I picked a times three model and it created a game and it worked and it needed a few tweaks, a bit rough around the edges, but it worked and I was quite happy with it as a starting point. Uh do you know what I realized that day? That a times

three model is better. It burns tokens a lot faster. Funny enough, it burns them three times as fast. When I realized Whac-A-Mole was the game that I wanted to proceed with, I did then start to add Supabase and real-time Let's briefly talk about the the history of how we got to to real-time. I don't know if anyone remembers back in the day, we used to press F5

a lot in local development or um on the internet just seeing has a new message come in. So, walking down memory lane is what started off to be a request and a response. Well, it still is, but you had to keep asking was there any new data, any message, any information on there. I want to I want to stop that cuz that's making a bit making me

a bit dizzy. I'm sure it's making you dizzy as well. It was almost like is there any new data yet? Is there any new data yet? Are we there yet? No, wait a second. That's when you're in the car with your parents on a long journey. But it it kind of felt like that over and over and it was it was very manual and if you had

a thousand people or ten thousand people doing that on some, you know, sale that's happening online, it's not very good. Good way The good thing to look at, it was free load testing, I suppose. Then after that came what I used to call the hack era, where we had Ajax. Who remembers Ajax? >> [snorts] >> Yes. So, the web was becoming more of an application platform. And

engineers will always find a way. I think that that's true. So, there was Ajax. It replaced parts of your page behind the scenes and kind of worked okay. It was still definitely a hack. There was also Comet. Did anyone use Comet? No. A few people. Um yes, the Comet would do this hanging connection. It would make a request and if there was no data, it would just

wait and when it got data, it would close and then open a new one. So, it was hanging hanging connections. And I didn't like that either. I remember that when that came out and I was using Ajax and a friend said, "I'm using Comet. You should try it." I was like, "They both sound not great." But it's what we had at the time and there were other

solutions. And don't get me started on different browsers. Who remembers like browser challenges, different versions of browsers and it worked in this browser but not that browser. I I think most of us, right? Like that was hard. So, luckily people way smarter than me realized that that we needed a standard for bi-directional data. And this is when the WebSockets became a standard. So we can have open

communication between the browser and the server. This is all great, right? This is perfect. We're We're in a happy place. Unfortunately not. The spec was changing as we expected, but the browser adoption was quite slow and some browser adoptions were slower than others. We won't mention any names. So it was definitely definitely challenging. And one last thing, I don't know if anyone's aware, but I remember also

different browsers adopting the standard would interpret it very differently as well. So it was was very difficult at But then Socket.IO, the open source project Socket.IO, came to the rescue. So I felt there was light at the end of the tunnel. Who's used this before? Yes, it's a great project, right? Really It really became the standard. I remember that lots of projects that I had worked on

they they used Socket.IO because it gave them that abstraction from all those complexities. It felt really really nice to use. And it would even fall back to long polling if WebSockets was not supported in that browser. So it really covered all bases. At the time Socket as a service became quite popular. A lot of companies started coming out trying to make the developer experience better again. Then

there was native WebSockets in the We finally realized we needed it natively and then Socket.IO was no longer needed. Sorry Socket.IO, it was a great project, but it had a lot of overhead. It became bigger and bigger over time trying to cover all bases. So we moved away from making it work to how can we make it efficient and how can we improve the DX, the developer

experience? So I'm going to play this GIF while I just say a last few words on what is a WebSocket. I've mentioned it quite a few times. So, HTTP was the request and response, and it ended there, and that was it. But, with WebSockets, it wanted to open a persistent bi- bidirectional data flow. That was a fully duplex. And you could have And you can have, sorry,

secure and unsecure, just like with HTTP and HTTPS. It's still initiated by the client as a HTTP request, and it gets upgraded to a And now on to the project Superbase that that I've used for the back end of this I really like Superbase. I'm going to focus on the real-time features. They do have many other features. They have database, authentication, storage, lots of great stuff. But,

what I really like about the real-time features, it made it even easier to use, which I thought was brilliant. You got database events. You don't have to think about the sending the event. It's going to be sent for you already. You're just thinking about receiving the event. And then you've got presence, which we're going to go into more detail as well, and broadcast. And you've seen these

in my game. Actually, tell a lie. You've seen two. You've seen presence, which was how many people are playing right now, and you've seen the database events when how many total games played. Every time an insert was done, it would increment that one. So, there's one more to show you, the broadcast, and that's why I asked you to keep your Keep the browser open afterwards. If your

phone's locked, that's fine. It should hopefully still all work. >> [laughter] >> So, from these three real-time features, I actually think the Postgres changes is the easiest one to to get into it. I mean, who's done real-time data before regularly? Like about 20%? Yeah, it's not used that much, and I think showing people how it's actually not that hard, we can make the user experience a lot

better. So, yes, with the Postgres changes, it uh the total uh games played. So, 41. And each time a new game result was entered, that would uh increment. So, we only have to subscribe to that. We don't need to send the event. Let's uh let's have a look at the the This is all the code that I need for that. With 5% lie, but I'll come to

the lie in a minute. So, we um we specify the channel, and we'll do that always, so that'll be a a common theme. It can This In this case, it can be any string that you want, but, you know, please use a constant and put it in uh a config, otherwise you're going to get into a mess. And then we have the on function. It takes three

parameters. So, the first one is uh the real time that we want to uh listen to. So, in this case, Postgres changes, but it could be uh presence or broadcast, which we'll cover next. And then the uh next com parameter is what we want our uh event handler to listen to. So, in this situation, we want the public schema, and this is a required field. Most of

the time, it will be public, I think, for most Uh the event is not optional, but you could have it as a wildcard. So, I'm only interested in inserts, I'm not interested in updates. Uh so, I specified inserts, but you could have a wildcard. And um the uh table, I'm only interested in game results, but that could be omitted if you wanted everything out of uh your

database. And there are additional filters that you can add as well. And then the third parameter is my callback. I just want to increment each time there's an insert. That's it. And then we uh subscribe, so it registers our client with the server. Really simple, right? Who thinks that's pretty simple? It's a few more, few more. Okay, good. Cool. Does anyone see anything wrong with this though?

And it's not there's a missing semicolon or comma. This does work and run, but there is a scenario when this this wouldn't work. Yeah, shout out. Sorry, a lot of traffic. Yeah, that's a challenge with um the real time with the database. That's correct, especially with uh security. Any anything else? So, the problem is if I lose internet, if I'm on a train uh and I lose

a connection, then uh if I go back one, you will see that I have got 41 games played. So, say I'm on on the train, I lose internet, and four more games are completed, that won't increment. It's fire and forget. So, when I get internet again, and a fifth game comes in, it'll go to 42, but that's actually incorrect. It should be 46. So, you could refresh

the page to to fix it, but that's not really uh a good solution. Cuz a WebSocket connection uh stays open indefinitely unless it's closed or there's an interruption to the internet connection, as I mentioned. And it is uh yeah, fire and forget. And I think that that helps with the the the performance uh and scalability, but then you do have challenges like this. And And we can

solve it quite easily, really. In the subscribe, so when it reconnects, we just go and collect the latest data again. So, it only happens when the page loads or if we reconnect. And um the great thing is with this is you don't have to write much more code because that function already existed in my code when the when the page first loads. So, it's um really really

straightforward cuz we don't want to refresh the page. And then it will just continue to get future events. So, let's talk about presence. This is my my favorite real-time feature from Supabase because this used to be really really hard to do. So, the games in progress that you saw on the leaderboard, that was done by the presence features. How many people are actually playing the game right

now? Uh you've seen this in Google Docs with at the top right you see how many people are viewing this document with their profile picture and you hover it and you get their their name. Here I'm just sending player name and I'm just counting it, but you can uh you can customize it however you want. So, presence allows us to track state between users. And it has

two parts. So, before the previous example only had one part. This has two parts. So, this is on the player, so the people playing the game. So, we have the channel and this can be anything. We can specify ourself. And then in subscribe function, we uh send the presence tracker when we subscribe. And and that's it. And uh again, this is not great for high volume of

data. And by high volume I mean mouse tracking. I don't mean a lot of people, but I mean the player trying to send lots lots of data. There's another solution for that. But that's pretty straightforward. And then on my leaderboard, again, it's it's pretty straightforward as well. So, this is this is part two. We have this we connect to the same channel, so it's the same uh

constant. Uh and then uh we have three parameters again. So, the first parameter is not Postgres changes, it's presence. That's what we want to listen to. Uh and then the second one we want to listen to the sync event. There are three events for presence. Uh sync is if someone connects and disconnects. There's join and leave. I didn't want to increment and decrement as people joined. I

wanted it to just always be um all the events and I would just count it every time cuz the number is not going to be that big. But you can have some performance improvements if you need to. There are ways to do that. It is highly customizable. And the third is the callback where I I I count everyone that's playing at the moment and then I set

it for the UI. Broadcast. So, broadcast is the one you'll use the most. It's the most scalable. It's the most flexible. So, use it for notification, customer events, high frequency data like mouse tracking if that's what you wanted to do. And this comes in two parts again, but I'm going to flip it around and we're going to start on the leaderboard part because that's what's going to

be sending the event and receiving the event is your game page. So, we specify the channel. Again, I've picked a channel here and then I'm going to send you type is the broadcast and then there's an event and this time I'm specifying the event. You can listen to all events or listen just to this one and I've set off to your game just to listen to this

one and then I set the payload and the payload can be anything you want, but I'm just saying make the swag store true. One way to look at the channel and the event is that the channel could be the conferences like there could be multiple conferences happening around the world that could be the channel and the event would be the tracks within the channel. That's how I

would try and break it down. And Superbase has some really good features about you can even send a real-time event via a HTTP request if you don't want your client to connect via web socket, you can just make a HTTP request and Superbase will will do all the broadcasting for you. And on the player side, it's it's pretty same straightforward. The same channel, the same first parameter

on the on and the same event. Could put a wild card card in there if I wanted to and then I just check if it's set to true and then I set it in the in in the UI. I think that's pretty straightforward. I think that's that's pretty good. We should use it more, right? We should use it for everything. No, I'm joking. Don't don't use it

for everything. Let don't use it where it makes sense. I think it's time to show you the the broadcast. As if you all look at your phones and you should see a start button or a play button. Is that correct? Yeah, good. Awesome. So, if I go back to this, oh, people have already started clicking on the checkout. Okay, interesting. Right. Okay. Where's my mouse? >> I

lost it. Here we go. Okay, so your button should now change. If you saw a start button, it should now What does it say now? Start or play again? It should say swag. Yes. So, if you click on that, you will go to the swag store. But before you do anything else in the swag store, let me let me say something. There is a dummy card at

the top and this is all happening within a sandbox. So, please don't enter any real information. That's one. Two, if you scroll down on your phones, do you see a PayPal button? Yeah? Everyone sees a PayPal button. Well, I can disable the PayPal button. So, now you can't order any free swag. That's mean. You all been good sports, so I will re-enable it. Okay, perfect. So, yes,

I see people clicking on the checkouts and it's covering my last button, but that's fine. Okay, let me do a celebrate. Did anyone get confetti on their screen? Yes. Okay, brilliant. So, broadcast is working and I'm just sending them to you. So, that's that's great. Let me bring up my slides real quick. >> Go to the guest checkout and use the dummy card that's at the top

of the page, please. It is all happening in the sandbox and then untoggle don't create a PayPal account. It's all Yeah, sandbox like I said, my sandbox. But I don't want to have lots of users in there. And how I did this it was with uh the React SDK. It's really straightforward, npm install, import the SDK, add the PayPal provider, and then I added a button. And

then with create order, you saw uh at the top right of the leaderboards um people clicking checkout. So in the function for create order, I put a toast message, and I also have a toast message when people approve and pay the order. And that's uh that's it. Thank you all uh so much for your time today and for playing my game. I really, really appreciate it. Uh

if you want to connect with us, our socials for PayPal developers is up top, and mine as Don't forget to come and collect your uh swag from the swag store at the booth. Uh if you have any trouble, just come to the booth, show them a picture of me that you were here, um and they'll they'll give you the extra swag that they have in addition to

uh to the uh to the booth. It is first come, first serve basis, so I'd head over there straight after this. And definitely come and chat with us about PayPal or about real time or about anything else. Thank you all for your time. I really appreciate it. I look forward to your questions. >> [applause]