Run Your Database in the Browser with Postgres
A discussion about running Postgres in the browser with Snaplet's open-source approach, leveraging WebAssembly
Episode Description
JavaScript Jam Live hosts Peter Pistorius to discuss running PostgreSQL in the browser using WebAssembly and the open-source Postgres WASM project.
Episode Summary
This episode of JavaScript Jam Live features Peter Pistorius, co-creator of RedwoodJS and founder of Snaplet, discussing how his team collaborated with Supabase to build an open-source version of PostgreSQL that runs entirely in the browser using WebAssembly. Inspired by a Crunchy Data demo, Peter posted a call for contributors on Hacker News, which caught the attention of Supabase CEO Paul Copplestone, leading to a rapid collaboration. Rather than compiling Postgres directly to WASM—which would have been technically prohibitive—the team used a V86 x86 emulator running a lightweight Linux distribution (Buildroot) inside the browser, effectively running a full virtual machine in a browser tab. They optimized the experience by snapshotting the VM's state after boot, allowing near-instant startup. The conversation explores exciting implications: composable microservices across browser tabs, drag-and-drop database snapshots, educational use cases, and the broader vision of full development environments running entirely in the browser. Peter highlights limitations around networking—requiring a WebSocket proxy for external connections—while noting potential solutions like WebRTC. The project reached number one on Hacker News and garnered strong community enthusiasm, with the hosts and an audience member emphasizing how this approach opens a "Pandora's box" for running virtually any server software in the browser.
Chapters
00:00:00 - Opening Banter and Show Introductions
The episode kicks off with the hosts—Scott Steinlage, Ishan Anand, and Anthony Campolo—trading jokes about Halloween-themed profile names and seasonal decorations. Anthony also highlights his podcast FSJam's nomination for a Jammy award at Jamstack Conf, encouraging listeners to vote.
Scott introduces JavaScript Jam Live as a weekly Wednesday show covering JavaScript and web development, noting strong audience interest with 34 reminder clicks for the episode. He invites listeners of all experience levels to participate and ask questions, setting the tone for an open and audience-driven conversation before handing off to Ishan.
00:06:39 - Technical Difficulties and Guest Arrival
The hosts work through the challenges of getting guest Peter Pistorius connected to the Twitter Space, encountering issues with Twitter Lite, headphone compatibility, and connection latency. Ishan notes that these usability problems are common across live audio platforms, comparing them to similar issues on Riverside and other recording tools.
Despite the technical hiccups, the segment offers a candid look at the realities of live broadcasting. The hosts keep the energy light while troubleshooting in real time over Discord, eventually getting Peter connected and ready to speak. Anthony takes the opportunity to briefly introduce Snaplet as a tool for seeding local databases with anonymized production data.
00:13:34 - Peter's Background and Snaplet Introduction
Peter introduces himself, sharing his journey from iOS development to web development, his work at Chatterbug with GitHub's founders, co-creating RedwoodJS with Tom Preston-Werner, and founding Snaplet. He describes Snaplet as a tool that gives developers realistic production-like data to code against without exposing personally identifiable information.
Ishan positions RedwoodJS within the Jamstack framework ecosystem and steers the conversation toward the main topic: how Peter's team built an open-source version of PostgreSQL running in the browser. Peter credits his teammates Julian and Kaya for doing the heavy engineering work, humbly describing his own role as providing inspiration and cheerleading the effort forward.
00:18:01 - The Postgres WASM Origin Story
Peter explains how the project began after Crunchy Data published a demo of Postgres running in the browser. He posted a call for collaborators on Hacker News that initially received zero engagement, until Supabase CEO Paul Copplestone responded with a simple emoji and screenshot, sparking an immediate collaboration between Snaplet and Supabase engineers.
Ishan underscores how remarkable it is that the database itself runs inside the browser tab rather than on a remote server. The discussion highlights practical use cases including database tutorials, extension testing, and Peter's specific vision for Snaplet: letting users open a web page and instantly explore captured production database snapshots without installing anything locally.
00:24:28 - Architecture and the Virtual Machine Approach
The hosts and Peter discuss the technical architecture behind the project. Rather than compiling Postgres directly to WebAssembly—which the team lacked the expertise to do—they used the V86 x86 emulator to run a lightweight Linux distribution inside the browser. Peter explains how they used Buildroot to create a compact 12-megabyte image and snapshotted the VM state after boot for instant startup.
Ishan contrasts this VM-based approach with the traditional method of compiling applications directly to WASM, noting the tradeoff of additional emulation layers versus the incredible generality of the technique. Peter agrees that this approach opens a "Pandora's box," making it possible to run virtually any Linux-based server software in the browser using the same method, and encourages the community to push the boundaries and discover its limitations.
00:34:33 - Future Vision: Composability and Dev Environments
Peter shares a compelling vision of composable browser-based development environments where each browser tab runs a different service—a database, a web server, or different database snapshots—all communicating over the network. The hosts compare this to UNIX pipes, where each component does one thing well and they connect together.
The conversation turns to Snaplet's broader mission of giving developers control over their data pipeline across environments. Peter describes wanting developers to mount production-accurate database snapshots locally, code against them, and promote them to preview environments. This vision ties the Postgres WASM project directly to solving real development workflow problems around inaccurate test data and environment parity.
00:43:59 - Station Break, Live Demo Walkthrough, and Networking
After a brief station break promoting the JavaScript Jam newsletter, Ishan walks the audience through trying out Postgres WASM in real time at wasm.supabase.com. He describes the simple process of starting the VM, setting a password, and connecting from another machine, contrasting it with the painful traditional workflow of installing Postgres via package managers.
Peter explains the networking limitation: browsers cannot make raw TCP connections, so external access requires a WebSocket proxy server hosted by Supabase. The discussion explores potential solutions including WebRTC for browser-to-browser communication, and Peter highlights the broader challenge of bridging web APIs like the File System API and drag-and-drop with the isolated VM environment to expand its capabilities.
00:56:16 - Community Reception and Running on Unusual Devices
Peter shares that a Supabase team member got Postgres WASM running on an Amazon Fire Stick, prompting jokes about database tutorials on the family TV. The conversation shifts to community reception, with Peter reporting the project hit number one on Hacker News and stayed on the front page for over 24 hours, accumulating more than 800 GitHub stars.
Peter reflects on how the hardest part was convincing people to start the project, while the actual building happened remarkably fast—Julian essentially completed the core work over a single weekend. The hosts discuss building momentum from the launch and the potential for this technology to become widely adopted as more developers discover what's possible.
01:05:19 - Audience Reaction, Final Thoughts, and Closing
An audience member named Andrew joins to praise the project, pushing back on Peter's characterization of the VM approach as "cheating" and calling it genuinely innovative given WebAssembly's current limitations. He notes that compiling Postgres directly to pure WASM would likely be impossible at this stage, making the emulator approach both practical and educational for the community.
Scott draws a parallel to the four-minute mile—once someone proves something is possible, others follow. Peter offers to help anyone trying to run Linux containers in WASM, encouraging collaboration through the Snaplet Discord. The hosts close by thanking Peter and his team, reminding listeners to subscribe to the JavaScript Jam newsletter and join again next Wednesday.
Transcript
00:00:00 - Scott Steinlage
Yo, what's up, everybody? What's happening? Okay, Ishan, I sent you a co-host invite there. I don't know if it got to you or not. There's always a delay, I swear. It's like every time you request Ishan, I think it messes up.
00:00:20 - Anthony Campolo
All right, I'm gonna have to call all y'all out right now. Ain't none of you got a spooky name right now?
00:00:28 - Scott Steinlage
You what? I totally missed that.
00:00:30 - Ishan Anand
Is that the pumpkin?
00:00:32 - Anthony Campolo
Yeah, I got a pumpkin and a ghost. You guys got nothing.
00:00:37 - Scott Steinlage
I ain't got nothing but me and my face and my name, how about it.
00:00:44 - Ishan Anand
It's... you're... you know what you're like.
00:00:46 - Anthony Campolo
You're like...
00:00:47 - Ishan Anand
When I go to the grocery store and they're already putting out the Halloween, you know, in October...
00:00:56 - Anthony Campolo
Stuff. In October?
00:00:57 - Ishan Anand
Yeah, it's like, gosh, no.
00:00:59 - Scott Steinlage
There's already Christmas stuff everywhere.
00:01:01 - Ishan Anand
Yeah, exactly. Hey, man, I can't keep up.
00:01:04 - Anthony Campolo
It's pretty appropriate. You have a Halloween thing in October, you change it to a turkey at Thanksgiving, and then it's snowing in December. It's pretty simple, you know?
00:01:16 - Ishan Anand
Yeah. Maybe it just feels early. Scott, I'll let you keep going.
00:01:20 - Scott Steinlage
No worries. Hey, thank you all so much for joining us today, man. I'm so super excited for today. Can you believe this, guys? Okay, so I want to say, you know how you can go on and click the reminder for a particular Space that you want to remind yourself to be a part of, right? Well, not everybody really does that. A lot of people just say, yep, I'll go to that, I know it's coming up. But what's really cool is, on average, we get about seven or eight people actually clicking that button, just from past Spaces. And our highest has been maybe 13 or something like that. But this whole thing that Anthony helped set up here, by the way, with Peter, which... Is he in here yet? I'm not seeing him yet. He will be here soon.
00:02:13 - Anthony Campolo
We got three other people from Snaplet, though. You can tell by their suspiciously similar-looking avatars.
00:02:18 - Scott Steinlage
Yeah, I'm sure we're going to get a lot of people in here. But anyway, 34 people clicked that button to remind themselves of this Space today, right here. Yeah, kind of crazy. Cool. I don't know. Anyway, I also want to give a huge shoutout to Anthony as well and his podcast, FSJam, which is potentially up for, in the running, huh?
00:02:46 - Anthony Campolo
Yeah, it's up for this. It's not potential, it's actual. The winning is potential. The nomination is actual.
00:02:51 - Scott Steinlage
Go ahead. Tell us, Anthony, what is it?
00:02:53 - Anthony Campolo
Yeah, so it's the Jammys. You know, everyone, yeah, I got some nice jammies. When you're going to bed, if you put your jammies on, they're nice and comfortable. So these are the awards for the best pajama-themed...
00:03:05 - Scott Steinlage
Wow, you totally carried that one out.
00:03:08 - Anthony Campolo
So Jamstack Conf has awards. This is funny, actually. They're for websites and projects and frameworks and podcasts, livestreams, and video creators. Redwood actually won a Jammy in 2020, well-known fact. So this would be my second Jammy if I happen to win this award. Yeah, it's just a thing Netlify puts on for Jamstack Conf too, to give some shoutouts to people in the industry who are doing cool Jamstack-y stuff. And actually I gotta really give them props. The description they wrote for FSJam was amazing. If you go to the...
00:03:45 - Scott Steinlage
Yeah, it was pretty dope.
00:03:47 - Anthony Campolo
Yeah, I thought it was really great. So if you go to... actually, we have a thing for this: fsjam.org/vote, and it'll take you straight to us and auto-select us as your vote.
00:04:00 - Scott Steinlage
Do it. All right, y'all.
00:04:02 - Anthony Campolo
And then you'll see a little description there for what it is.
00:04:05 - Scott Steinlage
fsjam.org/vote. Is that correct?
00:04:11 - Anthony Campolo
Yes.
00:04:11 - Scott Steinlage
Awesome. Go check it out, guys. And you don't have to vote for them.
00:04:14 - Anthony Campolo
But also, all three Snaplet people who are here, send Peter a message and get him over here.
00:04:20 - Scott Steinlage
I'm sure he's on his way.
00:04:22 - Ishan Anand
He's all right. So I'm on Discord with him right now. He thinks he's in this. He says, "I'm in here."
00:04:27 - Anthony Campolo
What?
00:04:28 - Ishan Anand
Yeah.
00:04:29 - Anthony Campolo
That's crazy. Yeah, very confused.
00:04:31 - Ishan Anand
In our private Discord, you'll see the message. I'm pinging him right now.
00:04:36 - Scott Steinlage
Yeah, just send him the link here. Yeah, awesome. Well, anyway, I'm so excited, guys. Thank you so much, Anthony. Thank you for sharing that. If y'all want to vote for Anthony, head over there. Check it out. And by the way, check out their podcast too, FSJam. Good stuff. Ishan and I have been on there a couple times. Well, at least Ishan. I've been on there once.
00:04:56 - Anthony Campolo
No, no, you've technically been on twice.
00:04:58 - Scott Steinlage
Yeah, I've been on twice.
00:04:59 - Anthony Campolo
You both have been on twice.
00:05:00 - Scott Steinlage
I guess so. Yep. Anyway, awesome stuff. All right, so what is this? This is JavaScript Jam Live. Yeah, live. We are live. We do this every Wednesday, 12:00 p.m. Pacific Standard Time, daylight time, whatever you call it. It's Pacific time, specifically Pacific. Anyway, see what I did there? Yeah, we talk about everything and anything JavaScript on here, and web development. Speaking of which, we're going to be having Peter on here to talk about lots of awesome things. Innovative technology.
00:05:36 - Anthony Campolo
Yeah.
00:05:37 - Scott Steinlage
Why? Because that's what we do. We talk about innovative things on here. Fun stuff. Things that are gonna bring value to you. I promise. You're gonna leave here with some value today.
00:05:48 - Ishan Anand
Mind blown.
00:05:49 - Scott Steinlage
Mind blown. In fact, Ishan has messed around with this thing a little bit, so we're gonna hear more on that later, I'm sure. But if you're a beginner, you know what, we'd love to hear from you. If you're an advanced member of the crew here, we want to hear from you too. Whether you've been doing this for a little bit or for a very long time, we want to hear from you. In fact, we love it when things are a little bit audience-driven. Okay, so feel free to request to come up here and we'll bring you up. You can ask questions, you can state your opinion, you can do all that kind of fun stuff. So yeah, just so excited to hear from everybody today. All right, Ishan. He is, by the way, our co-host here, and I just want to turn the mic over to him to continue this amazing time that we have together.
00:06:39 - Ishan Anand
Yeah, could you jump into the Discord? Because I'm actually helping troubleshoot with Peter. He says he's in, but I still don't see him.
00:06:53 - Scott Steinlage
Maybe he's in under another name.
00:06:56 - Anthony Campolo
Yeah, maybe it's a different Twitter account, right?
00:06:58 - Ishan Anand
Oh yeah. Are you in under a different Twitter account? You know, this actually reminds me, you're hearing us solve these problems in real time. I was just on a Twitter Space last night that Dan Abramov was hosting, Mr. React himself. It was a little reassuring to hear the same type of troubles we have with the user experience of Twitter Spaces, which is a great product in some ways, but the user experience for people who first come on is like, oh, how do I manage all these requests? What do I do next? You know, the biggest classic one: oh, he's on Twitter Lite. Yeah, that might be a problem. If you join via browser... yeah. Regular native Twitter client, phone app. You cannot join from the browser if you're going to be a speaker.
00:08:05 - Anthony Campolo
Right?
00:08:05 - Ishan Anand
You can join from the browser. Yes.
00:08:06 - Scott Steinlage
You can't speak.
00:08:08 - Ishan Anand
You can't speak from the browser.
00:08:09 - Anthony Campolo
You still see him, though. So true.
00:08:11 - Ishan Anand
Yes.
00:08:12 - Anthony Campolo
He's going through some crazy Twitter bootleg thing.
00:08:15 - Ishan Anand
Yeah.
00:08:15 - Scott Steinlage
Right.
00:08:19 - Ishan Anand
But I feel like 50% of guests we've had on JavaScript Jam Live, this has been an issue. You know, when we did the formal podcast, we used to have an onboarding document.
00:08:32 - Scott Steinlage
Yeah.
00:08:32 - Ishan Anand
We would send to guests. I feel like we need to do that same template again.
00:08:35 - Anthony Campolo
Like, it's true. This is actually even more challenging than just hopping onto Riverside or something. It's newer, and there are weird things about it in terms of... like anyone can record on Riverside, I guess, then cast. That's pretty foolproof. Twitter Spaces aren't quite there yet.
00:08:53 - Ishan Anand
No, actually I'll disagree. It was the same. It was like the flip side of the problem. Anyone can join Riverside from their Chrome browser, but then you have somebody think they can do it from mobile and it doesn't work.
00:09:06 - Scott Steinlage
That's right. Well, you know what I say, just like that song. No worries. Yeah, don't worry about it.
00:09:16 - Ishan Anand
Yeah, we'll get there.
00:09:18 - Anthony Campolo
Don't worry. Be happy.
00:09:19 - Scott Steinlage
Everything is gonna be all right.
00:09:24 - Ishan Anand
So Peter says he's getting here. He said he's almost there. So that's great. I'm looking forward to that. And the topic we're going to talk about today with Peter is basically this work that he did, along with the rest of the team from Snaplet and Supabase, to run a Postgres server in your browser. We're going to talk about how to...
00:09:49 - Anthony Campolo
give a Snaplet 101 also, before we...
00:09:54 - Scott Steinlage
I'm bringing up.
00:09:55 - Anthony Campolo
We got the man.
00:09:56 - Ishan Anand
There we go.
00:09:57 - Scott Steinlage
Yeah, there we go.
00:10:00 - Anthony Campolo
Yeah, he's still coming up here. So Snaplet itself is a tool to allow you to take your entire production database, dump it onto your machine for local testing, but without PII, personally identifiable information. So it's both a database seeding tool and a local database testing tool, and it's also a way to do that in a way that respects users' privacy and doesn't get you a large seven-figure fine from some angry European nation...
00:10:34 - Ishan Anand
...or all of them, since they now all have this bloc called the EU.
00:10:39 - Scott Steinlage
Welcome, Peter.
00:10:40 - Ishan Anand
Peter, welcome.
00:10:44 - Scott Steinlage
Oh, you got to hit the mic button on the bottom left whenever you're ready.
00:10:50 - Anthony Campolo
So this means that by definition, this has to be Peter's first Twitter space he's ever spoken on.
00:10:55 - Scott Steinlage
It might be because he's on Twitter Lite and he's never used Twitter Spaces.
00:11:00 - Anthony Campolo
Now, this is why we're getting to try some new things. I was talking to my partner. I'm like, this is the creator. Don't ever let...
00:11:08 - Scott Steinlage
We lost him.
00:11:09 - Anthony Campolo
Just because someone can code doesn't mean they know how to use tech.
00:11:15 - Scott Steinlage
He's back.
00:11:16 - Ishan Anand
He's back.
00:11:16 - Scott Steinlage
This is gonna... this is good.
00:11:17 - Ishan Anand
There we go.
00:11:19 - Scott Steinlage
I sent you the invite there, good sir. People are...
00:11:23 - Ishan Anand
Well, you know, the other.
00:11:24 - Scott Steinlage
Anxiously waiting.
00:11:25 - Ishan Anand
The other thing that affects the usability is just the latency. People will say, "I've invited you," and it still takes about five or 10 seconds sometimes to see it. And it's very interesting. They've made the audio real-time, but the other piece is laggy, and that causes confusion.
00:11:45 - Scott Steinlage
And he's jumped off and on a couple times. He might have.
00:11:47 - Anthony Campolo
Yeah, he might have internet issues also, because if he is in South Africa right now, we recorded a podcast with him once where he was just out in the middle of nowhere.
00:12:00 - Scott Steinlage
Got it. Well, at least there's no video involved.
00:12:03 - Anthony Campolo
Yeah.
00:12:06 - Ishan Anand
Okay, let's see if we can get him back.
00:12:07 - Scott Steinlage
Are you...? I did.
00:12:09 - Ishan Anand
You sent him the invite.
00:12:11 - Scott Steinlage
I've been seeing him there, just jumping in and out.
00:12:18 - Ishan Anand
Well, like I said, it was reassuring to listen to other people have the same challenges on the Space yesterday.
00:12:26 - Anthony Campolo
We got him. We got him.
00:12:28 - Scott Steinlage
Turn that mic back on.
00:12:29 - Anthony Campolo
All right, all right.
00:12:30 - Peter Pistorius
I felt like an extreme version of a boomer right now because actually, I think my nickname is Mr. Boomer on our Discord, or I've tried to get people to call me that. But that was challenging. Seriously challenging.
00:12:48 - Scott Steinlage
Like, ridiculous.
00:12:50 - Ishan Anand
Well, you should see me try to use Snapchat if you think that looks bad. It's probably even worse if I...
00:12:56 - Scott Steinlage
mean, honestly, the user interface on this is not the greatest, but.
00:13:00 - Peter Pistorius
Yeah.
00:13:00 - Ishan Anand
Yeah.
00:13:01 - Peter Pistorius
And yeah, it wouldn't work with my headphones, and so I couldn't hear anyone. It wanted me to speak and engage, but I couldn't hear anyone. So I'm just holding my phone in my hand now, like someone that's got nothing to do.
00:13:17 - Ishan Anand
Oh, man. Do you want, like, another minute to see if your headphones connect, or should we just keep going?
00:13:26 - Peter Pistorius
Yeah, we can just keep going, it's totally fine. The weird noises that you hear in the background are the chair that I'm sitting on.
00:13:34 - Ishan Anand
Okay.
00:13:34 - Scott Steinlage
Sorry about that. Don't worry about it. It's all so much fun here. We're just very laid-back. It's very open-mic-ish. I mean, we're just going to have a good time. Chat about Snaplet, chat about Postgres and WASM, and the amazing innovations that have been going on in your brain.
00:13:53 - Ishan Anand
Yeah. So the way we usually structure this is to try to be as audience-driven as possible. For maybe about the first half of it, we'll do kind of you and I and the other speakers chatting, and then the second half we'll open it up to the audience. They can raise their hand, they can come up and ask you questions, and it can be audience-driven.
00:14:16 - Anthony Campolo
One quick thing, Peter. You should keep yourself muted when you're not talking because otherwise we're hearing the audio feedback through your own microphone. Just a heads-up on that.
00:14:24 - Scott Steinlage
Got it.
00:14:26 - Anthony Campolo
Yeah, all well, though. Continue on.
00:14:29 - Ishan Anand
Yeah. And maybe you want to just say "over" when you're done. No, it's funny how far technology progresses, and yet does it? Just to start out with, I want to talk about what you guys did and jump to that again for the audience. What you guys did is you open sourced an implementation of a database that runs literally in your browser. And I want to get to why that's so cool and so interesting. But before we do that, can you spend a few minutes talking about yourself and your background, especially as it relates to RedwoodJS, before we jump into the work you and the folks at Snaplet and Supabase did?
00:15:19 - Peter Pistorius
Sure.
00:15:20 - Ishan Anand
Thanks.
00:15:21 - Peter Pistorius
My name is Peter. I'm AppFactory on Twitter. The reason why I have that handle is because I'm an old-school iOS developer that transitioned to web development. And I had the opportunity to work for a company called Chatterbug with Scott Chacon and Tom Preston-Werner, who are the founders of GitHub. And I just got to know them after a while, and Tom invited me to create a framework with him called RedwoodJS, which I started on about two years ago. And after that I built a company called Snaplet. And we give developers data to code against. So if you've ever been in a scenario where you wanted something that looked like production data and you didn't have it, we built a tool that will make that accessible to you.
00:16:19 - Ishan Anand
Very cool.
00:16:19 - Peter Pistorius
In a nutshell.
00:16:21 - Scott Steinlage
Yeah.
00:16:25 - Ishan Anand
RedwoodJS is part of that avant-garde of Jamstack or full-stack Jamstack frameworks. I know you've talked about it on FSJam before, so people can tune in there, which again, as we mentioned earlier, is nominated for a Jammy. And I do want to talk a little bit more about Snaplet again toward the end, but let's talk next about what it is you built and how it started. You guys basically, as I mentioned, took your typical database server and ran it in the browser. You guys were inspired by somebody else who did it, but they didn't open source it, and you put out this request for contributors. Do you want to walk us through your view of what you did, how it came to be, then we can talk about the architecture and maybe why somebody would want to do that? But first, just give us kind of the quick summary of what you guys did and how it came to be.
00:17:23 - Peter Pistorius
So I think first off, I just want to point out that there are people on this call named Julian and Kaya, and they work for Snaplet. Julian and Kaya were actually the people who built this. I was just kind of there, the cheerleader and the inspiration to make it work or make it happen. But they did all the work.
00:17:44 - Scott Steinlage
Definitely bring them up.
00:17:46 - Peter Pistorius
Yeah, I think Julian.
00:17:47 - Ishan Anand
Yeah, let's bring them up.
00:17:49 - Peter Pistorius
Julian has some really interesting perspectives, but maybe he's a bit shy. Optional, optional.
00:17:58 - Scott Steinlage
All right, well, I sent the invites and they can come up if they like.
00:18:01 - Peter Pistorius
Cool, cool. So yeah, about five or six weeks ago there was this Crunchy Data post where they had put Postgres into the browser, and they used it as kind of a playground where you could learn Postgres or Postgres techniques. And it's really a wonderful piece of technology. It's super intuitive to get started. You can learn a whole bunch about PostgreSQL, and it just feels good not to have to install Postgres on your own machine. That's always a bit of a challenge, and you're kind of not really sure if it's going to work or not when you reboot your computer. I don't know if anyone's ever had that on macOS. You restart your machine and your Postgres doesn't start up, and you have to delete some PID file. Anyway, it's annoying.
00:18:50 - Anthony Campolo
Actually, I will just spin up an entire database on Railway because you can do it for free and it'll last for 24 hours. I would do that and test that just because it's so much simpler for me. And if I want, then I'll just persist it and pay like a dollar a month. I will do that instead of just running Postgres on my computer. It's so frickin' obnoxious.
00:19:12 - Peter Pistorius
Anthony, what you should be doing, and not to diss Railway, they're amazing, but you should be running snaplet db create. And then you'll have one and it will last forever, but it will go to sleep when you don't use it and it will start back up when you start using it.
00:19:32 - Scott Steinlage
Yeah.
00:19:32 - Peter Pistorius
Yeah, sure.
00:19:34 - Anthony Campolo
Okay, I'll try that.
00:19:39 - Peter Pistorius
Yeah. So getting back to the story of Postgres WASM, we were kind of inspired by that. And in the Hacker News post, I asked for people to join me in building an open source version of that. I just thought it was super interesting technology and I wanted to see how it worked. And Crunchy Data was sort of bare-bones on the details. So I just put out this... not a tweet, just a comment. And it got zero traction. Not a single upvote, not a single reply. No one responded to me. But then Paul Copplestone, the CEO of Supabase, sent me a single emoji, like the raised-hand emoji, with a screenshot of what I said. And we almost immediately got started working with a guy named Mark from Supabase and then a few of the team members at Snaplet. Yeah. And then we built this open source version of Postgres that runs in your browser.
00:20:42 - Ishan Anand
I just want to underscore for people just how cool and mind-blowing this is. When we're used to web apps that run in your browser, you see the interface in your browser, but the server is sitting out there in the cloud somewhere. Here, the database itself is running inside your browser. It goes out to the network because of some sandboxing limitations, but literally all the code to run the database is running in that browser window. You're running a whole server in your browser tab in Chrome, effectively. Well, not a whole server because we don't have Node there, which is one thing I want to get to. And that's what's so amazingly cool. This was made possible by this technology, WebAssembly, which we'll get to in a second. But before we do that, do you want to tell people what the use cases are and why you think this is so cool and so mind-blowing? What attracted you so much to say the community needs an open source version of this?
00:21:47 - Peter Pistorius
So for me, I have a very specific use case. Snaplet captures snapshots of your production database, transforms the data, and then allows you to use it in different environments. So what I wanted to have was an environment where you literally could just open up a web page and then explore the data that you captured. And we work exclusively against Postgres at the moment. So for me it has this really real use case. You want data, but you need a database to run it in, and now you have one in your browser. So there are limitations in that you can't connect to it externally without a proxy. That's just the nature of a web browser, it being isolated and unable to do raw TCP or UDP sockets. But there are ways around that, and I think we'll improve over time. Yeah, so I think a lot of the more obvious use cases are you can build tutorials against it, you can test out extensions, and I think there are a lot of educational uses. And I would love to see a world where you can actually code against this just in your browser.
00:23:07 - Peter Pistorius
Like, don't have to install anything. Just open up a tab, run Postgres, open up another tab, run a web server...
00:23:18 - Ishan Anand
You know, to make that concrete for the audience, it feels like with WebAssembly, over the last 12, 24 months, we've been getting these, call it postcards from the future. Where that future was is something like, instead of installing and running all these commands to get a dev environment up and running, just like you're used to opening a new browser tab to go and create a new instance to search Google, you open a new browser tab to create your dev environment, and that includes the editor, that includes the server, that includes the database. You can just start coding. Then if you want to code against one from a week ago to see how the bug happened, you open a new tab and go to a URL and it gives you all the server code and the dev environment and everything, and maybe where the bug was happening from a crash report right there. And you can just sit and debug it right in your browser. That feels like the future we're headed to. And you know, what you guys have done, along with I think some others like StackBlitz, feel like those postcards from the future that are just saying, hey, it's going to be really great down the line.
00:24:28 - Ishan Anand
And you guys are, you know, pushing that future forward.
00:24:34 - Peter Pistorius
Yeah, you know, I love that you're giving us so much credit.
00:24:38 - Ishan Anand
Yeah.
00:24:38 - Peter Pistorius
But it really feels like our first job was to discover how to glue the pieces together and build anything fun. Almost like we cheated, to a degree. And just to give you some perspective on that, we built this on top of a project called V86, which emulates a CPU and a whole bunch of stuff in the browser. And we're really running Linux in your browser. So if you open up the WASM demo now, and you Control-C out of that Postgres terminal, you'll be in a virtual environment, like a Linux machine running in your browser. So really anything is possible. Most things are possible. And that wasn't us. We built this on top of amazing open source projects, V86JS, and then we optimized for size. So we used this project called... sorry, what is it called? Buildroot.
00:25:55 - Anthony Campolo
I'm dropping a lot of links for these things he's mentioning in the chat. So people scroll down, you'll see some of this stuff.
00:26:04 - Peter Pistorius
At the top, we use something called Buildroot, which is meant for embedded Linux. So it gives you these tiny images and we used that to optimize space. And we have like a 12-megabyte image. And what's interesting, it's not actually the image itself, it's actually this...
00:26:24 - Anthony Campolo
At a...
00:26:24 - Peter Pistorius
certain point in time that we snapshot it, and that's what we're giving you. It doesn't boot up. It's just the state of the CPU and the memory at that point in time. And that's what we are giving you, if that makes sense, like the difference there. And it's really cool to consider. You could pause the state at any point in time and restore it at any point in time. That feels like a superpower to me.
00:26:52 - Ishan Anand
Yeah. So I unfortunately lost connection briefly during that. But I think I caught up to what you were talking about, which is you're saying you stood on the shoulders of giants. You were mentioning the x86 or V86 emulator that you guys packed it into. Then you're talking about how rather than starting with a fresh image, which runs the program from the beginning, it's like you took the application after it was done booting, froze that in a time slice, and then you get to basically unfreeze that whenever you load the version of it in the browser, which is, I totally agree, an amazing superpower. It's a way of avoiding the boot-up time. Somebody's already taken that for you. It's like in Jamstack when you build the pages ahead of time so you don't have to render them when somebody requests them. You're basically taking the boot-up time ahead of time. So when somebody starts this in their browser, it's starting from that context already there. It's really amazing. The key thing there in how it's architecturally built that I thought was fascinating is rather than with a lot of WASM... and maybe we should tell people what WASM is first.
00:28:09 - Ishan Anand
But let's start there. Actually, just for the audience, you want to briefly describe what WASM is.
00:28:17 - Peter Pistorius
I'm probably not an expert on WASM, but I can give you my butchered understanding of what it is. WASM is a runtime for... actually, I don't know this well enough to give you a good description.
00:28:36 - Anthony Campolo
I mean, I can give you the WASM 101. I'm not a WASM maxxer, but I've spent five years listening to podcasts about it.
00:28:44 - Ishan Anand
Go ahead, Anthony.
00:28:45 - Anthony Campolo
Yeah, it's a way to have a native binary, like assembly code, in the browser that is not JavaScript. So it may compile down to something that is basically JavaScript anyway. So I'm not really sure what it actually compiles down to, quite literally. But the important thing is that it allows developers to write other languages and have that language run in the browser. That's the whole deal.
00:29:16 - Peter Pistorius
Yeah, I was going to pause myself. I was also going in that direction with the browser part, but it's more than that. You can run it outside of the browser too.
00:29:28 - Anthony Campolo
Yes, it's a generic runtime, correct, that can be run on the server. So that's WASI. WASI is an important part of this that people are now going to use as like a Docker replacement. So yes, that is true as well. That's another interesting facet of it.
00:29:44 - Ishan Anand
The one-line sentence I like to say is sometimes it's what Java was supposed to be, and maybe I'm dating myself on that. But it's this: write once, run anywhere, finally. And I think the biggest misconception web devs have about WASM is they're like, "Oh, do I write WASM now for my web application?" And it's more that it's a compile-time target for other languages. As you were talking about, Anthony, it's a way to take your native applications that you might write for iOS or something like Photoshop in the browser, or Figma, who just got acquired for billions of dollars, and say, hey, you can take that native application, you can run it in the browser if you just compile it down to this format rather than compile it down to x86 instructions or native machine code. It's native machine code that runs everywhere in the browser and in a variety of other environments, as you guys alluded to.
00:30:48 - Peter Pistorius
I think one thing that's nice, or important to point out, is that you don't need to be an expert to use these tools. You can just dig in and get going. In our blog post, we own that. We said that we originally wanted to compile Postgres to WASM. We didn't have the technical skills to do that, so we just used this V86.
00:31:15 - Ishan Anand
That's exactly what I wanted to get to.
00:31:17 - Anthony Campolo
It's like, we're web developers, we don't know enough, is what you said.
00:31:22 - Ishan Anand
That's what I thought was really fascinating. The traditional way of people using WASM is they take an application like Photoshop, and rather than compile it to run on Mac and then compile it to run on Linux, then they add a new one that says compile it to run on WASM. In theory, I'm leaving a lot of stuff under the hood or brushing that under the table, but what you guys did was something different. You said, rather than compile the application down to WASM, we're going to run it inside a virtual machine, and that virtual machine knows how to run in WASM. Is that correct?
00:31:59 - Peter Pistorius
Yeah, exactly. It's almost like cheating, I'd say.
00:32:07 - Ishan Anand
So let's talk about this approach because there are pros and cons here. So my immediate reaction was, well, there's a con, which is now you've potentially got multiple layers of, shall we say, emulation or simulation, because you've got WASM on top of a VM, depending on how you're counting from the top or the bottom. But the pro is this feels like a very generic approach to take almost any tool and run it in the browser. You don't have to use this approach for just Postgres. Do you want to walk us through any other pros or cons? Do you agree or disagree with that take?
00:32:47 - Peter Pistorius
No, I absolutely agree. I almost feel as if once this technique becomes more well-known, it's like opening up Pandora's box, and there's really nothing very difficult once you understand the first few hurdles in order to use it for anything else. Yeah, I see that as a pro.
00:33:14 - Ishan Anand
I agree.
00:33:15 - Peter Pistorius
Obviously we don't want to slow everything down and download giant binaries and have layers on top of layers on top of layers. But are we kind of there already?
00:33:27 - Scott Steinlage
Do we have another one?
00:33:28 - Peter Pistorius
I don't know. I don't know. I feel bad just saying that.
00:33:32 - Ishan Anand
What's one additional layer of abstraction between friends and frameworks and meta-frameworks on top of...? Yeah. So yeah, why not? If the great unlock is that we're truly getting write once, run anywhere, to use the right words for it. You guys have opened Pandora's box. I feel like for almost anything running in the browser, this approach feels so generic. You can take maybe not Photoshop, but you can take almost any text-based terminal application, which means almost any piece of server software. Assuming it sits within the memory requirements, which are somewhat limited, you should be able to run it with the same approach. You basically took a VM that's running on WASM, you have a very lightweight version of Linux running on that VM, and then you put whatever server software you need on it. What can't you run on that? Is that a fair statement?
00:34:33 - Peter Pistorius
Yeah, totally. I don't know. And I think we should push it a little bit as a community and figure out where it sucks. Because once we know where it sucks, we can improve it.
00:34:43 - Ishan Anand
Yeah. The next step for me that I would think is, and you outlined a bunch of next steps, when I take a more medium-term view: why not just go ahead and stick the Node server in there too with the Postgres server, and then heck, put Visual Studio Code in there as well...
00:35:03 - Ishan Anand
Yeah, exactly. Have you guys thought about that? Have you experimented with that? That seems like the logical roadmap for this.
00:35:15 - Peter Pistorius
We haven't, but there's something about composability that I'd really like to play with. Kind of like having the semantics of maybe opening up a browser tab to localhost:3000/database-name and then opening up another tab and saying localhost:3000/second-database-name, and connecting to both those databases or separately based on... I don't know if what I'm saying is making sense, but it would be really cool if you could compose the application that you're building in different tabs and have those all communicate to one another. Micro...
00:35:57 - Scott Steinlage
It's like a microservices back-end database structure?
00:36:01 - Ishan Anand
Yeah, yeah, kind of. Each service is a tab. Yeah.
00:36:05 - Scott Steinlage
Oh, crazy.
00:36:08 - Peter Pistorius
And what if each database, or each snapshot of your database, were a different tab and you just kind of turn one on and off? I don't know.
00:36:20 - Scott Steinlage
I mean, it would make sense. I have like 30 tabs open pretty much all the time.
00:36:25 - Peter Pistorius
Why is Chrome using 500 gigabytes of memory?
00:36:32 - Ishan Anand
Yeah, no, this is... and we often think about having these different services as, you've got 10 services that capture the state of a system, let's say. But you might want to go backwards and forwards in time or across environments. In one state of the system in production, there's 10 services. But then you've got the staging version of the system, which is another 10 services. And maybe you want to mix and match those components across. And this gets into what you guys do at Snaplet. But it's that ability to, if you then could take out, like, what happens if I just roll out this update to this one service, one out of the nine? I can easily simulate that very closely in my local system by just updating that tab and leaving the other nine the same. And it's a very easy way to just look at the system and see how it might behave. I mean, that sounds extremely compelling.
00:37:30 - Peter Pistorius
I want MongoDB. I went to mongodb.com, blah, I got MongoDB. I wanted Postgres, I went to this other address. And then you just compose them over the network. It's interesting.
00:37:44 - Ishan Anand
It's really interesting. Like UNIX pipes. Each tab is like a UNIX command, does one thing well, and you can just hook them all together. I mean, that sounds like a really compelling future, at least for being able to test and teach these types of systems. Maybe not to actually host in production, but then you just need the right system that can take all that and translate to a production environment.
00:38:10 - Peter Pistorius
Maybe we're drinking the Kool Aid here, but it sounds pretty cool to me.
00:38:14 - Ishan Anand
Well, it's like five years from now, look back and listen to this and be like, oh, yeah, it's actually here, or maybe it's still five years away or a year. But that's a really, really good point about the composability. Are there other thoughts about, you know, what this future might look like or where you think the right way to take next steps are? Besides that? Because that was a really fascinating direction that I hadn't really thought too hard about in terms of.
00:38:42 - Peter Pistorius
So for me, we're kind of trying to solve this issue of you have this isolated production database that has data in it. It's the data that your code runs against on your server. And then on your development machine you have terrible data. It's not up to date. It doesn't look anything like production. It sucks. So what I'd like to do is mount a production-accurate version of your database and then have the ability to code against that, and then have the ability to promote that snapshot of your database to a preview database or something. Give you superpowers in terms of being able to move data around from environment to environment, from your local machine to a preview database that you can run in Netlify or against a preview deployment. Obviously not taking it as far as production, because that doesn't make sense, but you as the developer having this ability to control the data pipeline, or to control the data that you were coding against in many different environments. So that's how I think about this.
00:39:49 - Ishan Anand
Yeah.
00:39:50 - Scott Steinlage
Then the production is more, I don't know, less buggy, I guess, essentially.
00:39:59 - Peter Pistorius
Yeah, totally. Because, I mean, how often have you found a bug in production because you've made an assumption of what your data looked like during development because you actually didn't have the facts?
00:40:12 - Peter Pistorius
It was just assumptions. And yeah, that's the thing that I really hate about not having accurate data. You're guessing.
00:40:22 - Anthony Campolo
I, for one, like having strong opinions based entirely on assumptions. It means I can always be right...
00:40:31 - Ishan Anand
...until it meets the market. So you guys solved a bunch of problems, and there are a few that I thought were just really fascinating, like the one about the page poisoning flag being used for compression. I cut my teeth doing device drivers and we had to do that to solve memory-allocation issues, but here you're actually using it for a different purpose, which is just to compress the size of the image. And do you detail them out in the blog post? Are there any others that jump out at you? Or like, this was the hardest problem to solve, and once we had it, I knew we were on the right path, or we were about to give up until we had this problem solved. You call out, for example, the help of Fabian, who's like, "Oh, I think there's a bug in the emulator for V86." But you can read through the blog post and see the facts. But at an emotional level, where were the biggest roadblocks and the biggest ahas?
00:41:40 - Peter Pistorius
I can only speak to my own experience, and I wasn't actually the person that wrote this code. I think for me, the biggest roadblock was trying to convince people that we should do it, and then once they did it, I kind of stood aside...
00:42:01 - Peter Pistorius
I think Julian, if he feels up to it, can speak a little bit more about the things that he found challenging. I wasn't there. But to give you some perspective, it's like I probably went away for two days over the weekend. Snaplet is a company that has four-day work weeks, so I was away Friday, Saturday, Sunday, and by Monday it seemed like everything was done. So Julian couldn't sleep. This was one of those problems that obsessed him and...
00:42:31 - Scott Steinlage
Yeah, that's awesome.
00:42:33 - Ishan Anand
Wow.
00:42:33 - Scott Steinlage
I would love to hear it. Julian, if you're up for it, bro, I did send you the invite. But that...
00:42:41 - Ishan Anand
That just speaks so many volumes. That's just fascinating. I know what it's like when you've got a problem you just want to get solved and you get so excited about solving it.
00:42:55 - Peter Pistorius
One of the things that I can remember is building this image took an exceptional amount of time. You actually build it in Docker. You just literally walk away because it takes three or four hours, and you come back and then it's broken, and then you have to do it over and over and over again. So in building this image, we actually figured out optimizations to make Docker consume more memory or run in a more optimized environment. And we were like, let's just use Amazon. Let's get a really beefy Linux box or something. But we just ended up iterating over it a couple of times and building that quicker.
00:43:39 - Ishan Anand
Very cool. You know, Scott, we blew through our station break because I think we started a bit late. Let's pause for you to give a station break. And then after that, I just want to open it up to the audience to raise their hands. There's a button at the bottom left.
00:43:59 - Scott Steinlage
And request to come up.
00:44:00 - Ishan Anand
Request to come up and either contribute or ask a question for Peter and the team. But Scott, go ahead, give us the station break.
00:44:09 - Scott Steinlage
Absolutely. Thank you so much, guys, for joining us today. Has this been awesome or what? And thank you to Peter and his Snaplet team and everybody coming here today. It's been really cool hearing this thus far, and I'm sure we'll hear so much more with everybody asking more questions and just diving deeper here. This has been an eventful event, so thank you so much. Yeah, JavaScript Jam Live, that's where we are today. We do this every Wednesday at 12:00 p.m. Pacific Time, and we talk about everything JavaScript and web-development-related. And whether you're a beginner or you've been doing this for a very, very long time, it doesn't matter. We want to hear from everybody. In fact, that's where we get the most value from these conversations, when the audience participates. And what I mean by that is just asking questions or even giving your own opinion or whatever that might be. Yeah. Feel free to hit the request button and come on up and ask your question or state your opinion. Thank you so much. Greatly appreciate it. By the way, one last thing here: if you haven't joined our newsletter yet, go ahead and do that by clicking on the JavaScript Jam logo there, going to the JavaScript Jam Twitter, and clicking on subscribe.
00:45:21 - Scott Steinlage
And that is going to give you so much value. Every week we put out all these awesome things that are going on, just like Peter's stuff. We've linked everything in there for him as well, and what's been going on with Supabase and Snaplet together there, as well as upcoming events and all kinds of cool stuff. So if you don't want to miss out on the latest tech, what's going on in the JavaScript world, web development, all that, you need to get on that newsletter. Thank you so much. Ishan, back to you.
00:45:50 - Ishan Anand
Okay, so feel free to raise your hand. I thought what might be useful for folks is for them to understand how easy this is to try out and just walk folks through that. In fact, we probably should have opened with that because it's kind of like The Matrix. No one can really tell you what it is. You kind of have to experience it for yourself. And it's really darn simple. If you're in front of your computer, follow along with me right now and just type in wasm.supabase.com, and it'll take you to a page. It'll have a couple instructions on it. You might want to copy and paste to where it says "Connecting to PostgreSQL." You'll see a part that says, "ALTER USER postgres WITH PASSWORD..." You don't have to remember what that says. Just copy that piece out and then close that modal, hit the Start button you see on the right, and take the part that I just told you to copy and paste that into the prompt on the left. And you basically have now set up a database, a Postgres database, that somebody else can open in a web browser.
00:47:21 - Ishan Anand
What you'll see after... I'm doing this in real time. Well, my computer may be a little faster than others, or slower. If you do what I just described, you copy and paste that ALTER USER, you've set a password, you've started the virtual machine. On the right, at the bottom of your browser, you'll see a command, psql postgres, with the URL proxy.wasm.supabase.com and a port number. Somebody else can go on their machine, run psql, which is the Postgres client software, and connect to that database that's running in your browser, in that window that you just set up. Say the password. You can then write a CREATE DATABASE command and open up your classic SQL tutorial and find an example, copy and paste like CREATE DATABASE, CREATE TABLE, do an INSERT INTO for a few lines, and create a database table. And then somebody else, another computer, can go and query that database. And it's all running from within that browser tab you're looking at, which is just totally amazing. Anything I left out there that you want to highlight, Peter, before I ask you my next question?
00:48:37 - Peter Pistorius
No, I think you really described it quite wonderfully. Maybe to the untrained, or not the untrained eye, but to people who don't fully grok what's happening there, it's fantastic. It feels like... yeah, yeah.
00:48:55 - Ishan Anand
So the contrast is, if you're trying to do this the conventional way, the way everyone else does, it's like brew install. Do you want to walk people through what that is? And then you mentioned sometimes the server doesn't even start when you reboot your machine. So what does that alternative world look like?
00:49:14 - Peter Pistorius
Yes, the alternative world is having to install this binary on your own computer. You don't generally want to grab the binary from PostgreSQL's website, so you use a package manager to install it. First you install the package manager, Brew, then you update it, and then you install Postgres. And then there's a server running on your machine, just this one server. And it's sometimes really fragile. In some instances, you reboot your machine and macOS doesn't shut down the server properly. So when your computer starts up again, it thinks that the server is still running, but it's not. And then you have to manually figure out how to delete this file. You're basically maintaining a piece of software on your computer, which... it's not a terrible thing to know how to do, but you're trying to build code, trying to build features and fix bugs and stuff. And you don't need to know about that right now.
00:50:17 - Anthony Campolo
Yeah. To put it in perspective, there's a really great Easter egg on your repo where you have the instructions of... basically you're like, step one, clone it down.
00:50:24 - Peter Pistorius
I had nothing to say.
00:50:27 - Anthony Campolo
Step one, clone it down. Run the server command. Step two. There is no step two.
00:50:34 - Ishan Anand
I love that. What put it in perspective for me is I was trying to connect to it from another machine that I have, and it took me longer to install the SQL client that talks to the server using the package manager that Peter was just talking through than it did to open the window and start up the server. It was just like...
00:50:56 - Peter Pistorius
I think that's also.
00:50:59 - Peter Pistorius
Like, being able to connect from one machine to your own machine, you probably have to set up Postgres so that it does that. It probably only allows connections from the local computer. So there's a lot.
00:51:12 - Ishan Anand
Yeah. That actually gets me to the next place I want to get to. So the one piece that's kind of a limitation is the networking. The server is running in your browser, but for other outside machines like Anthony, who could be running it from where he is, to connect to my version of Postgres in my browser, that required some proxying. Do you want to walk folks through how that works?
00:51:46 - Peter Pistorius
Yeah. I can only speak about it vaguely because I don't know the specifics, but essentially there's a Python script that is a WebSocket proxy, like a server that is hosted somewhere, and your browser communicates via WebSockets to this proxy. And actually you can open up the... in the Postgres repo, there's a runtime package, and inside there there's the index HTML file and you can see the address to the proxy. Supabase created their own proxy that they hosted, but there is another one that's kind of open that you can just use, but it's incredibly flaky. So essentially what you're doing is creating a TCP-to-WebSocket proxy, and that's how that works. Because the browser cannot do raw socket connections, it can only do WebSocket connections.
00:52:51 - Ishan Anand
And my understanding is the WASM isolation also can't talk to TCP/IP natively anyway. Is that correct?
00:53:05 - Peter Pistorius
That's correct, yeah.
00:53:08 - Ishan Anand
Basically, to solve the problem that no one can connect into your webpage, which would be a massive kind of sandbox violation, and the fact that WASM, part of its security isolation, is very limited in what it can let in and out, you had to set up a server on the internet that Supabase is hosting to just relay data back and forth. But it sounds like if people want to set up their own version of that relay, there's an open source version in the repo. I didn't realize that.
00:53:38 - Peter Pistorius
Yeah, yeah, there's a package in there.
00:53:42 - Ishan Anand
Do you think it's possible, and I'm a little out over my ski tips here, that something like WebRTC could be used for people to communicate? Maybe the proxy being there just to set up the nodes to be able to know who they are, but the actual communication path could be entirely from browser to browser. The WASM boundary issue might be harder, but the fact that you could then get the tabs talking to each other... I don't know if you guys have talked about that, or maybe the right answer is we don't know, we haven't tried it.
00:54:20 - Peter Pistorius
It's actually... we were just talking about it, myself and Julian, but we haven't tried it. But it is super interesting.
00:54:31 - Ishan Anand
Okay, that is definitely something I'm going to be paying attention to. Great to hear you guys are talking...
00:54:36 - Peter Pistorius
about that, and the points, the places that are interesting. If you think about it like this is a VM inside of an isolated environment, I/O is the hard part because they're built in a way so that there aren't ways out of that. But then we have cool APIs. We have the File System API, we have drag and drop, we have WebSockets, and we have WebRTC. How do we use web technologies? How do we leverage the things that we know really well to break into this VM or WASM world, to expand it, to make it more accessible? Those are the questions that I want to answer. It would be great to collaborate on that and get people contributing to the repo.
00:55:26 - Ishan Anand
I think it's fascinating, actually, from a less technical user perspective as well, to build off what you're talking about. One of the features you have is the ability to restore and upload the state just from the drag-and-drop or save-file/blob API. Just like you're used to downloading a regular file off the internet, or you upload your photos, you can use that same API to take the database state and save it as a snapshot, send it to somebody, and they can upload it into the same type of window and recreate it. I think that's extremely fascinating. Is that kind of along the lines of what you're thinking of?
00:56:11 - Peter Pistorius
Yeah, yeah, absolutely.
00:56:14 - Ishan Anand
Yeah, it's, it's really fascinating.
00:56:16 - Scott Steinlage
So this could be kind of fun.
00:56:18 - Peter Pistorius
And I used to say this annoying thing. I said it deliberately to be annoying, which maybe is not the right reason to say something, but I used to say, "JavaScript is the OS,"
00:56:33 - Scott Steinlage
but
00:56:33 - Peter Pistorius
I feel like maybe there's something there.
00:56:40 - Scott Steinlage
Does this also mean that we're extremely at the edge because we're in the browser?
00:56:48 - Ishan Anand
Yeah, you're at the client. That's a good way to put it. You can't get any closer to the edge than in the user's hand. Speaking of which, have you tried this? I should have tried this, but it only occurs to me now. Have you tried this on a mobile device? Like, does the client run on an iPhone, in an iOS or Android browser?
00:57:09 - Peter Pistorius
Mark from Supabase actually got it running on his Amazon Fire Stick. Yeah, really funny. It's like on his TV. There's a screenshot, or a photo, in our Discord server.
00:57:29 - Ishan Anand
Oh, that's awesome. Boy, and I thought my kids were bored when I bring up Nova or Frontline. Here's some database tables, kids.
00:57:40 - Peter Pistorius
Dad, can we watch some TV? You're like, no, I'm busy.
00:57:45 - Anthony Campolo
We're learning inner and outer joins today, kids.
00:57:48 - Scott Steinlage
I'm good.
00:57:51 - Peter Pistorius
I'm optimizing queries. Leave me alone.
00:57:56 - Ishan Anand
Oh wow. Boy, I thought my dad humor was bad enough for punishment for them, but that's awesome. I'm going to go find that photo. So I know we're coming up on the top of the hour, Peter, so if you've just got a few more minutes, the question I'd like to ask you is: you've hinted a little bit about it, but what do you think is next up for this project? We kind of talked about some really fascinating directions, but maybe there are some near-term things that the team wants to get settled. What should folks look forward to in, let's say, the next few weeks, and then maybe half a year from now? Just kind of a medium and short term.
00:58:42 - Peter Pistorius
I think some of the intriguing stuff for us that we'd like to explore is inter-process or inter-tab communication. It's kind of like drag-and-drop abilities, file system access, that kind of stuff. The I/O things for us are really interesting. We don't have specifics. Yeah, I don't have specifics.
00:59:09 - Ishan Anand
Okay. And then what type of reception have you seen so far to it? Have other people reached out to you? What have you seen? I don't know if Crunchy Data has... if you've talked to them at all about what they were working on. I don't know if they ever even reached out to you and you said, let's create an open source version of them. I'd be curious if they did or not. But what are you seeing in terms of reception from folks in the community?
00:59:38 - Peter Pistorius
From my experience, I think the reception was really, really great. It stayed on the front page of Hacker News. It reached number one and stayed on the front page of Hacker News for, I think, more than 24 hours, which was surprising to me. Maybe we got lucky and there was just nothing interesting happening that day. But I kept watching it going up and down and never falling off. We got an awesome vanity metric, which is GitHub stars. We have 802, which feels really good. Yeah. Other than that, just general buzz in the community. The reception was really, really great. There was only one person that said, "Thanks, I hate it," and they got flagged by the Hacker News community.
01:00:27 - Scott Steinlage
So all in all, pretty good.
01:00:30 - Anthony Campolo
I did see one person when I tweeted about it, yeah, we can do this. Should we do this? And I responded with the Jurassic Park... they're too concerned with whether they could. They never...
01:00:48 - Ishan Anand
Well, awesome.
01:00:49 - Scott Steinlage
Yeah, go ahead. Sorry, I was just gonna say that with all that you've had, I was even gonna bring that up, but you brought it up anyway, with the Hacker News and being trending number one for as long as you did, which is amazing, and all this traction that you're getting from that, growing off of this momentum, keeping it going. Because you said earlier one of the hardest parts was convincing people to do it, right? And then you found a few of those people that are really committed to it, like Julian. He was working vigorously over a whole weekend, right? Probably didn't sleep at all. Because he's passionate about it, right? And he became passionate about it because he discovered it and then decided, hey...
01:01:43 - Peter Pistorius
sorry, I think I just connected.
01:01:47 - Anthony Campolo
I don't know what you were just saying. It was a labor of love. And like we were saying, Scott, I shared it with you because I thought it was cool. And I was like, hey, this is really interesting. This whole conversation is starting because of it.
01:01:58 - Scott Steinlage
Right? So grow off the momentum that's already being built up from this initial launch, essentially, and keep pushing at it. Go on as many Spaces as you can and go to... I don't know. I think there's a lot to be had here and the potential for it is really cool. I think it really could become something that a lot of people start to utilize. They didn't even realize it, you know.
01:02:26 - Ishan Anand
Yeah. To that end, do you think it's going to influence the Supabase and Snaplet roadmaps?
01:02:38 - Anthony Campolo
You might still be having connection issues. I was also thinking that Rob Cameron, who's in the crowd right now, probably hates this because he loves SQLite. And if you just make it easier for people to use Postgres, they're just not going to use SQLite.
01:02:53 - Ishan Anand
Well, there's no reason you can't take the same architecture and run SQLite. And there have been some great SQLite examples. There was absurd-sql. There was the stuff Fresky did where he ran the SQLite cloud client in the browser, which I thought was really fascinating work. I just played around with that because I thought it was so cool to try it out one night. Basically, with that project, you'd stick a SQLite database somewhere, and then they compiled the SQLite client to WASM. And then it runs in the browser and you just make SQL queries from your React app, and it runs the entire database in your browser just to query this random file.
01:03:46 - Anthony Campolo
But why can't I run SQL Server in WASM?
01:03:49 - Ishan Anand
Well, it effectively ran SQL Server in a sense because it ran the code. It ran the server code effectively in the browser.
01:03:59 - Anthony Campolo
Wait, but that's not SQLite then. SQL server is Microsoft's thing.
01:04:02 - Ishan Anand
Oh, you mean SQL server. I thought you meant the server.
01:04:04 - Anthony Campolo
I'm a heavy SQL Server partisan.
01:04:06 - Ishan Anand
Yeah, most brilliantly named product, right? Exactly. Well, I don't know. That's a TBD. But let's see if we got Peter back. Peter, if you can hear us...
01:04:26 - Scott Steinlage
Yeah, I invited him back up.
01:04:27 - Ishan Anand
Oh, okay.
01:04:28 - Anthony Campolo
There we go.
01:04:30 - Ishan Anand
So, Peter, where we left off, if you can still hear, was following up on what Scott was saying. This is going to be a big thing, and building off it, do you think it'll influence the roadmaps of yourself at Snaplet and Supabase?
01:04:48 - Peter Pistorius
I can't really speak for Supabase and I don't know, but for us, you know, one of the things that we're trying to do is give people data and a database to code against. I think there's an opportunity for us to use Postgres WASM to be the database on your local machine and to put data in it for you in a quick, efficient way. We're exploring that. I hope so.
01:05:19 - Ishan Anand
Yeah. This is really cool. Well, we're a little past the hour mark. I want to remind folks if they want to get one audience question in to raise their hand. Otherwise, Peter, I just want to thank you for joining us and the team behind it at Snaplet and Supabase. How can people best get involved if they want to be part of this?
01:05:53 - Peter Pistorius
I'd say really join us on Discord, and if you don't want to do that, then check out the repo and maybe create an issue. But I get the sense that we have quite a nice community on Discord, and I'd love for people to join us there.
01:06:10 - Scott Steinlage
And you want to share with me the Discord? I can put it in the.
01:06:16 - Peter Pistorius
You can go to... or you can go to www.snaplet.dev/chat.
01:06:25 - Anthony Campolo
It's app.snaplet.dev/chat, according to your website.
01:06:31 - Peter Pistorius
There we go.
01:06:32 - Scott Steinlage
That's the one. So I can go to Snaplet.
01:06:35 - Anthony Campolo
I'm copying it right now. I got it, Scott. Don't worry.
01:06:37 - Scott Steinlage
Thanks, Dean. Appreciate it.
01:06:41 - Ishan Anand
Okay, well, thank you, Peter. Thank you to the speakers today. Scott, do you want to take us out?
01:06:53 - Scott Steinlage
Yeah, absolutely. All right, so thank you all so much for joining us. Oh, hold on. We have a request here.
01:07:01 - Ishan Anand
Oh, okay.
01:07:02 - Scott Steinlage
Okay. Last second. That's all good. You love it.
01:07:07 - Ishan Anand
Speak now or forever hold your peace.
01:07:10 - Scott Steinlage
Or forever hold your peace. Yeah. Andrew, what's up, dude? You're connecting. Everyone can hear him properly, yeah?
01:07:20 - Ishan Anand
Yeah, yeah.
01:07:21 - Scott Steinlage
Hi.
01:07:22 - Andrew
I just wanted... it's not really a question I wanted to ask, but more like a reaction. I heard at the start of this Space, Peter, you mentioned that the way you did that was kind of cheating by using the emulator to run the Postgres. But actually, I think it's not really cheating. It's really just a really innovative way to think about how you want to run something in WASM. Because actually, WebAssembly is still early. I mean, there are a ton of blockers, like as you mentioned, networking and stuff. A lot of stuff just isn't implemented. And if you want to do this kind of thing the right way, like if you want to compile PostgreSQL into pure WebAssembly, it's probably not possible. I mean, if you tell me you will make Postgres run in WebAssembly, we probably would have said you can do that, it will just not build, you know? And so seeing how you did it and how the little tricks have been done, like as you mentioned, using the lazy loading for the file systems, all that kind of stuff, I think it's really, really great.
01:08:55 - Andrew
Like, to me it's amazing. I don't know if it will be used realistically in a day-to-day environment or stuff like that. But anyway, I think it's really good documentation for everyone who wants to start playing with WebAssembly. And I mean it's basically something that I thought was impossible, and now I see that it can be done. Yeah. So I think it's really great what you did.
01:09:35 - Scott Steinlage
Yeah, I love that. Really quick, I just want to piggyback off of that because there's that saying, you know, there was someone who, I can't remember his name, but he broke the record for running the fastest four-minute mile. Yeah, that was it. And so because he ran that four-minute mile, that meant it could be done, right? That it was possible. Right? And so therefore, boom, the next person beat that, and then someone else did it, and someone else did it. So because you've opened this, like you kind of said, Pandora's box kind of thing, potentially, I very much think that's a real thing. If you show that it can be done, now a lot of other things are going to be happening and other people are going to be doing that as well. I love it. So thanks for saying that, Andrew. And Peter, don't you want to say something to it as well, please?
01:10:31 - Peter Pistorius
Yeah, yeah, I agree. I really love the sentiment. And I think if anyone else wants to run anything in a Linux container in WASM and you're struggling, reach out to us. We can try and distill some of the knowledge that we gained to help you do that. We're more than happy to share.
01:10:59 - Ishan Anand
Yeah, it's a huge unlock, as you mentioned. I think in so many directions, Pandora's box has been opened.
01:11:09 - Anthony Campolo
Also, allegedly the first four-minute mile was run in 1770.
01:11:13 - Scott Steinlage
Well, did you know what? Hold on. There we go.
01:11:18 - Anthony Campolo
Yeah, it's not who Scott was referring to, but someone who historically lays claim to it.
01:11:28 - Ishan Anand
They couldn't track time accurately back then.
01:11:32 - Anthony Campolo
The chronometer was just invented, according to the Wikipedia article.
01:11:38 - Ishan Anand
Did you just go and edit Wikipedia to add that in?
01:11:40 - Anthony Campolo
Yeah, right. Yeah, I'm the inventor of the chronometer.
01:11:48 - Ishan Anand
Yeah, but Andrew, I just want to reiterate what you said. It's just amazing, and it's going to be an interesting lesson for the future. So thank you for contributing that reaction. Scott, I'll let you continue where you were leaving off.
01:12:05 - Scott Steinlage
Yeah, no, thank you. And Andrew, thanks so much for stopping us, man. That was really worth it.
01:12:12 - Ishan Anand
Thanks, everyone.
01:12:15 - Scott Steinlage
All right, y'all, thank you so, so much for joining us today. Remember, JavaScript Jam goes live every Wednesday at 12:00 p.m. Pacific Standard Time. Join us here. We have awesome speakers coming up, just like Peter and his crew, and so many more. And maybe we'll have Peter on again in the future. We would love to have him. He's been great and amazing and everything here, and Julian and his team, if they want to feel free to chat it up with us later, we would love that too. Maybe we do more of a traditional podcast, where we record it and go from there, versus live. And it could be edited if you want it to be. Either way, yes. Julian claps his hands. Okay, so I think he might be for that. But yes, thank you all so much for joining us today. Greatly appreciate it. Remember, if you got value from anybody up here on the stage today, please click on their face. Follow them if you're not already, because if you got value from them here, guess what? You're probably going to get value from them elsewhere, right?
01:13:18 - Scott Steinlage
And don't we all want to be a part of the innovators of the world? Come on. Yeah, just follow. It'll be fun. Not just that, we would also love a follow on JavaScript Jam. And like I said before, if you're not in our newsletter already and you don't want to miss out on all the amazing, innovative things coming up in the tech world, JavaScript, and web development, then click on that and go and subscribe as well. We would love for you to be a part of that. Not just that, we love to highlight our community folks in there as well and help promote you guys too. That is all about building everybody else up and creating thought leadership. That's what we're here for and that's what we love doing. So love you guys so, so much. Let's give a big clap and a round of applause and all the hearts and everything to Peter and his gang up here. Yes. Yes, yes. All right. Love it. Fantastic. Cool. Thank you all.
01:14:09 - Anthony Campolo
So many more emojis. Twice as many emojis as before.
01:14:13 - Scott Steinlage
I know, right? There's so many. Oh, this is so good. All right, y'all, thank you so, so much. Greatly appreciate it. And we will see you next week.
01:14:39 - Anthony Campolo
All right,
01:14:42 - Scott Steinlage
we'll see you guys next time.