1 00:00:00,000 --> 00:00:03,959 And so you're like, Hey, API, give me the data from my widgets. 2 00:00:04,564 --> 00:00:05,314 And then I render it. 3 00:00:05,394 --> 00:00:10,024 So it's sort of an imperative step, kind of like manually telling the client, 4 00:00:10,034 --> 00:00:11,314 tells the server, give me that thing. 5 00:00:12,024 --> 00:00:17,064 Where sync engines, it's a a move from an imperative to declarative. 6 00:00:17,074 --> 00:00:21,785 So instead of saying, give me that data, it's sort of like for this page, 7 00:00:22,125 --> 00:00:25,838 I declare, I need this data and then the sync engine makes it so, often 8 00:00:25,838 --> 00:00:28,638 run into the problem where like, just like sort of getting data is easy, 9 00:00:28,638 --> 00:00:30,538 but subscribing to updates is hard. 10 00:00:30,925 --> 00:00:33,205 Welcome to the local-first FM podcast. 11 00:00:33,455 --> 00:00:36,285 I'm your host, Johannes Schickling, and I'm a web developer, a 12 00:00:36,285 --> 00:00:39,384 startup founder, and love the craft of software engineering. 13 00:00:39,845 --> 00:00:43,535 For the past few years, I've been on a journey to build a modern, high quality 14 00:00:43,535 --> 00:00:45,595 music app using web technologies. 15 00:00:45,925 --> 00:00:50,115 And in doing so, I've been falling down the rabbit hole of local-first Software. 16 00:00:50,565 --> 00:00:53,675 This podcast is your invitation to join me on that journey. 17 00:00:54,345 --> 00:00:58,535 In today's episode, I'm speaking to Kyle Matthews, who's in the past 18 00:00:58,545 --> 00:01:00,085 has been the founder of Gatsby. 19 00:01:00,085 --> 00:01:03,075 js and is now exploring local-first software. 20 00:01:03,665 --> 00:01:07,984 In our conversation, Kyle shares his experience building some small scale 21 00:01:08,264 --> 00:01:12,905 local-first apps for his personal use and how using a data syncing engine 22 00:01:12,955 --> 00:01:15,035 frees up a lot of his development time. 23 00:01:15,845 --> 00:01:19,485 Before getting started, also a big thank you to Expo and Crabnebula 24 00:01:19,515 --> 00:01:20,884 for supporting this podcast. 25 00:01:21,425 --> 00:01:23,325 And now my interview with Kyle. 26 00:01:24,035 --> 00:01:25,665 Hey, Kyle, welcome to the show. 27 00:01:25,665 --> 00:01:26,285 How are you doing? 28 00:01:26,995 --> 00:01:27,755 Uh, doing great. 29 00:01:27,865 --> 00:01:28,635 Uh, glad to be here. 30 00:01:29,195 --> 00:01:30,955 Thank you so much for, for coming on. 31 00:01:31,255 --> 00:01:34,125 You're another fellow early Local-Firster. 32 00:01:34,235 --> 00:01:37,645 So I'm very curious to hear about your background and then hear 33 00:01:37,645 --> 00:01:39,334 about what led you to Local-First. 34 00:01:39,670 --> 00:01:44,100 So, uh, I've been doing web development of various sorts 35 00:01:44,110 --> 00:01:46,420 for like the last 15 plus years. 36 00:01:46,430 --> 00:01:50,279 I've seen a lot along that way, you know, like the whole jQuery era, did Backbone. 37 00:01:50,290 --> 00:01:55,310 js for those who read history books and, you know, it was early React, GraphQL. 38 00:01:55,419 --> 00:01:56,470 I actually started with Drupal. 39 00:01:57,070 --> 00:02:00,230 Funny fact, Drupal, Drupal was big back in 2000, still widely used, but 40 00:02:00,460 --> 00:02:04,120 people are like a little more expansive about their view of Drupal back then. 41 00:02:04,120 --> 00:02:06,469 Then switched to kind of JavaScript, single page apps, 42 00:02:06,469 --> 00:02:08,340 like really early 2010 ish. 43 00:02:08,500 --> 00:02:10,350 And, uh, yeah, I've been kind of writing that ever since. 44 00:02:10,679 --> 00:02:15,760 Yeah, then, then of course, uh, Gatsby 2015 introduced that, uh, which kind 45 00:02:15,760 --> 00:02:19,440 of like, Took react and it was sort of the first proper production ready, 46 00:02:19,700 --> 00:02:21,540 you know, react, uh, meta framework. 47 00:02:21,680 --> 00:02:25,210 And so kind of rode the whole react, uh, wave for a long time. 48 00:02:25,560 --> 00:02:32,069 But yeah, in general, my interest is what are the tools we use to build software? 49 00:02:32,110 --> 00:02:34,404 Cause like, I think software is very important and. 50 00:02:34,765 --> 00:02:37,625 The quality of the tools that we use determine the quality 51 00:02:37,625 --> 00:02:39,685 of the software that results. 52 00:02:39,935 --> 00:02:41,365 We shape our abilities and our ability to shape us. 53 00:02:41,385 --> 00:02:44,005 It's sort of like we, we, we shape our tools and then the 54 00:02:44,005 --> 00:02:45,135 tools shape everything else. 55 00:02:45,215 --> 00:02:48,135 Cause I think there's really like high leverage to kind of 56 00:02:48,444 --> 00:02:49,785 continually pondering that question. 57 00:02:49,875 --> 00:02:55,255 Cause if we can genuinely move to a genuinely better tool, then 58 00:02:55,265 --> 00:02:59,410 there's enormous Effects that result from that, not just in our actual 59 00:02:59,410 --> 00:03:02,200 day to day life, but like, you know, we're a software creators. 60 00:03:02,200 --> 00:03:05,260 Like there's a lot, a lot of people whose lives are affected by software. 61 00:03:05,450 --> 00:03:08,630 So yeah, I've seen like genuinely better tools emerged in sort 62 00:03:08,630 --> 00:03:09,489 of my, my software career. 63 00:03:09,489 --> 00:03:11,940 So like, I think react was a massive step forward. 64 00:03:12,000 --> 00:03:15,440 I think Grackula was a smaller step forward, but also a genuine step forward. 65 00:03:15,620 --> 00:03:18,830 And I feel like, you know, local-first, it feels like this is 66 00:03:19,150 --> 00:03:20,844 another sort of massive step forward. 67 00:03:20,935 --> 00:03:23,195 Leap forward, um, and how we build software. 68 00:03:23,395 --> 00:03:27,035 And I think it's something that in the coming years, more and more software 69 00:03:27,105 --> 00:03:29,065 will be kind of built in this fashion. 70 00:03:29,445 --> 00:03:30,475 I definitely agree. 71 00:03:30,535 --> 00:03:36,104 I mean, uh, I'm also definitely a connoisseur of good tools, but luckily 72 00:03:36,104 --> 00:03:41,565 there's a lot of good tools and many different areas of development overall. 73 00:03:41,575 --> 00:03:42,174 Like you just. 74 00:03:42,535 --> 00:03:44,125 You can also look at other language ecosystems. 75 00:03:44,895 --> 00:03:49,125 I'm definitely very interested and inspired by all the good stuff that's 76 00:03:49,125 --> 00:03:53,825 happening in the Rust ecosystem, but also super cool ideas that you find in 77 00:03:53,854 --> 00:03:58,155 other ecosystems, such as like the Elixir ecosystem with live views, et cetera. 78 00:03:58,185 --> 00:04:03,704 So there's like a lot of great tools and great ideas, uh, in all of those places. 79 00:04:03,705 --> 00:04:08,545 But I'm curious, which sort of problems have you experienced 80 00:04:08,545 --> 00:04:11,024 in the past that has led you. 81 00:04:11,175 --> 00:04:15,535 To, to local-first in particular, and where you now see a different approach, 82 00:04:15,595 --> 00:04:17,455 how to deal with those with local-first. 83 00:04:17,845 --> 00:04:20,165 You could sort of think of like client server development, 84 00:04:20,165 --> 00:04:21,624 there's sort of three problems. 85 00:04:21,625 --> 00:04:25,625 There's sort of the UI, like how do we construct the UI? 86 00:04:25,635 --> 00:04:28,295 How do we do interactivity, charting stuff? 87 00:04:28,324 --> 00:04:31,115 So there's a lot of like different areas within like the UI and then 88 00:04:31,115 --> 00:04:32,345 there's sort of backend problems. 89 00:04:32,345 --> 00:04:34,725 There's a lot of like complicated computing bits. 90 00:04:34,755 --> 00:04:37,805 There's like, how do you run infrastructure at scale? 91 00:04:38,074 --> 00:04:38,925 How do you. 92 00:04:39,265 --> 00:04:40,255 Make things efficient. 93 00:04:40,265 --> 00:04:44,385 So you're not like, you know, spending enormous amounts of money, uh, security. 94 00:04:44,525 --> 00:04:47,265 There's endless domains of problems in the backend. 95 00:04:47,624 --> 00:04:51,555 Um, and then there's kind of like the middle bits, which is like state transfer. 96 00:04:51,555 --> 00:04:54,134 Like, how do you move bytes back and forth? 97 00:04:54,364 --> 00:04:57,254 Cause generally the client can't hold all the data. 98 00:04:57,255 --> 00:04:59,955 So you have to like, say, I need part of the data to be pulled over. 99 00:05:00,285 --> 00:05:03,865 And like, generally things are changing to like, how do you get that data from 100 00:05:03,865 --> 00:05:06,035 the server to the client and so on? 101 00:05:06,244 --> 00:05:07,185 And so there's a lot of. 102 00:05:07,460 --> 00:05:10,280 Problems around moving state back and forth. 103 00:05:10,360 --> 00:05:11,570 And so, yeah, so I think I'll go first. 104 00:05:11,570 --> 00:05:16,660 It's interesting because I feel like the front end and the backend, there's been 105 00:05:16,660 --> 00:05:21,120 just enormous number of innovations, both sides, all the investment and, 106 00:05:21,149 --> 00:05:26,340 and, and react it's felt and solid and view, uh, and like VEET and Webpack. 107 00:05:26,340 --> 00:05:30,230 And there's just like enormous investment that's gone into making the front 108 00:05:30,230 --> 00:05:32,170 end experience dramatically better. 109 00:05:32,170 --> 00:05:35,495 Plus all the, you know, all the libraries, there's like NPM has like Millions 110 00:05:35,495 --> 00:05:36,635 of libraries or something like that. 111 00:05:36,635 --> 00:05:36,995 I don't know. 112 00:05:36,995 --> 00:05:40,695 Like each of those things is just like enormous effort from individuals 113 00:05:40,705 --> 00:05:42,325 and groups all across the world. 114 00:05:42,585 --> 00:05:46,164 And it's made the UI world dramatically better place. 115 00:05:46,165 --> 00:05:50,944 Like it's, it's just remarkable to me how much faster it is to build. 116 00:05:51,425 --> 00:05:54,045 Amazing stuff versus like 15 years ago. 117 00:05:54,045 --> 00:05:58,195 Like I, the first like big JavaScript dashboard I built, it took me like 118 00:05:58,225 --> 00:06:01,415 six months to ship the first version, partly because I wasn't a very good 119 00:06:01,415 --> 00:06:05,485 programmer, but partly because like, there was just like no guidance anywhere. 120 00:06:05,524 --> 00:06:08,275 Now there's just like endless starters, endless use cases. 121 00:06:08,335 --> 00:06:11,344 Like React is such a compact, simple abstraction. 122 00:06:11,484 --> 00:06:12,794 It's dramatically better. 123 00:06:12,794 --> 00:06:14,915 And that's because there's been like tons of innovation there. 124 00:06:15,015 --> 00:06:18,884 And the backend too, there's like all the cloud giants are pouring tons of research 125 00:06:18,885 --> 00:06:20,785 into stuff and there's like tons of. 126 00:06:21,380 --> 00:06:24,050 Individual cloud services where before you're like, Hey, that's 127 00:06:24,050 --> 00:06:24,950 three months of programming. 128 00:06:24,950 --> 00:06:28,340 And now it's like two hours to implement an API and off you go. 129 00:06:28,610 --> 00:06:31,730 So there's been lots of innovations too in the back end, but yeah, the state 130 00:06:31,730 --> 00:06:36,070 transfer bit, like the, you know, moving bits back and forth hasn't really, I 131 00:06:36,070 --> 00:06:38,410 don't know, got as much investment. 132 00:06:38,520 --> 00:06:38,880 Partly. 133 00:06:38,880 --> 00:06:40,560 I think it's like, it's not always a problem. 134 00:06:40,610 --> 00:06:40,940 Often. 135 00:06:40,940 --> 00:06:41,780 It's pretty simple. 136 00:06:42,170 --> 00:06:44,585 You know, if you're just sort of like, Building a dashboard. 137 00:06:44,585 --> 00:06:47,855 You're like, get me the data for the dashboard, render the data. 138 00:06:48,085 --> 00:06:52,574 It's not a very complicated problem oftentimes, but I think what we're seeing 139 00:06:52,575 --> 00:06:57,975 is that we're like the best teams, the best apps investing disproportionately 140 00:06:58,255 --> 00:07:01,425 their time compared to everyone else, because that's kind of where, where the 141 00:07:01,425 --> 00:07:04,945 best teams see a kind of an advantage that they can like build something 142 00:07:04,945 --> 00:07:06,515 significantly better than other people. 143 00:07:06,865 --> 00:07:09,615 And so what I think you're seeing now is like the best. 144 00:07:10,155 --> 00:07:13,795 Apps in the industry, you know, like the Figmas, the Linear, Superhumans, 145 00:07:13,795 --> 00:07:19,165 et cetera, they're pointing now towards sort of state transfer, like, how 146 00:07:19,165 --> 00:07:21,295 do you load your app extremely fast? 147 00:07:21,295 --> 00:07:22,905 Because everything's cached locally. 148 00:07:23,125 --> 00:07:26,265 How do you have real time sync between, you know, different people? 149 00:07:26,294 --> 00:07:28,504 So you can build like, rich collaborative experiences. 150 00:07:28,794 --> 00:07:32,445 How do you, you know, save locally and then sync backwards? 151 00:07:32,475 --> 00:07:35,765 So you're not like, Doing little spinners all the time when you save stuff. 152 00:07:35,765 --> 00:07:37,385 So it's like always fluid and fast. 153 00:07:37,695 --> 00:07:41,475 And they're all kind of arriving at the same idea, which is like, Hey, this 154 00:07:41,475 --> 00:07:46,084 whole like rest, you know, like posting things back and forth, pushing bites 155 00:07:46,084 --> 00:07:51,894 around manually, doesn't cut it anymore to build like really complicated, amazing 156 00:07:51,914 --> 00:07:54,184 apps, you need a higher abstraction. 157 00:07:54,194 --> 00:07:56,864 You need something more sophisticated for. 158 00:07:57,170 --> 00:08:00,750 Handling that state transfer and, and that's sort of like this local-first and, 159 00:08:00,750 --> 00:08:03,880 or, you know, like sync engines, it's kind of like the component that sort of 160 00:08:03,880 --> 00:08:07,599 handles that, that state transfer back and forth between the client and server. 161 00:08:08,059 --> 00:08:09,130 That's super interesting. 162 00:08:09,130 --> 00:08:12,980 So you, you mentioned the term sync engine that, that might be not 163 00:08:12,980 --> 00:08:15,470 familiar with everyone in the audience. 164 00:08:15,749 --> 00:08:18,910 So could you elaborate a little bit what a sync engine is 165 00:08:18,950 --> 00:08:21,610 and how that might relate to. 166 00:08:21,900 --> 00:08:24,140 The, the approaches that you've mentioned before. 167 00:08:24,590 --> 00:08:29,160 I feel like it's the best term for uniting a bunch of different 168 00:08:29,340 --> 00:08:30,529 tools and their approaches. 169 00:08:30,709 --> 00:08:36,969 But yeah, the basic idea is that REST API, Grackle API, TRPC, whatever. 170 00:08:37,270 --> 00:08:40,880 They're all based around rendering a page for widgets. 171 00:08:40,880 --> 00:08:41,900 It's a widget page. 172 00:08:42,320 --> 00:08:46,280 And so you're like, Hey, API, give me the data from my widgets. 173 00:08:46,885 --> 00:08:47,635 And then I render it. 174 00:08:47,715 --> 00:08:52,345 So it's sort of an imperative step, kind of like manually telling the client, 175 00:08:52,355 --> 00:08:53,635 tells the server, give me that thing. 176 00:08:54,345 --> 00:08:59,384 Where sync engines, it's a a move from an imperative to declarative. 177 00:08:59,395 --> 00:09:04,105 So instead of saying, give me that data, it's sort of like for this page, 178 00:09:04,445 --> 00:09:08,488 I declare, I need this data and then the sync engine makes it so, and often 179 00:09:08,488 --> 00:09:11,288 run into the problem where like, just like sort of getting data is easy, 180 00:09:11,288 --> 00:09:13,188 but subscribing to updates is hard. 181 00:09:13,488 --> 00:09:16,648 Like everyone kind of notices there's a massive gulf and 182 00:09:16,648 --> 00:09:18,518 difficulty between those two things. 183 00:09:18,918 --> 00:09:23,258 And so what's cool about sync engines is that because it's sort of more of a 184 00:09:23,258 --> 00:09:27,548 declarative step, there's actually no additional complexity to get subscription. 185 00:09:27,678 --> 00:09:28,718 This guy is the same thing. 186 00:09:28,718 --> 00:09:30,158 You're just saying, I need this data. 187 00:09:30,428 --> 00:09:31,558 And then the data shows up. 188 00:09:31,678 --> 00:09:34,888 It's a new abstraction for how data. 189 00:09:35,513 --> 00:09:39,263 Arise on the client where, yeah, again, you're going from imperative to just 190 00:09:39,263 --> 00:09:42,923 being like, you're describing the shape of data that you need to show 191 00:09:42,923 --> 00:09:45,133 up on your site for a particular page. 192 00:09:45,183 --> 00:09:46,553 I know another good analogy. 193 00:09:46,683 --> 00:09:51,043 It's very similar to shift from like jQuery to react where jQuery, you're like, 194 00:09:51,133 --> 00:09:54,623 get this DOM element and tweak the text. 195 00:09:55,063 --> 00:10:00,783 Or get this DOM element, remove the child, construct two other children, drop it in. 196 00:10:00,833 --> 00:10:03,303 You're like a little kid playing with like blocks or something. 197 00:10:03,313 --> 00:10:06,403 And you're like, you're like fiddling all the time, which was actually fun. 198 00:10:06,403 --> 00:10:07,163 I actually enjoyed it. 199 00:10:07,223 --> 00:10:10,693 It was a fun little challenge, but it's a huge waste of time where, you know, we're 200 00:10:10,693 --> 00:10:13,923 moved to React and React is more like, I don't know, I want it to look like this 201 00:10:13,983 --> 00:10:17,373 and just sort of happens somehow, like React does a bunch of weird magic under 202 00:10:17,373 --> 00:10:20,953 the hood and it just kind of efficiently somehow shifts everything around. 203 00:10:21,388 --> 00:10:23,038 Uh, without tearing and voila, it's there. 204 00:10:23,168 --> 00:10:24,248 You're like, cool, it's there. 205 00:10:24,318 --> 00:10:26,158 And yeah, that's just a lot less to think about. 206 00:10:26,158 --> 00:10:28,708 When you're just like, I want something to be so, and I don't really 207 00:10:28,708 --> 00:10:30,248 care about the complicated details. 208 00:10:30,488 --> 00:10:32,258 That's a lot less to think about. 209 00:10:32,408 --> 00:10:33,568 Which is the value of abstraction? 210 00:10:33,568 --> 00:10:35,898 Because we, we have a finite amount of things we can think about. 211 00:10:35,898 --> 00:10:40,458 So, if we drop two, then we can like, replace it with, Two other stuff instead. 212 00:10:40,508 --> 00:10:43,068 So if you drop a lot of thinking about state transfer, then you have more 213 00:10:43,068 --> 00:10:44,728 time to think about other things. 214 00:10:44,948 --> 00:10:50,268 So you've now explained a little bit, the benefits of a sync engine and 215 00:10:50,268 --> 00:10:51,898 that it simplifies a lot of things. 216 00:10:51,918 --> 00:10:56,468 But for someone who's now like curious, how does this actually work? 217 00:10:56,548 --> 00:11:00,338 Can you explain what a sync engine does and how it does it? 218 00:11:01,068 --> 00:11:03,958 I'll, I'll use an example for the one that I've used the most electric SQL. 219 00:11:04,288 --> 00:11:09,593 So electric SQL is sort of Postgres based and you have, you know, Your tables 220 00:11:09,663 --> 00:11:13,683 and basically the shape is like kind of declared like this is the shape of data. 221 00:11:13,683 --> 00:11:14,143 I want polar. 222 00:11:14,143 --> 00:11:15,363 It's just like a sequel query. 223 00:11:15,373 --> 00:11:16,473 So you're just like, I want. 224 00:11:16,883 --> 00:11:20,493 this table and rows that match this criteria. 225 00:11:20,543 --> 00:11:23,943 And then the sync engine kind of like takes that and then it says like, okay, 226 00:11:24,013 --> 00:11:28,873 I will send you sort of the initial bunch and then any updates that I see from then 227 00:11:28,873 --> 00:11:30,683 on that match that shape off it goes. 228 00:11:30,833 --> 00:11:31,473 That makes sense. 229 00:11:31,483 --> 00:11:35,613 So, and this would be one particular example, one particular technology 230 00:11:35,633 --> 00:11:40,163 for when your starting point is an existing Postgres database. 231 00:11:40,203 --> 00:11:42,953 So is that the way how I should think about it? 232 00:11:42,963 --> 00:11:48,563 That like I have my And like traditional way of how I'm dealing with data in 233 00:11:48,563 --> 00:11:53,143 a more global state, for example, Postgres, and then I'll just slap 234 00:11:53,173 --> 00:11:57,613 a sync engine on top of it, connect my clients to it and off I go. 235 00:11:57,683 --> 00:12:01,633 In theory, in practice, all these tools are like, this 236 00:12:01,633 --> 00:12:03,453 whole space is pretty new still. 237 00:12:03,463 --> 00:12:06,613 So I think that's sort of the platonic ideal that everyone's working towards 238 00:12:06,613 --> 00:12:09,163 is like, you just sort of slap a sync engine on and off you go. 239 00:12:09,223 --> 00:12:10,063 And that does work. 240 00:12:10,308 --> 00:12:14,408 In some parts, you know, all these tools are like, there's some limitations 241 00:12:14,408 --> 00:12:17,438 that you have to kind of live with and that they're working to, to lift, but 242 00:12:17,528 --> 00:12:21,158 there's understandably a decent bit of complexity to kind of like take this 243 00:12:21,278 --> 00:12:26,018 30 year old, whatever old Postgres is technology and toss a new thing onto it. 244 00:12:26,068 --> 00:12:28,828 As long as you live within the abstraction, I kind of, or live within 245 00:12:28,828 --> 00:12:31,298 sort of the existing limitations, then yes, that is actually the very, 246 00:12:31,298 --> 00:12:33,618 very most of the reality I've been building, like a number of sort of 247 00:12:33,668 --> 00:12:37,118 toy stuff, both to play with this local-first approach, Sinkage approach. 248 00:12:37,403 --> 00:12:41,603 But also, you know, exploring a number of other things and it is like very simple. 249 00:12:41,603 --> 00:12:47,103 You just say like new table and then it creates a client side library. 250 00:12:47,133 --> 00:12:48,523 Kind of like very Prisma esque. 251 00:12:48,693 --> 00:12:50,573 Uh, actually they're still using, I think, Prisma under 252 00:12:50,573 --> 00:12:51,873 the hood to generate the client. 253 00:12:52,053 --> 00:12:54,393 And then you just immediately just start reading and writing 254 00:12:54,723 --> 00:12:56,683 from like the local SQLite. 255 00:12:56,683 --> 00:12:58,873 So because they use Postgres in the back end and then SQLite. 256 00:13:00,028 --> 00:13:01,518 It's very straightforward. 257 00:13:01,518 --> 00:13:05,358 Just like write a query and data's there, do an insert off it goes. 258 00:13:05,588 --> 00:13:08,948 So I can't promise it'll work for like, yeah, anything will just work. 259 00:13:08,998 --> 00:13:12,108 But if you're living within sort of the current restriction, it is 260 00:13:12,108 --> 00:13:13,338 very much a magical experience. 261 00:13:13,438 --> 00:13:14,208 That sounds great. 262 00:13:14,228 --> 00:13:19,078 And I think there is a lot of different approaches, how a sync system could work. 263 00:13:19,368 --> 00:13:23,828 We've also learned a bit about auto merge in previous episodes, but I'm curious to 264 00:13:23,828 --> 00:13:28,468 hear more about your experiences building apps with the stack that you've mentioned, 265 00:13:28,808 --> 00:13:33,088 can you tell a bit more about the apps that you've tried those new approaches? 266 00:13:33,838 --> 00:13:34,508 Uh, yeah. 267 00:13:34,598 --> 00:13:36,488 I mean, none of these apps have been, we've all been for like 268 00:13:36,518 --> 00:13:39,728 personal use, so they're not like anything earth shattering. 269 00:13:40,558 --> 00:13:41,808 The most kind of. 270 00:13:42,168 --> 00:13:46,368 Complicated one is a one I'm just actually finishing up and my wife had been 271 00:13:46,368 --> 00:13:48,318 working on it and it's like a kitchen AI. 272 00:13:49,188 --> 00:13:54,328 So basically you, you can like take a photo of different ingredients in 273 00:13:54,328 --> 00:13:57,658 your kitchen and then the AI will then sort of like convert those into 274 00:13:57,688 --> 00:14:01,718 ingredients in the store and then you can set like, what is the fill level? 275 00:14:01,728 --> 00:14:02,818 When's the expiration date? 276 00:14:03,143 --> 00:14:07,873 And then when you want to go do, do a recipe, you can upload, like 277 00:14:07,873 --> 00:14:10,073 you kind of copy and paste the recipe into it and it kind of like 278 00:14:10,103 --> 00:14:12,773 parses out all of the ingredients. 279 00:14:12,823 --> 00:14:14,993 And then what's interesting is like, it's actually kind of like ingredient 280 00:14:15,043 --> 00:14:17,703 or recipes all kind of describe ingredients slightly differently. 281 00:14:17,703 --> 00:14:19,803 So like just doing like a naive matching or something. 282 00:14:20,143 --> 00:14:23,763 You won't actually work, but then, so I'm using like embeddings to, to 283 00:14:24,103 --> 00:14:28,073 kind of do a more fuzzy semantic match between the ingredients in the kitchen 284 00:14:28,073 --> 00:14:29,363 and like the recipe ingredients. 285 00:14:29,643 --> 00:14:32,173 And so then I'll say like, Hey, here's all the ingredients you have. 286 00:14:32,173 --> 00:14:35,163 Here's the ones you need to buy, but also sort of like tell you, it's 287 00:14:35,163 --> 00:14:36,333 like, Oh, Hey, you're running low. 288 00:14:36,333 --> 00:14:38,683 You should double check if you have enough of this one, or, Oh, this 289 00:14:38,683 --> 00:14:41,713 one is like expired, so you should probably just get some new spice. 290 00:14:41,723 --> 00:14:44,863 So you're, you're, cause the old one doesn't taste very good anymore. 291 00:14:45,153 --> 00:14:45,473 Anyways. 292 00:14:45,473 --> 00:14:46,843 And then it's sort of a one click. 293 00:14:47,158 --> 00:14:50,428 You know, create a shopping list with, uh, we're using Trello. 294 00:14:50,478 --> 00:14:52,518 So just sort of like sends it off to Trello. 295 00:14:52,728 --> 00:14:55,648 Another cool thing that we did is like, we just give it an enum 296 00:14:55,708 --> 00:14:57,658 of sections in the grocery store. 297 00:14:57,658 --> 00:15:01,228 So it's like, there's meat and seafood and dairy and produce 298 00:15:01,258 --> 00:15:02,578 and canned goods and stuff. 299 00:15:02,778 --> 00:15:07,148 And so then each ingredient is coded to one of those sections. 300 00:15:07,528 --> 00:15:10,378 And so then when you go to the store, you have this like neat list of. 301 00:15:11,048 --> 00:15:14,528 Uh, the different things, so it's actually pretty fun to use. 302 00:15:14,588 --> 00:15:17,358 Uh, it'd be pretty fun to build, but, but yeah, so, so the actual 303 00:15:17,358 --> 00:15:20,618 process of building it is, you know, the local-first stuff, the electric 304 00:15:20,658 --> 00:15:24,058 SQL stuff is defining my schema. 305 00:15:24,058 --> 00:15:26,358 Well, another cool thing about all this too, is it's very data centric. 306 00:15:26,803 --> 00:15:31,733 I've noticed a big shift in how I build stuff now versus before is it 307 00:15:31,733 --> 00:15:35,263 used to be steady at the back end and like the database, everything was like 308 00:15:35,403 --> 00:15:40,183 annoyingly complicated that I just sort of delayed it until I was sort 309 00:15:40,183 --> 00:15:41,623 of more or less finished prototyping. 310 00:15:41,643 --> 00:15:45,113 So what I would do is like, just keep all the data in memory in the 311 00:15:45,113 --> 00:15:48,713 browser and then build the UI, try a bunch of stuff and just kind of like. 312 00:15:48,978 --> 00:15:51,188 Have a little JavaScript rays and objects, you know, whatever. 313 00:15:51,348 --> 00:15:53,518 And then finally I was like, okay, now I kind of like know what my 314 00:15:53,518 --> 00:15:54,908 data structure is and everything. 315 00:15:55,148 --> 00:15:57,798 And now I'll just actually set up the database and start 316 00:15:57,798 --> 00:15:58,858 persisting it and whatever. 317 00:15:59,218 --> 00:16:03,788 But now it's like so easy with electric SQL to kind of. 318 00:16:04,188 --> 00:16:07,598 Set up the database and have a client and have everything syncing that like, 319 00:16:08,008 --> 00:16:12,338 like the very first thing I do is write my crate, you know, table stuff and, 320 00:16:12,378 --> 00:16:15,488 and, and I have the tables and which is a huge improvement because it's very 321 00:16:15,488 --> 00:16:20,198 nice having a fully typed database, you know, I, because you have all the 322 00:16:20,198 --> 00:16:23,808 Postgres stuff you can like, you know, pull up PSQL and start writing queries and 323 00:16:24,178 --> 00:16:25,888 anyways, there's a lot of power you get. 324 00:16:26,163 --> 00:16:29,593 For free and you have like type checking, you have, you 325 00:16:29,593 --> 00:16:31,343 know, foreign key constraints. 326 00:16:31,363 --> 00:16:33,953 So you have kind of all these nice things that database give you from 327 00:16:33,953 --> 00:16:36,063 day one while you're just prototyping. 328 00:16:36,163 --> 00:16:38,583 Normally what I do when I'm prototyping is I just blowing 329 00:16:38,583 --> 00:16:39,753 away the database and restarting. 330 00:16:39,823 --> 00:16:43,103 But that again is like 30 seconds or something, um, to do. 331 00:16:43,213 --> 00:16:48,343 It's also quite fun to like chat GPT is like great at like, Creating SQL. 332 00:16:48,353 --> 00:16:51,143 So I use that a ton when I prototype and I just sort of like, just kind of 333 00:16:51,143 --> 00:16:55,213 freehand describe all the data I need, like, and then it spits out, you know, 334 00:16:55,213 --> 00:16:59,083 like five create table statements and I just like pop it in and off I go. 335 00:16:59,233 --> 00:17:00,433 It's very, very productive. 336 00:17:00,533 --> 00:17:05,113 Uh, and it's quite fun just to have a full blown typed database 337 00:17:05,153 --> 00:17:10,163 backed, you know, SQL first reactive system while you're prototyping. 338 00:17:10,243 --> 00:17:10,443 Yeah. 339 00:17:10,443 --> 00:17:12,903 It's both like a very productive prototyping system, but what's 340 00:17:12,903 --> 00:17:15,113 genius about, of course, about the whole thing is like your prototype. 341 00:17:15,588 --> 00:17:17,328 That is immediately your production system too. 342 00:17:17,338 --> 00:17:20,238 Cause I can just like, as soon as I'm done, like, I don't have to like, 343 00:17:20,308 --> 00:17:23,818 fix up a bunch of data problems cause it's, it's been good from the get go. 344 00:17:23,908 --> 00:17:26,128 I just ship it and, and it works perfectly. 345 00:17:26,128 --> 00:17:29,038 And I'm not like, Oh no, I have all this like crap data now that's 346 00:17:29,038 --> 00:17:30,288 accumulated production system. 347 00:17:30,328 --> 00:17:32,808 I took all these shortcuts, you know, to like work on my prototype. 348 00:17:32,808 --> 00:17:34,858 It's just like, it's just, you have all the database 349 00:17:34,868 --> 00:17:36,598 guarantees from, from the get go. 350 00:17:36,918 --> 00:17:38,318 I, I love that story. 351 00:17:38,388 --> 00:17:43,228 I think this is so powerful and the analogy you've provided before 352 00:17:43,248 --> 00:17:46,868 in terms of going from jQuery where you have to do everything manually 353 00:17:46,898 --> 00:17:51,428 to React freeing you up to no longer having to do all of this manually. 354 00:17:51,728 --> 00:17:55,923 Now that really makes sense to me because now you could like you've, you've 355 00:17:56,203 --> 00:18:00,893 mentioned a few of like the, the new, like AI aspects of this, or that the app 356 00:18:01,113 --> 00:18:03,753 is an app just for you and your wife. 357 00:18:03,823 --> 00:18:05,083 And that's totally fine. 358 00:18:05,093 --> 00:18:10,223 Like you're basically now freed up by so much data wrangling of before you 359 00:18:10,223 --> 00:18:14,673 would need to like maybe set up a GraphQL endpoint, a REST endpoint, and you'd 360 00:18:14,693 --> 00:18:20,483 spend so much time just to have all the, the data moving stuff taken care of. 361 00:18:20,823 --> 00:18:25,093 And if that now just works in the same way as React. 362 00:18:25,403 --> 00:18:29,443 Automatically working and keeping your views up to date. 363 00:18:29,483 --> 00:18:35,243 And now if we elevate to the next level of Muslow's hierarchy of, of needs 364 00:18:35,243 --> 00:18:39,483 for, for app development, and we have the data automatically taken care of 365 00:18:39,493 --> 00:18:44,443 now, you can focus actually on what makes the, the app fun and unique. 366 00:18:44,443 --> 00:18:46,253 So that makes a lot of sense. 367 00:18:46,273 --> 00:18:49,443 And I love your anecdotes there of that. 368 00:18:49,453 --> 00:18:52,053 You don't no longer need to think about. 369 00:18:52,463 --> 00:18:55,313 There's this like, it's kind of like stage one, everything 370 00:18:55,313 --> 00:18:57,383 is crap in prototyping mode. 371 00:18:57,423 --> 00:19:00,583 And then at some point you need to make it real and production mode. 372 00:19:01,013 --> 00:19:04,593 But with react, you also don't really distinguish too much about 373 00:19:04,613 --> 00:19:08,933 like, Oh, am I now writing this for production or for, for prototyping? 374 00:19:09,543 --> 00:19:10,763 You're just doing it right. 375 00:19:10,813 --> 00:19:12,243 And it's easy from the get go. 376 00:19:12,643 --> 00:19:16,243 And if you get the same thing for data, that's super powerful. 377 00:19:16,273 --> 00:19:16,973 So I love that. 378 00:19:17,683 --> 00:19:20,823 Yeah, that's actually, that's probably a good analogy is like, How 379 00:19:20,993 --> 00:19:25,723 powerful, how good a quality is, is some part of your stack as if, if 380 00:19:25,723 --> 00:19:29,813 the prototyping is the same as like production, like there's no difference. 381 00:19:30,223 --> 00:19:33,783 Just another random tool I've been using lately, like SST. 382 00:19:33,843 --> 00:19:36,553 I don't know if you've played with that, but they have sort of their live. 383 00:19:36,848 --> 00:19:39,148 Development, uh, Lambda function. 384 00:19:39,198 --> 00:19:43,868 And it's like killer because you develop against an actual Lambda and they kind 385 00:19:43,868 --> 00:19:48,258 of like intercept the call to the Lambda function and send it to your like laptop. 386 00:19:48,308 --> 00:19:51,278 So you kind of have like debugging logs and everything, but your, 387 00:19:51,298 --> 00:19:54,648 everything is actually, Running in, in the cloud and it's like 388 00:19:54,648 --> 00:19:56,148 going to S3 buckets and everything. 389 00:19:56,148 --> 00:19:59,148 So it's like the development environment is the same as your 390 00:19:59,148 --> 00:20:01,428 production environment, um, which is like pretty hard to do. 391 00:20:01,458 --> 00:20:06,558 Otherwise going from dev to production with SST is like, there is no difference. 392 00:20:06,608 --> 00:20:10,528 Like you, it's the same stack, but the react, it's like, if your components 393 00:20:10,528 --> 00:20:12,518 are good for development, they're going to be efficient production. 394 00:20:12,528 --> 00:20:15,208 And yeah, with electric SQL, like it works in dev is going to work in product. 395 00:20:15,228 --> 00:20:16,618 So yeah, which is, which is awesome. 396 00:20:16,873 --> 00:20:17,443 That's great. 397 00:20:17,543 --> 00:20:21,583 I would love to, to hear a bit more about the details of how you've built this app. 398 00:20:21,963 --> 00:20:26,993 And, um, particularly you've mentioned that you design your tables and 399 00:20:27,003 --> 00:20:31,313 your schemas, and you've mentioned that you're using Postgres, uh, more 400 00:20:31,313 --> 00:20:37,448 for like a server aspect and SQLite For, for the client state, do you 401 00:20:37,448 --> 00:20:43,178 design one schema and that applies to both Postgres and SQLite equally? 402 00:20:43,478 --> 00:20:45,428 Do you distinguish between those? 403 00:20:46,118 --> 00:20:46,378 Yeah. 404 00:20:46,378 --> 00:20:46,588 Yeah. 405 00:20:46,598 --> 00:20:50,358 You create a table in Postgres and then they call it electrifying it. 406 00:20:50,358 --> 00:20:53,968 And then there's sort of sync engine then automatically sets 407 00:20:53,968 --> 00:20:55,938 up that table for you in SQLite. 408 00:20:55,958 --> 00:20:59,558 And also like does migrations and all the other like complicated bits. 409 00:20:59,918 --> 00:21:04,918 You can do local only tables, but I've never needed to. 410 00:21:05,048 --> 00:21:09,588 There could definitely be stuff that's sort of like very specific to a client. 411 00:21:09,638 --> 00:21:13,048 Um, but generally speaking, like all the data, I just want synced all around. 412 00:21:13,268 --> 00:21:15,628 Cause you know, again, one of the cool things about all this is that, you know, 413 00:21:15,628 --> 00:21:18,748 your desktop, if you have a phone running the app and you have a desktop running 414 00:21:18,788 --> 00:21:20,388 the app, they're like always in sync. 415 00:21:20,388 --> 00:21:23,538 So it's, it's kind of like you pull out a phone and it's like, got the data. 416 00:21:23,618 --> 00:21:26,148 In my mind, all data should be synced all the time. 417 00:21:26,433 --> 00:21:30,973 So that kitchen app that you've been describing, that sounds super cool, but 418 00:21:30,973 --> 00:21:35,263 it sounded you've been building a few different local-first apps to really give 419 00:21:35,393 --> 00:21:39,283 this, give this a try and get started with, with that local-first paradigm. 420 00:21:39,303 --> 00:21:41,053 So which other apps have you been building? 421 00:21:41,863 --> 00:21:42,323 Yeah. 422 00:21:42,443 --> 00:21:45,923 And another app that I was pretty pleased with and I think is, uh, another 423 00:21:45,923 --> 00:21:49,383 good example of kind of the benefit of this like sync engine approach. 424 00:21:49,783 --> 00:21:54,003 It's a very simple, it's a one, one page, one view app, but 425 00:21:54,233 --> 00:21:55,823 basically it's like I use Garmin. 426 00:21:55,873 --> 00:22:00,023 I have a Garmin watch for like tracking exercise, like running, biking, et cetera. 427 00:22:00,303 --> 00:22:03,903 And they have a bunch of like charts and stuff that they kind of like pre designed 428 00:22:03,903 --> 00:22:07,193 for you, but I was like, Hey, I want to like, look at it from a different way. 429 00:22:07,203 --> 00:22:09,623 But basically I wanted a pure volume. 430 00:22:10,173 --> 00:22:11,913 Based view of my exercise. 431 00:22:11,923 --> 00:22:14,983 So, cause they're, they're like emphasize like intensity or mileage. 432 00:22:14,993 --> 00:22:18,483 And I'm just like, I just care how long I'm running or how 433 00:22:18,483 --> 00:22:19,643 long I'm biking, et cetera. 434 00:22:19,963 --> 00:22:22,093 And so I was like, Hey, they have an API. 435 00:22:22,153 --> 00:22:26,373 I'll just pull in the data, analyze it, create a chart off, you know, off we go. 436 00:22:26,493 --> 00:22:29,823 So the cool thing about it is that, so basically how the app works is like. 437 00:22:30,208 --> 00:22:31,608 You know, it's using electric SQL again. 438 00:22:31,688 --> 00:22:34,278 So it has all of your activities cached locally. 439 00:22:34,418 --> 00:22:37,218 So when you load it up, like it's instantaneous, it doesn't have to load 440 00:22:37,218 --> 00:22:38,828 a whole bunch of data off the server. 441 00:22:38,828 --> 00:22:41,858 It's just like runs, click SQL query presents the charts and stuff. 442 00:22:41,948 --> 00:22:46,328 But then also when you load it though, it like it hits a Lambda function, which then 443 00:22:46,378 --> 00:22:49,638 syncs in any new activities from Garmin. 444 00:22:49,928 --> 00:22:50,758 Into the system. 445 00:22:50,998 --> 00:22:54,128 And what's fun about that is like, just again, just how simple it was. 446 00:22:54,148 --> 00:22:59,258 Cause all it does is it like hits the API and then writes out 447 00:22:59,618 --> 00:23:02,908 new data into Postgres, which is like, okay, that's fine. 448 00:23:03,048 --> 00:23:05,148 But then the next step, you're like, well, how do you like tell the front 449 00:23:05,148 --> 00:23:07,778 end that like the new data is done or whatever, there's like a bunch of other 450 00:23:07,778 --> 00:23:09,438 stuff, but what's, what's great about it. 451 00:23:09,438 --> 00:23:12,498 It's like, there is no other step because the sync engines just was 452 00:23:12,498 --> 00:23:15,798 like, Oh, there is like a new Garmin activity pushed into the database. 453 00:23:16,058 --> 00:23:19,578 I'm going to push it to the client because it's subscribed to it and it's active. 454 00:23:20,033 --> 00:23:21,593 So it's just kind of like, it just shows up. 455 00:23:21,673 --> 00:23:24,673 That's again, it's kind of an illustration of like, you have this sync engine. 456 00:23:24,730 --> 00:23:27,109 It's not just like reactive in the client. 457 00:23:27,130 --> 00:23:30,040 Like there's a lot of like, we talk a lot about like client reactivity and like, 458 00:23:30,300 --> 00:23:33,310 there's a lot of libraries that do that, but this is more like a global reactivity. 459 00:23:33,880 --> 00:23:35,669 Like the whole system is reactive. 460 00:23:35,679 --> 00:23:39,900 Like any change anywhere, it gets pushed to every other node that cares about that. 461 00:23:40,040 --> 00:23:43,310 And that's just like a really powerful leap forward. 462 00:23:43,310 --> 00:23:47,275 Not just for the, like, Client server, but like, even like server server, like 463 00:23:47,275 --> 00:23:52,265 I thought a lot about like microservices, everyone's like, you know, like one 464 00:23:52,265 --> 00:23:54,825 big problem, microservices, they get very chatty cause they're always 465 00:23:54,825 --> 00:23:56,535 like, cause it's the same problem. 466 00:23:56,535 --> 00:23:58,834 They're always like pulling like, Hey, any new updates, any new 467 00:23:58,834 --> 00:23:59,885 updates, new updates, you know? 468 00:24:00,084 --> 00:24:02,184 And then they're like, anytime they want to do something, they're like, Oh 469 00:24:02,184 --> 00:24:03,315 wait, I got to go get some Jeff there. 470 00:24:03,315 --> 00:24:04,135 I get some Jeff there. 471 00:24:04,585 --> 00:24:07,895 But with the sync engine, it's like, well, no, like each microservice can just 472 00:24:07,895 --> 00:24:09,635 say like, this is the data I care about. 473 00:24:10,040 --> 00:24:14,320 And it has like a local SQLite database running that it can query against 474 00:24:14,320 --> 00:24:18,690 whatever it wants and like every bit of data is like up to date within like 475 00:24:18,690 --> 00:24:23,150 a, you know, fraction of a second that just like would dramatically speed up 476 00:24:23,150 --> 00:24:26,650 a lot of sort of microservices set up and dramatically reduce the chattiness 477 00:24:26,960 --> 00:24:28,800 going on in between different services. 478 00:24:28,809 --> 00:24:32,710 So anyways, I think there's a lot of global reactivity powered by SyncEngine. 479 00:24:32,875 --> 00:24:34,475 Yeah, I love that analogy. 480 00:24:34,505 --> 00:24:39,965 I think this was really like what blew my mind about React in the, like, when I saw 481 00:24:39,965 --> 00:24:44,694 it the first, the first time, not just that it made my life simpler by not having 482 00:24:44,694 --> 00:24:50,505 to take care of like all of the dumb children, like appending, creating, etc. 483 00:24:50,764 --> 00:24:54,975 So it made everything simpler, but also having all of that just work 484 00:24:55,025 --> 00:24:59,525 automatically without me having to even like tell it like, Hey, now update. 485 00:24:59,890 --> 00:25:04,760 That reactivity for the views, but also for like the local state, but applying 486 00:25:04,760 --> 00:25:09,279 that now for global data, uh, I think that is really a killer feature of 487 00:25:09,279 --> 00:25:13,879 local-first that I think is not well understood by, by a lot of app developers. 488 00:25:14,475 --> 00:25:17,845 It's just so funny because like it's the water we live in, you know, it's like, Oh 489 00:25:17,845 --> 00:25:20,445 yeah, when you're building stuff, you're just, you spend a lot of time moving data 490 00:25:20,445 --> 00:25:23,045 around and checking it and updating it. 491 00:25:23,045 --> 00:25:25,634 And it's just like endless little problems. 492 00:25:25,784 --> 00:25:30,154 Uh, I remember like Gatsby cloud, we would like, it was such a common problem 493 00:25:30,435 --> 00:25:34,975 where it would like ship an update, which like, you know, use a slightly 494 00:25:34,975 --> 00:25:41,110 less efficient query or up the number of calls Internal API calls, and then all 495 00:25:41,110 --> 00:25:44,750 of a sudden, like the post, our Postgres database with like red line, like, and 496 00:25:44,750 --> 00:25:47,120 we like, ah, no, like, or whatever. 497 00:25:47,180 --> 00:25:51,129 And like, it was just like a constant headache because like, when everyone's 498 00:25:51,199 --> 00:25:55,170 constantly like asking for stuff, there's just enormous inefficiencies. 499 00:25:55,430 --> 00:25:58,310 Cause like, I remember that was a big thing where people are like early on 500 00:25:58,310 --> 00:25:59,820 with React, people are like, oh, like. 501 00:26:00,180 --> 00:26:03,260 My jQuery calls are so efficient, you know, and like react is doing 502 00:26:03,260 --> 00:26:04,850 all this extra work and whatever. 503 00:26:04,900 --> 00:26:09,869 But what pretty soon everyone kind of realized it's like, well, yes, like react 504 00:26:09,869 --> 00:26:14,949 does do extra work to accomplish the same goal, but it's only actually more 505 00:26:14,949 --> 00:26:21,360 work if every single jQuery operation was optimal, like you'd actually thought 506 00:26:21,370 --> 00:26:26,960 through the algorithm, you know, in detail for every single one, because in practice. 507 00:26:27,385 --> 00:26:30,215 Everyone was just doing lazy, weird shortcuts. 508 00:26:30,215 --> 00:26:32,405 You're like, you're like, I just got to ship this feature. 509 00:26:32,405 --> 00:26:34,495 So I'm just going to blow it away and rewrite the whole thing or whatever. 510 00:26:34,495 --> 00:26:38,345 He said, we were doing all sorts of like weird, crappy things to, to, to 511 00:26:38,345 --> 00:26:43,095 kind of like update the Dom, which, yeah, it was just like very janky, 512 00:26:43,125 --> 00:26:46,225 very slow all the time and whatever. 513 00:26:46,234 --> 00:26:48,645 So, so, so react was like, yeah, it's like, it was an 514 00:26:48,655 --> 00:26:50,615 overhead to doing automatically. 515 00:26:50,895 --> 00:26:56,185 But it was sort of like a consistent overhead and everything was consistently 516 00:26:56,555 --> 00:27:00,004 a little bit slower than optimal instead of like sometimes optimal, 517 00:27:00,045 --> 00:27:02,664 sometimes widely not optimal. 518 00:27:03,105 --> 00:27:05,505 And so the same thing with like moving data around. 519 00:27:05,515 --> 00:27:10,455 It's like, you know, people are like, Oh, yeah, like, My data fetching is so 520 00:27:10,455 --> 00:27:16,275 clean and so good But you know, you have one engineer who just accidentally grabs 521 00:27:16,275 --> 00:27:20,815 five megabytes of data from their API and like, whoops, and then all of a sudden, 522 00:27:20,815 --> 00:27:24,344 like the whole thing falls to pieces where, again, with like sort of more of 523 00:27:24,344 --> 00:27:29,155 an higher level of abstraction, it's like, you just, it just can't happen because 524 00:27:29,155 --> 00:27:34,550 you can even put in checks, you're like, You can only ask for max of 300 kilobytes 525 00:27:34,560 --> 00:27:35,930 in a batch or something like that. 526 00:27:35,940 --> 00:27:36,230 Whatever. 527 00:27:36,230 --> 00:27:37,530 I mean, there's all sorts of like. 528 00:27:38,280 --> 00:27:40,830 Smarter things that the system can do for you. 529 00:27:41,060 --> 00:27:45,100 All kinds of new abstractions of kind of like both face these same 530 00:27:45,100 --> 00:27:47,750 challenges of, of, or complaints. 531 00:27:47,750 --> 00:27:50,930 It's like, Hey, like I do it really well and you're doing it poorly 532 00:27:50,930 --> 00:27:52,129 in all these cases and whatever. 533 00:27:52,150 --> 00:27:55,210 But if the abstraction is like good enough, it eventually 534 00:27:55,260 --> 00:27:56,469 pretty quickly becomes. 535 00:27:56,915 --> 00:28:00,275 Better in most cases and often better in all cases. 536 00:28:00,435 --> 00:28:04,945 And even if it's not better in all cases, like taken as a whole, it just eliminates 537 00:28:04,945 --> 00:28:07,675 a lot of really suboptimal problems. 538 00:28:07,715 --> 00:28:10,944 It's like memory management, you know, that's sort of another great example. 539 00:28:10,945 --> 00:28:13,664 Like people are like, I manage memory so well, like these GCs, there's 540 00:28:13,664 --> 00:28:14,815 lots of overhead, blah, blah, blah. 541 00:28:15,094 --> 00:28:15,819 And then like. 542 00:28:16,250 --> 00:28:20,080 30 years of, uh, CVEs of, you know, security issues. 543 00:28:20,170 --> 00:28:24,629 It is very, very hard to build fast, efficient data loading and 544 00:28:24,630 --> 00:28:26,330 keeping it up to date and whatever. 545 00:28:26,420 --> 00:28:29,620 After like, you know, spending all this time building local-first stuff, 546 00:28:29,680 --> 00:28:32,989 even like very good apps built with like great teams, like, you know, 547 00:28:33,000 --> 00:28:34,479 name a name, like Vercel's dashboard. 548 00:28:34,480 --> 00:28:36,570 I mean, they're pushing like react server components and all that stuff, 549 00:28:36,900 --> 00:28:40,740 but like you click around their dashboard and there's like endless little, like. 550 00:28:41,270 --> 00:28:48,250 Loading, you know, like if they had a sync engine, they would know that the next few 551 00:28:48,260 --> 00:28:51,660 has all the data and it's up to date and they wouldn't have to like go back to the 552 00:28:51,660 --> 00:28:52,780 server, like, Hey, did anything change? 553 00:28:52,780 --> 00:28:53,419 Did anything change? 554 00:28:53,600 --> 00:28:55,190 Cause I'm sure they have a local cache, but like what 555 00:28:55,190 --> 00:28:56,319 they're doing is always like. 556 00:28:56,930 --> 00:29:00,960 Asking again on every click, they're like, Hey, has anything changed since 557 00:29:00,960 --> 00:29:02,070 the last time this person was here? 558 00:29:02,190 --> 00:29:07,770 And that, like that request, like, or sort of that, that fundamental uncertainty with 559 00:29:07,770 --> 00:29:12,210 an imperative approach, like, just because you just can't, you can't, you can't 560 00:29:12,220 --> 00:29:16,749 know if, if, if the data is up to date, um, there's no way of knowing for sure. 561 00:29:16,759 --> 00:29:20,570 Cause there's no system that's like reliably telling you that like, yes, the 562 00:29:20,570 --> 00:29:22,870 data is up to date for this next view. 563 00:29:22,929 --> 00:29:24,750 You have to check. 564 00:29:25,200 --> 00:29:26,090 And that check. 565 00:29:26,500 --> 00:29:29,640 Take some amount of time, which adds glitchiness into your UI. 566 00:29:29,750 --> 00:29:31,860 And there's just no way of, no way of getting away for that 567 00:29:31,860 --> 00:29:34,390 without, without a sync engine that can like provide the guarantee. 568 00:29:34,579 --> 00:29:36,170 I think it's really interesting. 569 00:29:36,520 --> 00:29:41,900 You've used the term, uh, thinking about your app data first, maybe as opposed 570 00:29:41,910 --> 00:29:45,720 to view first or, or react first. 571 00:29:45,720 --> 00:29:46,040 Yeah. 572 00:29:46,270 --> 00:29:52,710 I think that's kind of a big mental shift that I've also observed in my own app 573 00:29:52,710 --> 00:29:56,230 development evolution of my perspectives. 574 00:29:56,300 --> 00:30:01,540 And I think this has been a really powerful step because it intuitively 575 00:30:01,570 --> 00:30:05,780 makes sense that if you don't have the data, then if you want to render it. 576 00:30:06,225 --> 00:30:08,575 And you don't have it, then you also can't render it. 577 00:30:09,555 --> 00:30:14,265 And so thus you render a loader or a skeleton, et cetera. 578 00:30:14,504 --> 00:30:16,865 Whereas if you think about your app. 579 00:30:17,585 --> 00:30:22,905 Navigation routing user experience overall more in a data first way to 580 00:30:22,915 --> 00:30:24,755 think about, okay, I'm currently here. 581 00:30:24,905 --> 00:30:29,264 This is all the data that I need, but also think a step ahead of like, Oh, what if 582 00:30:29,265 --> 00:30:32,425 I would go to, to this other route here? 583 00:30:32,444 --> 00:30:36,485 Maybe I should already have the bare essentials in terms of the 584 00:30:36,485 --> 00:30:40,454 data for that, that if I'm going there, it's immediately available. 585 00:30:40,675 --> 00:30:44,055 And then you think about your data more, maybe you think about it as a 586 00:30:44,055 --> 00:30:47,705 graph or like a collection of documents, however, you want to think about the 587 00:30:47,715 --> 00:30:49,915 data, how it fits your app's use case. 588 00:30:49,945 --> 00:30:54,615 But once you start thinking about your app data first, I think it's 589 00:30:54,624 --> 00:30:56,725 so much easier to build a really. 590 00:30:56,900 --> 00:31:01,650 high quality, fast user experience then, um, and it's also so much 591 00:31:01,660 --> 00:31:03,850 easier to make that available offline. 592 00:31:03,870 --> 00:31:08,229 I'm not sure whether you need Vercel's dashboard, which is gorgeous, but has 593 00:31:08,280 --> 00:31:09,890 a bunch of loaders, loading spinners. 594 00:31:09,919 --> 00:31:12,360 I don't think you need that necessarily to work offline. 595 00:31:12,915 --> 00:31:17,425 But another way to, if it works on offline, then it's crazy fast. 596 00:31:17,815 --> 00:31:21,255 And I think it would be great if it was a lot faster. 597 00:31:21,604 --> 00:31:25,845 So I would, I would completely agree with kind of thinking about your, about 598 00:31:25,845 --> 00:31:31,610 your app development workflows as data first, as opposed to React or Vue first. 599 00:31:32,240 --> 00:31:36,650 So we've been talking a lot about the, all the good things now that you've 600 00:31:36,690 --> 00:31:40,910 experienced with local-first, but I'm sure you've also experienced like 601 00:31:40,910 --> 00:31:45,809 some pain points, some challenges, um, in regards to that new approach 602 00:31:45,809 --> 00:31:49,400 of building software or in regards to the technologies you've been using. 603 00:31:49,510 --> 00:31:51,890 Tell me a bit about that, which sort of challenges have 604 00:31:51,930 --> 00:31:53,450 you been experiencing here? 605 00:31:53,720 --> 00:31:54,740 Yeah, there's definitely a few. 606 00:31:54,860 --> 00:31:55,940 I mean, there is some learning curve. 607 00:31:56,000 --> 00:31:58,680 It's not the same as what was before there. 608 00:31:58,700 --> 00:32:00,150 There's a lot of things that cross over. 609 00:32:00,150 --> 00:32:02,340 So it's not like a huge step. 610 00:32:02,760 --> 00:32:05,850 You're going to have to like spend some time learning stuff regardless 611 00:32:06,000 --> 00:32:07,040 of whatever tool you choose. 612 00:32:07,040 --> 00:32:09,149 You're gonna have to like learn stuff for that that you don't know now. 613 00:32:09,340 --> 00:32:13,549 But I think there's also at this current point of immaturity in the market, 614 00:32:13,550 --> 00:32:15,850 there's not like a clear market leader. 615 00:32:15,850 --> 00:32:15,860 Yeah. 616 00:32:15,860 --> 00:32:15,869 Yeah. 617 00:32:16,050 --> 00:32:18,390 Who's very good and mature that lots of people use. 618 00:32:18,630 --> 00:32:22,080 So, you know, like in in, in sort of we're like, Hey, next Js. 619 00:32:22,080 --> 00:32:23,040 Like that's sort of the obvious choice. 620 00:32:23,070 --> 00:32:25,350 'cause the billion people use it and it, it's kind of 621 00:32:25,350 --> 00:32:26,430 covers everything and whatever. 622 00:32:26,490 --> 00:32:29,670 So you both have the, I have to evaluate a bunch of tools, a 623 00:32:29,675 --> 00:32:31,410 step to get, get into this world. 624 00:32:31,700 --> 00:32:35,090 And then you're like, and then I have to learn a specific tool in depth. 625 00:32:35,150 --> 00:32:37,550 'cause there's, there's, it's just different than, you know, 626 00:32:37,610 --> 00:32:38,510 like no one's done it before. 627 00:32:39,500 --> 00:32:40,350 Almost nobody's done it before. 628 00:32:40,350 --> 00:32:41,710 So you're going to have to like learn stuff to do that. 629 00:32:41,820 --> 00:32:45,620 So that's definitely a bit of an overhead, uh, in this approach. 630 00:32:45,690 --> 00:32:49,340 And another result of the immaturity is like, there's just things that don't work. 631 00:32:49,979 --> 00:32:53,169 So there's sort of the magical, like I'd be kind of describing like sinking, 632 00:32:53,170 --> 00:32:56,029 just like, Oh yeah, they're just sort of magic, but they're not actually magic. 633 00:32:56,079 --> 00:32:56,879 They actually. 634 00:32:57,230 --> 00:33:02,030 are an engineered product and there's stuff that they just don't do yet, 635 00:33:02,210 --> 00:33:04,240 um, that you'd rather like them to do. 636 00:33:04,590 --> 00:33:08,729 And so it's, uh, you know, learning those limitations and like working within 637 00:33:08,730 --> 00:33:12,399 them or even, you know, even decide if you can or not is part of sort of the 638 00:33:12,400 --> 00:33:14,270 evaluation process and building process. 639 00:33:14,339 --> 00:33:17,030 So far for my toy apps, it hasn't been an issue, but like, there's definitely 640 00:33:17,040 --> 00:33:21,130 things that I'm like, I can't build those things with this stack right now. 641 00:33:21,345 --> 00:33:22,965 And like, yeah, the engineering, you know, the teams behind 642 00:33:22,965 --> 00:33:23,935 these, like they know about it. 643 00:33:23,935 --> 00:33:26,425 And like, they're working hard to, to, to fix them. 644 00:33:26,705 --> 00:33:28,345 A lot of stuff is kind of like just the same. 645 00:33:28,345 --> 00:33:29,465 It's just building a map. 646 00:33:29,465 --> 00:33:31,905 You're just like, I need data and data's there. 647 00:33:31,985 --> 00:33:35,714 Before I'd write a REST API call or GraphQL call or whatever. 648 00:33:35,855 --> 00:33:37,355 And on the backend, I'd write a query. 649 00:33:37,705 --> 00:33:40,985 And now you just write the same query, but it runs locally. 650 00:33:41,715 --> 00:33:46,485 And the day to day, just like building views and stuff, it's extremely similar. 651 00:33:46,485 --> 00:33:50,005 You know, it's like before you'd probably like to sort of hash out like 652 00:33:50,005 --> 00:33:51,925 the, the data locally and the client. 653 00:33:52,225 --> 00:33:54,965 But now I just started like, Oh, I need to like change my data model. 654 00:33:54,975 --> 00:33:57,455 So I'll just tweak the, you know, the database structure a 655 00:33:57,455 --> 00:33:59,995 bit and then, you know, change my query a bit in the front end. 656 00:34:00,125 --> 00:34:03,145 So yeah, I mean, day to day, it's like, it's very similar, 657 00:34:03,185 --> 00:34:04,555 but just like less steps. 658 00:34:05,035 --> 00:34:08,245 Cause you don't have to like change your GraphQL or you don't have 659 00:34:08,265 --> 00:34:09,995 to change like the client call. 660 00:34:10,445 --> 00:34:11,365 It's only like two steps. 661 00:34:11,365 --> 00:34:12,835 It's like you change the database table. 662 00:34:13,375 --> 00:34:17,045 And then you change your query in, in, in your, in your component. 663 00:34:17,135 --> 00:34:18,475 And then that's about it. 664 00:34:18,595 --> 00:34:20,635 So it's pretty, it's pretty simple. 665 00:34:21,015 --> 00:34:22,055 That makes a lot of sense. 666 00:34:22,065 --> 00:34:27,225 And I mean, just overall trade as for, for most early technologies, if you're 667 00:34:27,255 --> 00:34:32,555 early to those technologies, you bet on some superpowers and you probably 668 00:34:32,575 --> 00:34:37,335 acquire those new superpowers earlier than most of us, but you also got to 669 00:34:37,335 --> 00:34:40,175 pay a higher price than most of us. 670 00:34:40,355 --> 00:34:40,655 Yeah. 671 00:34:40,655 --> 00:34:41,905 It's just like, yeah. 672 00:34:41,905 --> 00:34:43,035 I think the biggest thing is like. 673 00:34:44,230 --> 00:34:48,090 I just randomly have gone into like, Oh, do, do, do, do, do, I'm doing something. 674 00:34:48,100 --> 00:34:51,810 And then like, bam, I hit something and then I'm like stalled for like 675 00:34:51,810 --> 00:34:55,920 a day while I either figure it out or, or figure out a workaround. 676 00:34:56,029 --> 00:35:00,609 So I think it's, it's, it's kind of like if you're using boring technology. 677 00:35:00,955 --> 00:35:04,085 It's like, it may be tedious and hard or whatever, but it's 678 00:35:04,085 --> 00:35:05,805 sort of like a known tedium. 679 00:35:06,635 --> 00:35:10,105 You're like, this is going to take me like one week, where with a new 680 00:35:10,105 --> 00:35:14,254 technology, it's either going to take you an hour or two weeks, you know? 681 00:35:14,254 --> 00:35:18,035 So, uh, it was a lot more uncertainty on what's going to happen. 682 00:35:18,085 --> 00:35:21,255 And you might run into stuff that just like absolute blockers where again, 683 00:35:21,255 --> 00:35:24,685 with the old stuff, it's kind of like every single possible work around. 684 00:35:25,095 --> 00:35:27,315 Has been figured out for every possible thing. 685 00:35:27,615 --> 00:35:31,545 And so it's just a matter of finding that obscure forum post from like 686 00:35:31,545 --> 00:35:34,414 five years ago, where they're like some weirdos, like, Oh, I spent five 687 00:35:34,415 --> 00:35:35,685 days on this, but here's the fix. 688 00:35:35,685 --> 00:35:36,705 And you're like, freak. 689 00:35:36,715 --> 00:35:38,334 Like we are, we have a kinship. 690 00:35:38,334 --> 00:35:41,075 You and I know we two people are the only ones that have run into 691 00:35:41,075 --> 00:35:43,355 this problem before, but thank you. 692 00:35:43,364 --> 00:35:45,445 You, you wrote it down for me, so I don't have to figure it out myself. 693 00:35:45,715 --> 00:35:49,385 So, so yeah, the new technology, it's like most of the problems you run into, you 694 00:35:49,565 --> 00:35:50,855 are the very first person to run into it. 695 00:35:51,170 --> 00:35:51,870 Which is fun. 696 00:35:51,880 --> 00:35:53,520 It's sort of like, yay, you're like, I don't know. 697 00:35:53,610 --> 00:35:56,380 But yeah, it's, it's, you're gonna have to be like a pioneer, sort of a 698 00:35:56,390 --> 00:36:00,080 more robust, I don't know if Europeans talk about pioneers, but anyways, 699 00:36:00,080 --> 00:36:02,519 like American pioneer, you're kind of like, ah, we're going off into 700 00:36:02,520 --> 00:36:06,300 the wilderness and got an axe on our shoulder and, you know, whatever. 701 00:36:06,300 --> 00:36:07,470 We're just gonna like make it happen. 702 00:36:07,519 --> 00:36:11,050 You kind of have to adopt that, that mindset, um, when you're 703 00:36:11,050 --> 00:36:12,890 kind of into new technology. 704 00:36:13,270 --> 00:36:15,220 Yeah, that's very relatable for me. 705 00:36:15,250 --> 00:36:19,600 I've always considered myself to be kind of like a technical pioneer. 706 00:36:19,650 --> 00:36:23,720 So what you've just mentioned in terms of, yeah, sometimes like it's a gamble 707 00:36:23,730 --> 00:36:28,160 and sometimes like it's the, the sort of promise of everything will be simpler 708 00:36:28,160 --> 00:36:30,980 and easier in the future that plays out. 709 00:36:30,980 --> 00:36:34,510 And you can't believe like how the thing that just took so much effort 710 00:36:34,510 --> 00:36:40,080 and so much work in the past is now so easy, or you run into a wall Or 711 00:36:40,260 --> 00:36:44,270 in theory, it would have worked, but you run into some edge case that 712 00:36:44,270 --> 00:36:45,750 you're the first one running into. 713 00:36:46,150 --> 00:36:50,190 And it might be fixed with the next release of whatever you're using, 714 00:36:50,510 --> 00:36:51,910 but you still have run into it. 715 00:36:52,240 --> 00:36:53,870 But luckily you've run into it. 716 00:36:54,220 --> 00:36:58,950 And then the next person is no longer running into it, depending 717 00:36:58,950 --> 00:37:00,470 on how quickly someone releases. 718 00:37:00,640 --> 00:37:04,020 Yeah, there's there's sort of a sense of community service you, you, you. 719 00:37:04,225 --> 00:37:06,805 Get, or at least it's helpful to get with new technologies. 720 00:37:06,805 --> 00:37:09,705 You're like, yeah, I'm going to pay down the cost for everyone else a bit. 721 00:37:10,155 --> 00:37:14,344 So another observation here, I think it's really interesting that 722 00:37:14,445 --> 00:37:19,564 the use cases you've mentioned, your ambitions for those apps. 723 00:37:20,125 --> 00:37:24,525 We're not to like take it to market and like roll it out to millions of users. 724 00:37:24,965 --> 00:37:28,754 It was, I think like part of the fun that you built a software 725 00:37:28,925 --> 00:37:33,824 that's just for you and you can make it as fancy or ugly as you want, 726 00:37:34,015 --> 00:37:35,524 like no, one's going to complain. 727 00:37:35,770 --> 00:37:41,660 and you know like the little quirks, uh, of it and that it took you less effort to 728 00:37:41,730 --> 00:37:46,060 make that happen, to build the thing you wanted to build and like spend less time 729 00:37:46,060 --> 00:37:48,279 with like all of the boilerplatey things. 730 00:37:48,710 --> 00:37:49,449 That's great. 731 00:37:49,549 --> 00:37:51,899 And I think that, that is totally fine. 732 00:37:51,909 --> 00:37:54,580 Like no one's going to take you, take that away from you. 733 00:37:55,100 --> 00:37:58,360 Uh, I think what's still a little bit less proven is like, how do you 734 00:37:58,370 --> 00:38:03,005 really If you were to take that app now and say, I do want to scale it 735 00:38:03,055 --> 00:38:04,615 to millions of users, et cetera. 736 00:38:04,625 --> 00:38:09,195 I think that's another aspect of where we are still pretty early. 737 00:38:09,245 --> 00:38:14,935 And on our pioneering journey, we have not yet figured out like hit all the traps. 738 00:38:15,914 --> 00:38:20,494 But, uh, I think from first principles, I think, uh, this 739 00:38:20,644 --> 00:38:22,294 approach should actually work out. 740 00:38:22,294 --> 00:38:23,674 I don't, I don't see. 741 00:38:24,525 --> 00:38:29,935 Any like showstoppers for sort of scale to millions and a lot of ways again too. 742 00:38:29,935 --> 00:38:32,755 It's like, it's actually no apps do scale to a million. 743 00:38:33,145 --> 00:38:37,734 What happens is people build it and it falls apart and then they like rebuild 744 00:38:37,734 --> 00:38:39,975 it several times and get to millions. 745 00:38:40,295 --> 00:38:42,284 So what actually I think is actually pretty interesting about this and like 746 00:38:42,294 --> 00:38:47,895 promising is like there is a story here prototype to millions with like 747 00:38:47,915 --> 00:38:50,995 no changes to your basic architecture. 748 00:38:51,370 --> 00:38:56,190 Which I don't think anything else can make that claim, but like the base system of 749 00:38:56,190 --> 00:39:00,200 like what everyone plans to do is like you can horizontally scale sync engines 750 00:39:00,519 --> 00:39:04,120 without any issues because you can just have sticky, sticky connections from 751 00:39:04,120 --> 00:39:07,869 clients to, to particular sync engine and it's managing the state for each user. 752 00:39:07,959 --> 00:39:10,130 Postgres is easy to vertically scale. 753 00:39:10,180 --> 00:39:12,370 What's interesting else, but like Postgres actually has like a lot 754 00:39:12,370 --> 00:39:15,520 less demand in this world because far fewer queries are reaching it. 755 00:39:15,940 --> 00:39:19,710 So it's actually like you don't have to scale Postgres nearly as fast as 756 00:39:19,710 --> 00:39:22,960 you kind of typically expect to, you know, with this approach, people either 757 00:39:22,960 --> 00:39:25,710 do sort of normal API stuff because you can still just call Lambda and 758 00:39:25,710 --> 00:39:26,820 do whatever and write to Postgres. 759 00:39:26,850 --> 00:39:30,220 Can I was talking about the Garmin example, you can write locally, like, 760 00:39:30,370 --> 00:39:33,499 I want to do this sort of our sort of event sourcing style where you're like, 761 00:39:33,779 --> 00:39:35,420 the client says, I want this to happen. 762 00:39:35,420 --> 00:39:36,130 And then the back end. 763 00:39:36,600 --> 00:39:39,750 Serverless function picks up the job and then kind of writes 764 00:39:39,750 --> 00:39:42,470 it back and then it gets synced back to the, the client anyway. 765 00:39:42,470 --> 00:39:46,520 So that, that, again, that approach is also extremely scalable because it's 766 00:39:46,520 --> 00:39:50,129 all serverless and stateless and you can have as many workers, you know, spinning 767 00:39:50,130 --> 00:39:51,569 up to, to handle stuff for people. 768 00:39:51,710 --> 00:39:52,489 But yeah, we're not there. 769 00:39:52,719 --> 00:39:54,319 This is all very, that's all very potential. 770 00:39:54,520 --> 00:39:57,460 But I think what's extremely promising is like, you know, 771 00:39:57,460 --> 00:39:58,670 what are the different stages? 772 00:39:58,670 --> 00:40:00,190 What are the three major stages? 773 00:40:00,190 --> 00:40:02,260 It's like how efficient is a tool of prototyping? 774 00:40:02,815 --> 00:40:05,435 How easy is to go from prototype to production and 775 00:40:05,435 --> 00:40:06,655 then how easy it's to scale. 776 00:40:06,675 --> 00:40:08,655 So those are like three distinct problems. 777 00:40:08,995 --> 00:40:13,585 So problem line prototyping, I think both of our experiences, it's a lot 778 00:40:13,585 --> 00:40:14,955 easier to prototype with a stack. 779 00:40:14,995 --> 00:40:18,625 Like it's data centric, you have like a full type safe client, you know, from 780 00:40:18,625 --> 00:40:20,805 the get go, a lot of boilerplate is gone. 781 00:40:20,815 --> 00:40:22,045 Like you just like, bam, you go. 782 00:40:22,495 --> 00:40:25,325 And then again, like prototype production, extremely easy. 783 00:40:25,345 --> 00:40:28,385 Like I, like I've done lots of side projects in the past that I 784 00:40:28,385 --> 00:40:29,635 always kind of came down to it. 785 00:40:29,635 --> 00:40:30,415 Now I'm going to. 786 00:40:30,925 --> 00:40:31,555 Deploy it. 787 00:40:31,555 --> 00:40:36,245 And I was like, uh, I have to rewrite so many things and I have to like, do all 788 00:40:36,245 --> 00:40:37,795 this crap that I didn't have to do before. 789 00:40:37,795 --> 00:40:39,105 Like, Oh no, where's the steak going to go? 790 00:40:39,105 --> 00:40:39,495 Whatever. 791 00:40:39,865 --> 00:40:45,114 Like I I've gotten, I've gotten my sort of go live checklist. 792 00:40:45,114 --> 00:40:49,174 It's like five things and like, it takes me less than an hour. 793 00:40:49,335 --> 00:40:52,955 So it's extremely fast to go from like prototype to production. 794 00:40:53,435 --> 00:40:55,495 And then, you know, production scaling. 795 00:40:55,495 --> 00:40:55,665 Yeah. 796 00:40:55,695 --> 00:40:58,995 That's, that's, that's the part that doesn't really exist, but in theory, 797 00:40:59,015 --> 00:41:01,085 like, I think the architecture is like. 798 00:41:01,530 --> 00:41:07,290 A very scale free, like, it's mainly just a sync engine that, um, needs. 799 00:41:08,235 --> 00:41:09,865 Proven at scale. 800 00:41:10,235 --> 00:41:15,735 I mean, I do think that I fully agree with the way how you delineated 801 00:41:15,765 --> 00:41:17,655 that into those like 3 steps. 802 00:41:17,675 --> 00:41:22,335 Um, but I would even say that the scaling part I think has been proven 803 00:41:22,605 --> 00:41:26,655 by quite a couple of companies by now, whether, uh, Whether it's like thinking 804 00:41:26,655 --> 00:41:31,205 about Replicash, uh, Rosicorp has built with Replicash and Reflect, et cetera. 805 00:41:31,205 --> 00:41:35,465 I think they have a couple of customers that are really going at scale and 806 00:41:35,475 --> 00:41:41,464 the entire system I think is quite inherently scalable and, uh, the, it 807 00:41:41,465 --> 00:41:46,035 doesn't change the, the simplicity of the system, which is, which is the beauty. 808 00:41:46,115 --> 00:41:50,325 Um, and a lot of, a lot of the, a lot of the parts of the system can 809 00:41:50,325 --> 00:41:54,195 still be considered stateless, which makes it a lot easier to reason about. 810 00:41:54,950 --> 00:41:58,470 linear, linear had a really great talk about, uh, linear 811 00:41:58,470 --> 00:42:02,730 CTO, uh, had a really great talk about, uh, how, how they scaled. 812 00:42:04,530 --> 00:42:06,840 And it's, it's pretty fascinating, like all the things that they 813 00:42:06,840 --> 00:42:09,810 did, but yeah, to your point, people have gone down the path. 814 00:42:10,050 --> 00:42:12,670 So, you know, innovation kind of goes through, like, 815 00:42:13,220 --> 00:42:15,030 is this thing even possible? 816 00:42:15,030 --> 00:42:16,930 Or somebody has to, like, discover something. 817 00:42:16,930 --> 00:42:19,410 Like, there's this like, oh, there's this new thing that we can do. 818 00:42:19,469 --> 00:42:19,819 Wow. 819 00:42:19,880 --> 00:42:20,290 Who knew? 820 00:42:20,719 --> 00:42:21,704 And then it's sort of like. 821 00:42:22,265 --> 00:42:25,985 It goes from that to then sort of eventually to sort of a product 822 00:42:26,005 --> 00:42:29,155 where it's kind of like that technology is then encapsulated 823 00:42:29,175 --> 00:42:30,765 to something that anybody can use. 824 00:42:30,775 --> 00:42:35,304 So the fact that multiple independent teams have successfully gone down 825 00:42:35,304 --> 00:42:37,745 this path shows that then sort of now. 826 00:42:38,120 --> 00:42:41,280 What we're seeing is sort of a productization of sync engines. 827 00:42:41,300 --> 00:42:42,840 If you want to do a sync engine, you have to like buy it. 828 00:42:42,880 --> 00:42:43,520 You don't have to build it. 829 00:42:43,520 --> 00:42:44,490 You can just buy it off the shelf. 830 00:42:44,800 --> 00:42:47,730 Um, I think we're pretty close to that being a reality. 831 00:42:48,780 --> 00:42:52,129 So you've been going through this journey, I guess, over the last 832 00:42:52,129 --> 00:42:56,629 year or so of like learning about local-first and step by step building 833 00:42:56,629 --> 00:42:58,249 your own apps with local-first. 834 00:42:58,500 --> 00:43:02,320 What would be your advice to an app developer who's curious 835 00:43:02,320 --> 00:43:05,710 about local-first, but has not yet taken their own first steps? 836 00:43:06,120 --> 00:43:07,699 What would be your advice to them? 837 00:43:08,165 --> 00:43:08,515 I don't know. 838 00:43:08,515 --> 00:43:11,985 My, my, my general advice on any technology is just to dive right in. 839 00:43:12,435 --> 00:43:14,235 I mean, there's lots of stuff you can read about it. 840 00:43:14,415 --> 00:43:18,815 So, so by all means, like, you know, listen to cool, cool podcast. 841 00:43:18,904 --> 00:43:20,005 There's lots of blog posts. 842 00:43:20,055 --> 00:43:20,315 Yeah. 843 00:43:20,315 --> 00:43:23,185 So it was definitely lots you can read and listen to and watch and stuff. 844 00:43:23,225 --> 00:43:26,444 But, um, there's no better way to feel it, to like, to understand 845 00:43:26,444 --> 00:43:29,815 it and to really feel it than just to like start building some stuff. 846 00:43:29,915 --> 00:43:33,185 All the different tools have starters and they're very approachable. 847 00:43:33,185 --> 00:43:35,135 They're not like particularly hard to use. 848 00:43:35,425 --> 00:43:38,610 And, you know, Take a day or two and build something. 849 00:43:39,080 --> 00:43:43,670 Cause yeah, it's really just like, when you just see it sinking between 850 00:43:43,710 --> 00:43:47,139 tabs and you're just like, you're just kind of like, you, you really 851 00:43:47,139 --> 00:43:50,489 kind of have to feel whenever you're just like used to doing something. 852 00:43:50,500 --> 00:43:51,989 You just, you just forget about it. 853 00:43:52,000 --> 00:43:54,189 We get numb to all the stuff we do. 854 00:43:54,449 --> 00:43:55,729 So you really just have to like. 855 00:43:55,970 --> 00:43:58,720 To really feel the difference of local-first you just have to build 856 00:43:58,720 --> 00:44:02,170 something and then you're just like where's all this stuff that you just sort 857 00:44:02,170 --> 00:44:06,640 of feel voids in your in your soul you're like you're like where's all the missing 858 00:44:06,650 --> 00:44:10,229 stuff you know like where's all those things I normally do and you're just kind 859 00:44:10,230 --> 00:44:13,760 of like oh they're just gone and then like after you've done a few you're kind of 860 00:44:13,760 --> 00:44:15,840 like You just start to forget about it. 861 00:44:15,840 --> 00:44:18,930 It's like this bad, weird dream of like spending all that time on all 862 00:44:18,930 --> 00:44:19,920 those things that are now gone. 863 00:44:20,100 --> 00:44:22,470 But yeah, you just, you can't really appreciate that until 864 00:44:22,470 --> 00:44:23,660 you've actually built something. 865 00:44:24,440 --> 00:44:28,280 Uh, let's see whether in five years from now, we look back into the days where 866 00:44:28,280 --> 00:44:32,770 we haven't built, been building with local-first and we see it just crystal 867 00:44:32,770 --> 00:44:35,520 clear as that analogy you've given before. 868 00:44:35,800 --> 00:44:40,630 With going from jQuery to React and React freed up, uh, freed us up 869 00:44:40,690 --> 00:44:45,770 from having to think about how to render the views in the correct way. 870 00:44:45,819 --> 00:44:47,630 And now we get the same thing for data. 871 00:44:48,169 --> 00:44:49,220 So this is beautiful. 872 00:44:50,030 --> 00:44:53,309 Now, yeah, talking, talking to younger developers, like sometimes 873 00:44:53,309 --> 00:44:58,860 I mentioned jQuery and I'm like, Oh wait, they've probably don't jQuery is. 874 00:44:59,540 --> 00:45:02,410 And it's just a very weird feeling to be like, Oh, yeah, just jQuery 875 00:45:02,410 --> 00:45:05,430 thing it was like this and they're just like, yeah, okay, whatever like 876 00:45:05,570 --> 00:45:08,410 yeah It'd be it'd be really amazing if like apis was the same thing. 877 00:45:08,420 --> 00:45:15,145 Like yeah, we used to like You'd write like an HTTP method and then you sort 878 00:45:15,145 --> 00:45:20,074 of like make up a name that sort of meant something and then you like how 879 00:45:20,075 --> 00:45:24,435 to like remember to like write it all the same thing and your client you know 880 00:45:24,444 --> 00:45:29,764 you're like it's not a post it's it's a put and you have to like no typos and 881 00:45:29,764 --> 00:45:35,000 they're like that's it's like a lot of tedious, fragile, annoying code to write. 882 00:45:35,010 --> 00:45:36,910 And you're like, yeah, it was, it sucked. 883 00:45:37,750 --> 00:45:40,539 And they're like, I just used like the library and I just sort of typed stuff 884 00:45:40,539 --> 00:45:45,390 and like, you know, Copilot v10 just sort of like spits out whole, whole, whole 885 00:45:45,400 --> 00:45:48,769 stuff, you know, cause it just introspects on my whole data system and like writes 886 00:45:48,770 --> 00:45:49,929 out super efficient stuff for me. 887 00:45:49,930 --> 00:45:53,930 And yeah, I, I, I'm very big on like, you know, getting rid 888 00:45:53,930 --> 00:45:54,840 of work we don't have to do. 889 00:45:55,030 --> 00:45:58,380 Um, and I think there's a lot left in programming that you 890 00:45:58,380 --> 00:45:59,040 really shouldn't have to do. 891 00:46:00,639 --> 00:46:01,700 Let's leave it here. 892 00:46:01,800 --> 00:46:03,929 Anything you want to share with the audience? 893 00:46:04,485 --> 00:46:05,615 Have fun, build cool stuff. 894 00:46:06,115 --> 00:46:06,835 That sounds great. 895 00:46:06,935 --> 00:46:09,115 Kyle, thank you so much for coming on the podcast. 896 00:46:09,115 --> 00:46:09,895 This was a lot of fun. 897 00:46:10,455 --> 00:46:11,405 Yeah, it was a lot of fun. 898 00:46:12,287 --> 00:46:14,827 Thank you for listening to the localfirst.fm podcast. 899 00:46:15,067 --> 00:46:18,797 If you've enjoyed this episode and haven't done so already, please subscribe and 900 00:46:18,797 --> 00:46:20,557 leave a review wherever you're listening. 901 00:46:20,927 --> 00:46:22,357 Please also tell your friends about it. 902 00:46:22,367 --> 00:46:25,937 If you think they could be interested in local-first, if you have feedback, 903 00:46:25,977 --> 00:46:29,717 questions or ideas for the podcast, please get in touch via hello at 904 00:46:29,717 --> 00:46:35,497 localfirst.fm or use the feedback form on our website, special thanks to Expo and 905 00:46:35,497 --> 00:46:37,547 Crab Nebula for supporting this podcast. 906 00:46:37,947 --> 00:46:38,707 See you next time.