Placeholder Image

字幕表 動画を再生する

  • Hi, everyone.

  • I am excited to be here and really, really excited we get to start the day off and the

  • conference talking about peer-to-peer protocols because it is something I think is super fascinating

  • and I have interesting stuff to show off later in my talk.

  • This talk is called reclaiming the web with peer-to-peer protocols but before I dive in

  • and tell you what in the world that is all about, I want to introduce myself.

  • I am Tara Vancil and I am a web developer.

  • I'm also really, really into anything to do with nails and nail art and I love music,

  • especially if it is from Beyonce.

  • If you like nails or Beyonce or both we should definitely talk later on.

  • I am a web developer but I have spent the last year and a half in a strange role.

  • Instead of working on a team where my job is to build websites, I have been building

  • a browser with these two guys.

  • Pfrazza and mafintosh.

  • We have experiments we want to run and figure the browser is the best place to do that.

  • The browser is called Beaker and it is experimental way meaning we are doing experiments in the

  • science way not that it is buggy.

  • It actually works.

  • You can download it.

  • The cool experience we are running in Beaker is what happens when you put a peer-to-peer

  • protocol in the browser.

  • Pretty interesting things happen like being able to publish a website from the browser

  • and being able to offer experimental peer-to-peer APIs to developers.

  • I will tell you a lot more about Beaker and show you Beaker later.

  • Before I do that, I want to spend some time to reflect on what even is the web because

  • I think it is relevant to your conversation.

  • -- our.

  • So, I am asking this to reclaim the web and we should probably talk about who took it

  • in the first place and what have they done with it.

  • We are all here in this room at a conference dedicated to the web so surely the web can't

  • be in too much trouble; right?

  • I have to agree.

  • I am extremely optimistic about the future of the web.

  • I am really pleased with where the web is at right now.

  • I am really happy to see so many new people still coming to the web every day to learn

  • how to build things with HTML, and JavaScript, and CSS.

  • I am pleased to see that the tools we depend on like NPM and WebPack and Babel are improving

  • to make workflows seamless.

  • And I am thrilled browsers are working hard to improve the web and compatibility across

  • browsers.

  • If you are not optimistic about the web, I might highlight the Chrome Developer summit

  • happened this weekend.

  • This is an opportunity for Chrome developers to share ideas and prototypes about how the

  • web is going to move forward.

  • They announced cool proposals like virtual scrolling which should help you improve loading

  • as you scroll down a page and other neat stuff was demoed like Houdini which is an improvement

  • on how CSS works.

  • Seeing the neat announcements earlier this week gave me time to reflect on the wins of

  • the web like CSS grid which if I dare say makes com posing layouts kind of fun or the

  • fact that Boku has been working hard with the W3C and other browser vendors to build

  • a huge test sweep for compatibility across the web.

  • The web is making progress and I think it is important to recognize that and the people

  • that make it happen because their jobs are not easy.

  • Also because the web is a miracle of human cooperation if you think about it.

  • When you take a second to think about what the web is it is a miracle it exists and let

  • alone that it is improving.

  • The web is this strange thing where 7 billion people on earth have come together and decided

  • on a language for how we build digital stuff and get it from one computer to another.

  • Like, that is absolutely miraculous we pulled that off.

  • You have a web page and no matter what context you are browsing in, you have a reasonable

  • expectation it will work consistently.

  • If you will allow me a moment to be sentimental I just want to say I think that is bad ass.

  • This is a talk about reclaiming the web, though.

  • Even though I am really optimistic about the web, I am a little bit worried too.

  • I am worried about the web isn't perfect and honestly that is OK especially when you think

  • about how this web is a weird amorphous set of technologies that we have all agreed to

  • use and that is pretty much the only thing binding it together; our shared agreedness

  • to use it.

  • The web is only 28 years old.

  • The first was built in 1990 by Tim Burners-Lee.

  • It was only 25 years ago the first mainstream browser was released.

  • We are operating on a small time scale here.

  • The web is a baby so you would expect it to have some problems.

  • The web isn't perfect.

  • We can accept that but I think the next step is to ask ourselves how are we going to shape

  • the next 30 years and I mean, we, the people in the room who are web developers and people

  • who influence standards, we do have say over how the web works.

  • We know that the web is going to change because there are standards of bodies and browser

  • vendors and other interested parties who want to shake the web but the question is what

  • values are why going to choose to uphold in the next 30 years?

  • What new features are we going to enable?

  • How do we decide those things?

  • Oftentimes, I think they are decided by personal experience.

  • Some of you probably work with e-commerce and you might be paying more attention to

  • the web payments API.

  • Or maybe some of you in this room have been the target of a focused-harassment campaign

  • on social media and you might have an interest in seeing how the web learns from what we

  • have seen about how humans engage online in the last 28 years.

  • The web is very, very new and we are still learning so much about how communities work

  • online and how humans behave.

  • When I think about what I want to web to look like in 30 years, honestly the community bit

  • of it is what interests me the most.

  • Yeah, the graphics and all the cool technical stuff about the web is amazing and it is what

  • makes the web the web but we come to the web because we want to talk to me.

  • We want to share interests, make friendships and form communities.

  • I am extremely interested to ask how can the web platform itself change, however subtly,

  • the ways we interact with each or online.

  • Whether you like it or not, this guy right now has a lot of say over how online communities

  • work.

  • And I am not sure he knew what he was getting into when he started Facebook but the point

  • is Facebook is a massive, global online community and we have learned some kind of terrifying

  • things about humans interacting with each other online.

  • We are mean, we are nasty, we are reactive, we are just not very good at talking to each

  • other, are we?

  • This guy and other folks are in charge of helping us move forward.

  • I frankly don't think they have stepped up to that responsibility very well.

  • I want us, as web developers and a web community, to think about what can we do to adjust how

  • people talk to each other online?

  • Are there some nobs we can turn in terms of the technical architecture of the web that

  • can improve the situation?

  • I don't know but this question motivated me to work on Beaker and it has been the guiding

  • star in my exploration and the experiments we have been running at Beaker.

  • So to go back to the question I mentioned earlier, what happens when you put a peer-to-peer

  • protocol in the browser?

  • Would that be the right knob to turn to maybe make it a little nicer to communicate with

  • people online?

  • I don't know.

  • I can show you some of the experiments we have done and share some of the things we

  • have learned in the process.

  • Before where do that, let's just take a look at HTTP because this is the knob we turn in

  • Beaker.

  • The protocol knob.

  • This is the distillation of how HTTP works.

  • It is a client server model where one person can upload data to let's say Facebook, Twitter,

  • WhatsApp.

  • A person gets the data from the service and there is nothing wrong with that architecture,

  • but I would like to propose HTP and this client server architecture is a big part of why we

  • have gotten the way -- a big part of why online communities, massive online communities, have

  • turned out to be so problematic.

  • In contrast, this is what a web base on a peer-to-peer protocol looks like.

  • This is a contrived example but it is a network wherein one individual can connect directly

  • to another individual.

  • In this case, we are looking at someone sending a message but we can also think of websites

  • being transmitted from computer-to-computer and cutting out servers.

  • Why don't I just show you Beaker because I think it is a lot more exciting to see this

  • stuff in action.

  • This is Beaker.

  • It is a browser.

  • It is not terribly exciting to look at when you are just looking at the start page but

  • it works like you would expect a browser to work.

  • You can browse HTTP websites.

  • This is the Beaker website and nothing remarkable here.

  • But if you can see in the top corner there is a tab that says P2P version.

  • When I like that it will take me to the peer-to-peer version of this website.

  • There is.

  • You probably didn't even see that.

  • The only thing that's different is the protocol.

  • It says dat and that is the protocol we use in Beaker.

  • This website doesn't look like anything special.

  • It is just a bunch of files, CSS, HTML images, links, everything.

  • It works just the way you would expect a browser to work.

  • I mentioned that by putting a P2P protocol in the browser we enabled things like publishing

  • a website from the browser.

  • I am show that off.

  • I will go to the top-right menu and click create view and I will create a website using

  • a pasted template Beaker provides.

  • Beaker will literally create a new URL for me and populate the website with basic template

  • files.

  • I will click it and it will happen fast.

  • Boom.

  • We are looking at Beaker's view source tool here.

  • I will show you more but let me set the title of the website for now.

  • Then I will open it up.

  • Here it is.

  • It is just a website.

  • It doesn't do anything except let you change the background color.

  • What is interesting about this is this is a website and I can share the URL with any

  • of you and you can download the website and files directly from me.

  • I didn't publish the files on a server anywhere.

  • I did it all inside the browser.

  • How do you edit websites?

  • If we jump back to the view source tool we can look at all the files that compose a website.

  • Why don't we open index.html and actually edit it.

  • I will change this to say hello, Seattle.

  • Hit the save button.

  • When I refresh I will see the change.

  • Cool.

  • I want to show off this neat feature we have which is live view loading.

  • We put that right into the browser because it is so convenient.

  • Like a lot of us in this room who are developers, we probably have a preference about writing

  • code like Sublime or VS code.

  • This syncs the files to a directory on my computer.

  • OK.

  • I am going to open this up in Sublime and open the index.html in Sublime and go back

  • to this website.

  • We have live view loading on and I will edit the H1 tag to say hello from Sublime and when

  • I hit save you will see the updates.

  • Boom.

  • There we go.

  • This is neat but I mentioned earlier that Beaker also has peer-to-peer APIs.

  • This is really where it gets exciting because static websites are cool and make up a lot

  • of the web.

  • They are not every part of the web.

  • We still need applications where people can have profiles and data linked to their profiles.

  • Beaker's APIs are the key to making that possible.

  • I am going to open the dev tools and show you a little bit of how this works.

  • To start off, we need to get access to the files that compose this website.

  • I am going to do that using Beaker's datarchive constructor which basically gives you

  • access to the functions that help you connect to the peer-to-peer network.

  • We have a variable that we will be able to work with here.

  • Let's start off with just listing all the files in this website.

  • You might notice this looks a lot like the Node files API and that was on purpose.

  • Let's do files.readdir and we will read the top level directory.

  • Then we will console.log the output.

  • We are seeing a listing of all files that compose this website.

  • There is only 65 of them right now.

  • Let's see if we can read an individual file, the content file.

  • So files.readFile and let's do index.html file.

  • We are looking at the actual content of this page now.

  • We can do all sorts of things like readfiles, readfile listing, and we can write two files

  • also.

  • This gets interesting when you think about storing data in websites.

  • I am actually going to overwrite the HTML file for this website.

  • Files.writeFile and I am going to replace it with a new h1 tag.

  • OK.

  • Now when I refresh I get a totally new index with HTML.

  • Again, this is sort of a contrived example but I want to take it back to a real world

  • example.

  • I said I am interested in thinking about how online communities can be shaped by the intelligent

  • that underpins them.

  • I want to show you an application that we built called Fritter.

  • This is Fritter.

  • As you can probably guess by the name and appearance, it is inspired by Twitter.

  • That was on purpose.

  • I really like Twitter.

  • I like a lot of things about Twitter.

  • I dislike some things about Twitter but I like that it gives me a nice feed, I can follow

  • my friends on, and I like that the content is short, sweet, and enjoyable most of the

  • time.

  • So, we said how far can we get with building something like Twitter using peer-to-peer

  • protocols and we got pretty far actually.

  • It is pretty cool.

  • This doesn't look like much but I will break down the architecture.

  • Fritter works in two pieces.

  • There is the application itself which is what we are looking at.

  • It is a JavaScript application that uses Beaker's APIs to consume a profile and fetch data from

  • the peer-to-peer network and render it into a nice feed.