Building peer-to-peer apps with the Beaker Browser - Tara Vancil
And Programming on the web but, maybe they don't have the time the, money or the expertise, to run a server, and. I think this is supported by the fact that we're seeing. Services. Like neo cities and Glitch do so well today. Glitch, is doing amazingly, I think, because people love, it it allows you to publish a website or an app with, just one click. Um. And so I think we should take notice of this I think we should say huh you know maybe the, web isn't actually, very good, at enabling, publishing. And deploying maybe. There's room for improvement there and. I, personally, think there is. Ok, my, second complain about the web is that apps aren't, customizable. Well. What do I mean by that. Apps. Are embedded into every, part of our life we use them for our. Banking, we use them for connecting. With our family and our friends we, use them for our professional, lives, yet. When, it comes to web apps we, have very little say over. Influencing. How they work. If. Anyone uses Instagram. You've probably long for a chronological, feed, I know I do I do sometimes, like this jumble to feed but also, sometimes, I just want a chronological feed, and, there's, not much I can do to get. That I can't, use a web extension, to fix this I just, kind of have to deal with it and that. Bums me out. I. Also, love Twitter I Twitter's, the reason I'm on this stage in the first place it's how I met a lot of web developers and, was able to share my work but. I've been pretty frustrated, with Twitter lately for a dozen different reasons. Most. Recently twitter has shared that they're exploring, a new feature called presence, which, would tell. Other Twitter users when you're online and when you're offline. Now. This could. Be useful in some cases but, for me is that. Is not how I want to engage on Twitter in, fact it would probably drive, me away from Twitter, and. I find it kind of sad that even, though I love Twitter, the platform, so much I don't have, any way to actually. Shape. How it works. Now. Chronological. Feeds and presents may seem like, minor. Features, they're really not that important. In the grand scheme of things but. When you step back and you look at the big picture. We. Really as users, have no way, to shape the little things or the big and meaningful, things, because. Our online experiences, are defined by corporations. And. When I think about the longevity of the web I'm. Not so sure I like this I'm, not so sure that I'm willing to trust corporations. With the next 30 60, or a hundred years of the web I kind. Of think it'll work out a little bit better if we as the people who use the web have, some, ability to customize. The apps that we depend on for everything. The. Last thing the, last complaint I have about the web it's is that it's too hard to connect what, in the world do I mean by that well. This one's sort of related to my, first two complaints. What. I mean is that it's too hard for developers. Like you and me to build applications that, connect, users. And. When you look at all the different kinds of apps that we use chat, applications. Social media, photo, sharing so. Many of these apps are about taking two people, and connecting, them in some way so it's a pretty fundamental, thing to connect people on the web. Let's, look at this example this is let's say this is slack and you're trying to send a message to your friend to ask if they want drinks later first. I would send the message to slack, and slack. Server would then pass that message on to my friend, now. There's nothing inherently wrong with this architecture, it, works pretty well actually.
But. What, would the web look like and what would it feel, feel. Like to build applications, if the, web platform itself. Made. This a little bit easier, what. If the web itself. Made it easy to send a message, directly. From one person to another. I personally. Think this is way too hard on the web right now and I think a lot of our the, problems. We're seeing on the web today, stem. From this difficulty. Okay. So in summary my three complaints about the web are that servers suck, we can't customize, apps, and it's, too hard to build apps that. Connect. People together. So. It's probably about time that I stop complaining, and start offering some solutions. And, this is where my, work on the Beeker browser comes in. Beaker. Is an experimental. Browser. Our. Experiment, is motivated, very deeply, by the complaints, that I just presented a moment ago. And. I work on it with these two guys P Frazee and McIntosh if, you've ever used a, node module you've probably used. Some of math and touches code he's one of those prolific. Nodejs authors. And. We were motivated to build beaker because, we love the web first of all and second of all we wanted to help improve it and, we saw a few paths forward for, helping, to improve the web we, could have gone and got a job with my firefox. Or Microsoft, edge or Chrome or we could have somehow gotten involved, into the web standards processes. But. The ideas that we had about how to improve the web were honestly. A little bit wacky, and far off and we weren't we, weren't sure that our. Ideas would be well-received in those venues so, we thought you know why. Don't we just make a browser and run. These weird experiments. And just. See what happens and that's. What we did, and. The. Core experiment, we're running in beaker is, what. Happens, if you put a peer-to-peer protocol. In the, browser and more. Specifically, how, does that change how we build websites and apps. Well. I think to answer that question I first, have to tell you what appeared if your protocol, is. And. I think the best way to do that is actually to contrast, it with a client, server files protocol, so. A good example of a client-server, protocol, is HTTP. Which I'm sure, a lot of us are familiar with. And this. Is actually pretty easy to understand, you have a client like a browser that, makes a request to a server and says hey do you have the cat PNG. File and the, server says yep here it is and sends it back to the client. Now. A peer-to-peer protocol. Works. Kind of like it sounds, you, have a bunch of participants. Or peers, on a network and when. One of the peers requests. A file it. Asks the whole network and anybody, who has that file can, send it back to them so. It has this neat effect where these. Regular, devices, whether they're laptops, desktop, computers, or phones can. Actually help to host, files and, step. In to do the sorts of things that servers. Normally, do. And. I love this because it kind of makes hosting, a communal, effort, it. Reduces. The burden in the cost of having to run a server and makes makes publishing. Files a lot, cheaper than it would be in a client-server, model. And. The peer-to-peer protocol, that we use in beaker is called debt and I just wanted to give them a shout out because they're, a really fantastic group, of people they're. A non-profit so, if you, work out an organization, that might be interested, in supporting the. Sustainability, of an open-source protocol, I would definitely check that out I can endorse, them wholeheartedly. So. Let's get back to this question how might a peer-to-peer protocol, change how we build on the web. Would. It make servers suck less my. Tabs become customizable, might, it be a little bit easier to build, apps that connect, real users.
Well, I think at this point the. Best thing I can do is show, you beaker, and see, if we can start answering these questions. Ok, so forgive, me if the URL bar is a little bit small I think this is the best I can do here but. This is beaker, it's a browser it should look and feel pretty, much like the browsers that you're used to seeing it has, a new tab page and. A, URL bar, and you. Can even open, in HTTP. Pages, we haven't blocked off the traditional, web just yet so why, don't I show you a peer-to-peer website. This. Is the Beeker website and one of the first things you might notice is that it doesn't have an HTTPS, URL, it has a DAT URL, and again, that's that's the peer-to-peer protocol, we use and. What this means is that I'm not downloading, this website. And it's files from a server I'm downloading it from the network I'm downloading it from whoever. Is whoever, else is visiting this website currently. It. Looks like nobody else is visiting this website or we're not very popular. And. It. Works just like you would expect a website to we, have image tags, links. Work just like they do on, the, web that you know and love and that's. Kind of the whole point we didn't, want to break the web we just wanted to take, the web and tweak, it a little bit and see what happens. So. One of my favorite features about beaker is that if you really like a website, you can choose to contribute, resources. To help keep it online so, I've, actually chosen to seed this website, forever. You. Could toggle, that down to a month a week or a day it's. Up to you I'm gonna stick, with forever because I really. Like this button this website. Okay. So, if you can host other people's, websites, what's. To stop you from being able to host, your, own website. On this peer-to-peer network. Well, nothing, and. This. Is one of the coolest features in beaker you, can actually create a website from. Beaker and host it directly from the browser so. That's what we're going to do I'm. Gonna open the main menu and click create. New, and. We've got three options here we can create, an empty project we, can import, an existing website, but, I'm actually gonna use, this, template, just for the sake of convenience and, when, I click this button beaker, is going to create, a new website just, like that so, it'll, happen pretty fast. Okay. So we've, created a new website and this is actually, the view source of, beaker. So. Let me give this website a title. And, let's open up, the website and see what it looks like, it's. A pretty boring website it's, just a little static site that doesn't. Do much except lets, you change the background color. But. Let's jump back over to the view source and take a look so as you would expect you, can view the source of any. Given file on in, the website. But. Even cooler you, can edit files, so. Let's, open. The editor for, this index.html. And let's. Edit the, h1, tag I'm gonna say hello. Barcelona. And when. We save this and go back and refresh. We. See the change. Okay. I'm gonna turn, on live, reloading, beaker, has a built-in live reloading, tool and. We're. Developers. And I'm sure a lot of you have preferences, about your code, coding, environment your text editor and you. Can totally use your preferred text editor with beaker I'm. Just going to copy, this. Website over to a, directory. On my device, and. If I open it up in sublime. Let's. See. I'm. Going to say hello, from, sub, 1, once. I save this. It. Should refresh, automatically. Yeah. There we are so we've edited it the website it's live reloading, this, is pretty cool huh. It's. Just a static website but I think what's important to notice is that, there's. No server involved here I could, share this URL with any of you and if you open it up in beaker you'll download it directly from my computer and. To me this really captures the spirit of what the web was supposed to be it's, supposed to be a platform that we can use to build and create and share. I shouldn't. Have to set up a server just to send someone, some. Files that, seems a little bit excessive. Ok. So let's. Go back to our checklist here and see what we've been able to accomplish have.
We Made it so that servers, could suck suck, less. Yes. I would argue that we have or rather, that we've made it so that maybe, we don't need to depend on servers, so, much in order to build a website. Okay. So let's visit these last two questions could we make it so that apps are customizable, and can, we make it so that it might be easier to connect users. Let's. See. So. Before. We answer those questions I think we should reflect, a little bit about what even is an app and when, to talk about web apps it's, kind, of a blurred line between a website and a web app right because, a web app is just a, website that has, more functionality. Than other websites it might, do things like store data it might, manage user profiles, or preferences, and of course it's going to probably need to update data. And. The. Way that we do this on the, web today is with, post requests, typically you. Run a server that has, an endpoint and if, you want to update. A piece of data you make a post request to that endpoint and then, your database handles, the. The, requests and, updates. Your record and that works fine but again it, requires running a server and that's just sort of a pain. The. Way we do this on the peer-to-peer web and in beaker is a little, bit different it, kind of flips the idea of databases, on its head and says hey. Wait what. About just, storing, data in, websites. Themselves. I mean websites are made of files we. Can store data in files like how, far can we go with, just, using, websites. To store data and so. This is an example that uses, beakers. Api's, to. Get an instance, of my website. It. Creates a profile, and it's. Going to write the file write, the, profile data to a file called profile. JSON. So. This this, write file method I like to think of it as a way to write. Records. In a database and. If. This isn't making sense I think I'll just show you how this works and in, a simple example so. I'm going to open up the. Sol here. And. What. I'm gonna do is I'm. Going to create a new file in this website that we made earlier, I'm, just gonna create an HTML file for the sake of an example, so. I'm gonna start by getting an instance, of, this. Website. And. What. This gives us is an object, that has access to all of beakers peer-to-peer api's.
And Now. I'm going to use this to write a new file I'm. Gonna call it full. Stack FSH, tml and I'm just gonna write a simple message hi. Okay. And. It. Refreshed because I forgot to turn off live reloading so why don't I do that real quick and then. We'll go back to the terminal. Let. Me double check I need, to start over because why, we're loading got rid of our reference. Okay. So. We wrote the file um if all went well there, should be a new file at FSF, dot HTML, and we can actually use beakers api's to check that as, you might be able to guess we have a read file method so, we can say site dot read file. And. It's. Going to return a promise so I'm actually going to console, that log the output. And. There. We go we can see in the console that it, indeed. Did write the word hi to the, file and, we could also confirm, that by, just visiting the file. There. We are, okay. So like that's cool, right but. It's not all the thing that exciting, that's just a static website what about an actual app that does something how do, these api's, factor, into apps. Let. Me show you an application called fritter. Fritter. Is an example application that, we made to, really test the limits of these api's and see, how far we could get building, something, that people might actually want, to use as. You might guess this is inspired, heavily, by Twitter it is a microblogging. App and, I'm not actually Beyonce, I know it's hard, to believe we look so much alike and, we're both very good dancers. This is just my test profile. And, the, way this application, works is, that. It takes. My. Profile, and it. Aggregates, it into a nice view using, the beaker api's. So. This, is what a profile, looks like on fritter it's, just a website and every, user has their own website, that represents, their profile, there's. A metadata file that. Contains, a person's name their, bio and, it, also tells the, application, who they follow so, that the application, can then use. Beakers. Api's to to. Fetch, the, the, feeds of other people and render it into a view. Let, me show you my, posts because I think that's kind of interesting too. This. Is what a post looks like it's just a JSON file that contains. Text. Property and a, created, at timestamp, and again, this is the. Footer application. Uses. This to render, views. Okay. So one, of my favorite things about fritter. And this this architecture, for building applications, is that the application, is completely, separate, from the data, normally. When you think about applications. On the web the, the user profile, belongs, to some, server in the cloud and that server is responsible, for maintaining. Maintaining. That that profile. But. Because we separated, the application, from the data we're, able to do some really cool things. Let's. Say I don't like, rounded. Buttons and I really prefer square, corners, well. Beaker. Has a feature that allows you to take any website, or any application and, make. An editable copy of it I'm, not going to go through this whole process, right now but, I could go and I could make it change, to the CSS, of this application, or. I can change it even more substantially, and I, can continue using my profile, I could continue following, the same people that have already followed, I wouldn't, need to give up my my content, my likes or my network. So, here, we there you go you've got customizable. Apps. We've. Checked off number two and. So, the last thing, that we were trying to accomplish is, to see can we make it easier for developers to, build apps that connect users well. This is an application that is all about connection, right it's probably the most connected kind of app you can get it's social, media so. How does this work how is it that because, I follow. Paul I'm able, to get his. Get. His posts, well. If. We go back and look at when, I explained, how a peer-to-peer protocol, works if, you, just look at this graphic, you can see that it's already a very connected, kind of protocol by, default, peer-to-peer, protocols, are good at connecting. People, so, with behavior we don't really have to do all that much extra, work to make it easy, for developers to do that because we're just piggybacking, off of what the. PDP, protocol is really good at in. Beeker, the way this works is we've exposed, an API called, watch which. Basically lets you just take any URL. On the DAT network and watch, it for changes you, don't have to do anything special you don't have to set up a server that periodically, pulls, an endpoint for changes you, just use this API and, you. Get events when something changes or if. There's. An error with an update you can respond to that as well and that's. Exactly how this application works if I, were to follow someone fritter.
Would Basically just use that watch API to start. Listening for changes to their, profile. Website. So. I think we have started. To address my. Three complaints about the, web and I, hope, that I've convinced, you that there's at least some promise in peer-to-peer protocols. And that. The. Web itself should really be thinking about, the. Capabilities, that peer-to-peer protocols, offer. I'm. Really optimistic about the future of the web I think it's just too good to let it fall to the wayside if, you think so too I hope that you'll pester. The. Other browser vendors to maybe, start considering some the ideas that were exploring. Because. There's only three of us and our voices aren't really allowed enough to convince them, thank, you very much for listening if, you want to check out beaker you can install it on beaker browser comm, and I'll. Be around so feel free to chat with me later, thanks. So. With your permission I've collapsed, some of the questions to. Share, with Terra and then, perhaps online, you. Might take a moment to go into a few more details but, if we could just I'll just, highlight. Two of these sort of areas people brought up one. Had to do with when, it's all decentralized. Some. Of there's a couple of things that we've seen with other decentralized. Apps. That come up there, were some questions about how, do you redact something, there's a mistake or something you want to pull something off the web some of my old presentations. 2004, blog posts how do you pull those back when it's all decentralized. And. In the same vein, something. Like GDP. Our personal, data gets on there how, is, that controlled, can you just give us a sort, of an outline of that yeah it's a really important question and actually, I think the situation, with decentralized. Protocols, is not. Much different than what we have on the web right now because if I publish something. I've accidentally. Published draft, blog posts, on my website before and, there's, a good chance that it got crawled before I had had, a moment to take it down and what, do you do in that situation you, can put up some, sort of requests, that tells crawlers, hey, this, was a mistake, can, you maybe take that down don't cache that and. That. It's going to be the same story with peer-to-peer protocols. There. Will have to be some sort of tombstone. Marker that you can send out that, is basically a request, of the network to say hey please forget about this now. The, problem with peer-to-peer protocols, is that you're depending. On a much. Larger, crowd to respect, your requests, and. Most likely they probably won't. So. We'll. Have to see how this plays out and especially with regard to regulation like gdpr I think this is completely, untried. Water so, we'll, we will see so. In other words there's an opportunity, for people who are really excited about this to come and get, involved and solve some of these problems yes, there's, a blank canvas okay another one if I may which, is kind of related so. We, talk for a moment about you know how do you pull stuff back how do you control the, opposite, and it decentralized some sometimes it torrents and so on something isn't popular maybe, nobody wants to read my blog I don't blame it and. So nobody is replicating. It or whatever the correct where it is pardon me that this is all very new to me how. Do we ensure that if. This is built for peers for the for the little person that, people, get a chance to disseminate, their their. Work across the across. The network even if they're not super, popular yeah, so. A peer to peer network works, really well when content, is popular and it's actually, why it's so special because, if you have a video go viral you really, don't want to pay the bandwidth cost of that video going viral and a peer-to-peer network again, helps. Distribute. That cost but in a situation we like me where my blog is not very popular I still want my content, to stay online so, that when, you know one of you goes and visits one of my old blog posts you can get it we. Have this concept called a super, peer and. A super peer is simply, a node, on the network that. Promises, to stay online to, do a good job of being available now. These super peers don't have any special privileges like, servers, do today, all they do is make that promise you send them a URL send, them to the URL to your blog and say hey I would really like you to keep this online and maybe, a super pele peer will offer that for free maybe they'll charge you a couple bucks a month but I think it's a really interesting concept, because it. Has, no special privileges it's, just making a promise. Fantastic. Folks what do you think, what. Do you think.