Local First

[00:00:00]
>> Brian Holt: Let's talk a little bit about local first coz I think it's a really interesting idea and Sqlite and postgres to a different degree are kinda on the forefront of this movement. So there's a local first web.dev, kind of an interesting site with a lot of different there's Kyle from Frontend Masters right there.

[00:00:24]
Nice to see you, Kyle. There's a bunch of articles on here on what local first is. Definitely take a look at that if you're interested. I actually gave a presentation. Let me pull that up. Postgres, this one. I just wanted to show you a slide from this, which was this one.

[00:00:45]
I'll just make it full screen. So, this is what we do now, and this is what I've been showing you how to do, which is there's a front end that makes an API call to a backend. The backend does backend logic and then it stores to your database.

[00:01:03]
And that gives data back to your back end and then that communicates through front end that I would call that the conventional web development flow. The idea behind local first is you have your front end. There is a local copy of your database running in your browser and you're just reading and writing queries to that database, not caring really what happened.

[00:01:24]
So you just save to it and read from it. Save to it and read from it, and then in the background, it's back hauling that data back to your database, right? So if I say update user, my name is now Todd instead of Brian, right? It's gonna accept that locally.

[00:01:41]
And say, hey, front end, I got it. And then behind the scenes, it's gonna be like, okay, hey, Cloud Database, they said that this is what their name is now, right? And then that's gonna get synced back to here. This is saying the local data is going back to the back end.

[00:01:54]
And the scenario that I'm talking about is actually going to the database, right? So it's directly talking to Terso. It's not talking to your back end, which is cool. Why is this interesting? It seems like more steps than what we already have. Well, when you read something locally, it's significantly faster, right?

[00:02:14]
If someone says hey, show me all of the artists, and it's just instant, and it doesn't have to hit any API you're shaving minimum, 200 milliseconds off of that, right? Maximum, several seconds off of that. That's why local first is super compelling to me, is that it makes the user's experience so much better, so much faster.

[00:02:35]
You can literally cut seconds off of the wire, which I think is extremely interesting to me, cool.
>> Brian Holt: So I wanna show you how to do it. Turso has this as like a first class support. Another one that you might look at is ElectricSQL.
>> Brian Holt: This is the same idea, but done with Postgres.

[00:02:59]
So there's something called PG light, which as you might imagine, is similar to SQLite, which is invented at NEON. It's pretty cool company I hear. You write, read, write, locally to a Postgres database that runs in your browser, and then it syncs that to your back end services.

[00:03:16]
That's Postgres as well. So that's another one to keep an eye on. ElectricSQL is its own company that's doing some interesting things, so definitely worth a look there as well.
>> Brian Holt: Okay, so what I wanna do now is we're going to make it so we can run local first in our code here.

[00:03:42]
So I want you to clear here. We're gonna run SQLD.
>> Brian Holt: SQLD, but we have to do it with this --grpc-listen-addr=127.0.0.1:5,001, and that's basically saying, I'm gonna be expecting someone to be syncing with me. Here's my exposed address for doing that.
>> Brian Holt: That should just work, okay?
>> Brian Holt: And then now I want you to go take a look at in your code, invoice stash, local first.

[00:04:32]
>> Brian Holt: Okay, you're gonna see here we have this Create Client. This is the official SDK from turtle that I was talking about. Here you're creating a client, you're giving it the URL where you want to install locally, coz again, local first, you have to give it a file.

[00:04:48]
If you don't give it a file, it's just gonna go directly to the cloud database, which is not what we want right now. We want a local file, we want it to call local data. We're gonna tell it where to sync, which is that GRPC address we gave, port 5001.

[00:05:01]
And sync period is how frequently it up, updates 60. I don't know how frequent that is, but it's the number that was in their doc. So that's what I took and then you say, sync. That's it the end. That's all the code that you have to add to get local first.

[00:05:19]
This is why I find this so compelling, is that it's a good developer experience, this is cool, right? That I only had to do this and it should in theory make our users stuff faster. So openserver.js, I need you to uncomment this line, registerInvoiceLocalFirst, and then this line here, fastify.register, and Invoice local first, okay?

[00:05:44]
You should be able to save that and then here we're gonna say npm run dev. This will start our server.
>> Brian Holt: And you will see here this line here frames synced. I think I had already run this first. Some of you, I imagine most people will see a number here.

[00:06:05]
You might see 581 here or 582 or something like that. You might not as either. But this is basically saying, hey, I pulled this many frames down from the database for you to go ahead and start reading and writing from. Now, you can go to localhost/ what's the,
>> Brian Holt: Localhost/invoicelocalfirst, give it an ID.

[00:06:28]
You'll see everything here is working just fine. Again, same different thing. You can also do invoice. This is the normal one, right? [LAUGH] this is the error that we were getting earlier. Restart your server.
>> Brian Holt: You can go to this one. You can see it's exactly the same, but if I go in here and say, invoice-localfirst, you'll see here exact same thing, but the difference between that.

[00:06:59]
This one that you're seeing here and the other one is that this is all now running locally entirely on what would be your back-end app service, right? As opposed to directly on your database, right? So this is keeping a local copy of your data on your app server, which is making this faster.

[00:07:21]
We could make this even faster in theory by moving this down to our front end, but we're not gonna do that quite yet. The code would look very, very similar to this, though, right? And then we'd be running escalate and WebAssembly and so on and so forth.
>> Brian Holt: Does that make sense?

[00:07:38]
You're not gonna notice speed up and speed because we were already doing this locally, right? But a user would not have an extra round trip to your database, which is what makes that compelling. This probably needs to be a whole course on local first. If we're being honest, I think it's really bleeding edge, but there's compelling value in that much speed up.

[00:07:59]
So I think it might be a thing that catches on.