Chad Miller 0:32 titled Abstracting the App View. Speaker B 0:42 Okay, sweet. Speaker C 0:46 Awesome. 0:47 Yeah, I'm Chad Miller. Speaker B 0:51 If you want this one, or you can use this mic if you want. Speaker C 0:54 OK. 0:55 Can everybody hear me? Speaker B 0:55 Just for the stream. Speaker C 0:58 OK. 0:59 Yeah. Chad Miller 1:01 Is it on? Speaker C 1:02 Is it— hello? 1:03 OK. 1:04 My name's Chad Miller. 1:06 You can find me on Bluesky, chadcmiller.com. 1:10 I've been doing a lot of different experimentation with app views, so a lot of— experiments with apps that aren't Bluesky clients or anything related to Bluesky at all. 1:22 Just kind of like, you have some custom lexicons and you want to build an app. 1:27 So I've been doing a lot of experiments with that. 1:31 What is an app view? 1:34 If you don't know, it kind of sits in between the Relay and the sort of client that you're using. 1:41 So you have all this information flowing from the— all of your records flowing from the PDS through the relay. 1:49 The app view sort of is a place that stores all of your records and brings them all together from all the different PDSs across the network. 2:01 And then sort of hydrate— brings all that data together, hydrates it, so your like counts and your comment counts. 2:09 And all that stuff, and provides it to, you know, your web app or your mobile application to render it on the screen. 2:21 If we look closer at the app view itself, there's a bunch of things going on. 2:26 So we have a Firehose connection, but we also need to take into account pretty much all the data that we care about. 2:35 So the backfill, that's the backfill portion. 2:39 So we have some kind of indexer that's going to take in all of these events from the network. 2:45 You have, like, commits. 2:47 They're called commit events. 2:49 So you have creates, updates, deletes. 2:53 Those then, you know, you filter those down to what you care about. 2:57 So you might only care about a, a— what is the— a connection lexicon from the connection app that everybody's been using. 3:10 You might only care about that, so that filters through the database, and then you sort of have a hydration layer that's going to request all those and return them via what in— at Protoland is called xRPC endpoints. 3:26 Really it's just an HTTP endpoint that's typed against your lexicons. 3:29 So you can define what the responses are in your lexicon definitions. 3:35 And then if we look a little bit closer at the sort of request pipeline, you'll, if you look closer at the app.proto repo, you'll sort of see this pattern a lot. 3:46 And you sort of fetch all of the, you know, you batch fetch all these records from the database. 3:53 Apply some rules to them. 3:55 This might be some labels that you have, some map for moderation. 4:02 And, you know, bringing all that together, all the, the like counts and the comment counts together to return the JSON response. 4:13 So where can you get started if you want to build your own app view? 4:18 The main reference repo is the appproto repo. 4:22 That is essentially the backend for Bluesky. 4:26 How many people have spent a lot of time digging through that code? Speaker B 4:31 Yeah. Speaker C 4:33 There's Stratosphere. 4:36 But it's pretty basic. 4:36 It just has, like, a single CRUD. 4:39 It's just, like, a create operation. 4:40 So it's not really, like, that much going on. 4:43 And obviously you want your app to be a lot more a lot richer than Statosphere. 4:51 And then we have all the community app views. 4:53 We have Leaflet, Tangled. 4:57 What else is there? 5:00 Margin. 5:02 There's Offprint. 5:03 There's all these app views out there now. 5:06 So there's a lot of good reference places, depending on which programming language you're into. 5:13 And right now it's kind of like, you know, an art project. 5:15 So everybody has their own implementation of what, you know, it says on appproto.com and the specs and what they've sort of gathered from the appproto repo. 5:27 I have spent some time sort of putting patterns together into a service that you can just deploy called Quick Slice. 5:35 And it sort of maps your lexicons to a GraphQL API that you can just query without having to do a whole lot. 5:46 And then there's also Constellation. 5:48 There's sometimes you might not need an app view. 5:50 So Fig's APIs provide a way to just get like, like for example, NPMX just wants to show the like count on their, on their packages so they can just use Constellation for that. 6:04 So they don't even need NetView. 6:07 So what are all the things that you need? 6:08 You need a way to backfill all of the data on the network. 6:14 So that is going to be— you've probably heard a lot about TAP. 6:19 TAP provides a way to filter those collections that you want. 6:25 There's also other ways. 6:26 You can parse the CAR files manually and have your own process for backfilling. 6:32 Indexing. 6:33 So you need some sort of layer to translate the lexicons— the lexicon records into your database. 6:44 And then there's some kind of code gen aspect which works with the lexicon definitions. 6:51 Again, with the XRPC endpoints. 6:53 So usually when you're working with lexicons, you want a way to have type-safe endpoints against those. 7:02 OAuth, generally it'd be nice to have this all figured out for you and you don't have to worry about it. 7:10 And not really necessary for every application, but there is this concept of the feed generator in Bluesky, which is a separate server that you can run. 7:23 That pretty much just returns the URIs of records that can be picked up by Bluesky to render a feed. 7:31 That same pattern can be used in any App Proto application. 7:36 And I'm actually gonna show you, really, in a second, what that looks like. 7:42 Labels. 7:43 Obviously, if you want to do some kind of moderation, you're gonna need to have some sort of support for labeling. 7:49 This can be a simple, just a simple table in your database to make it quick. 7:56 And then preferences. 8:00 Sometimes you want to have data that's stored privately to the app view. 8:05 And you can sort of just have a preferences table for that. 8:11 And then Open Graph. 8:12 So generally you want to have a way to, like, share images— image previews back to Bluesky for rendering, like, a social post. 8:25 So I've been sort of playing around with the newer ideas in this framework I call Hack. 8:31 It's sort of like a conventional— like a convention over configuration, although there's still some configuration. 8:39 Framework for building an app view. 8:42 You can sort of attach this app view server to a Svelte app. 8:48 You can check it out at hack.dev. 8:51 It's pretty early alpha. 8:52 Just sort of playing around with some ideas. 8:55 I just recently rewrote Grain Social to use— this is the— rewrote Grain Social to use all these patterns. 9:05 It's all open source, untangled. 9:07 There's a bunch of feeds here. 9:08 So, like, you can— people upload photos and it shows the EXIF data as a feed and locations as a feed. 9:17 And then there's actually one thing I wanted to point out is there's a great pattern for running your app view locally. 9:26 A lot of times it's hard to reproduce stuff because there's a lot, you know, there's a lot of stuff that you have to do to bring an app view together. 9:34 There's a pattern in there for running your app locally and having reproducible data that you can use to help build your app. Speaker B 9:44 And yeah. 9:46 That's all I got. 9:48 Sorry. Chad Miller 9:51 They're very quick rounds. 9:53 It's tough to fit in anything in 8 minutes, for sure. Speaker D 9:58 Yeah. Chad Miller 9:59 Thank you so much, Chad. 10:01 Next up we have Tim Ryan, who will be sharing about using Graph QL to build with AT Proto. 10:25 That's the warm-up sound. Speaker B 10:31 Okay, whenever you're ready. 10:37 Actually, I, I'll reset it. 11:24 Hi everyone. Speaker D 11:26 I'm giving a talk about GraphQL and App Proto, or at least like I was trying to figure it out. Speaker B 11:33 On the top? Chad Miller 11:38 Oh yeah, there we go. Speaker D 11:40 From the top. 11:41 GraphQL and App Proto are what I sort of came to find out what they were, comparing two different frontend protocols for the social web. 11:50 My background is I was a former social graph developer for 8 years. 11:55 I designed server-to-client APIs for web, cross-platform APIs.