(upbeat techno music) - So, yeah, John kinda spoiled some parts of the talk, but (audience chuckles) the title is Building a New Web Browser in 2019. Or a story of how Puma Browser came to be.
Who am I? My name is Yuriy Dybskiy, @html5cat on Twitter, mostly because nobody can pronounce or spell my last name, so I had to change it a while back, before there was actual confirmation that HTML 5 is going to be the last one.
So there will be no more HTML 5.
You can email me at [email protected].
I grew up originally in Ukraine, Then I lived in Canada.
Now I'm residing occasionally in San Francisco. I like to play tennis, and I like to ride a motorcycle. Turns out, those are the things you can do here a lot. I didn't realise that Rod Laver Arena is just around the corner.
I was walking around the other day, in the morning, and stumbled upon it.
It's a beautiful city you guys have, a really beautiful city.
And John, thank you so much for the opportunity to give this talk.
This is the first time we're actually speaking so publicly about it.
So yeah, hope I don't fall on my face.
What are my qualifications to build this project? Five people laughed, thank you.
So I started as a web developer.
I was hand coding HTML and CSS long before it was cool, back in Ukraine for tiny amounts of money.
We built a lot of sites, as part of- I don't know.
Have you guys ever used PSD to HTML, or one of those services? Can you raise your hand? Yay.
A lot of it was done in my native city of Kharkiv, Ukraine, which is pretty awesome.
I was a front-end engineer for quite a while, then I switched to do some developer advocacy. In between, I would occasionally try some different ideas, and build things, which would never take off, and so I learned a lot, but that was fun.
I used to work at some other companies called Meteor. How many of you guys used Meteor JS? That was like a thing.
Yeah, okay, very few.
I was hoping for more, but anyways.
So the agenda for today- let me start the timer.
The agenda for today is, why build a new browser? What is Interledger Protocol? What is the Web Monetization Spec? It's a proposal for a W3C Spec.
How we're building it.
Then there's gonna be a demo, and some time for Q and A's. So why build a new browser? John partially covered it.
Web never had a built-in business model, and I think that's one of the reasons we're in the world today, where things are moving the way they are, is cause that was never implemented.
How many of you know what this is? Raise a hand.
Oh, very few, you can shout out what it is. - [Man 1] Actually, a big error.
- Which one? - [Man 2] Payment required.
- Yay, thank you.
That's payment required.
That's part of the spec, it's reserved for future use, which it never got to be used, and if you guys are a fan of HTTP cats, payment required is an interesting one.
Turns out, as I was practising this talk, if you look at the currency that the cat is hoarding, there's a lot of US dollars.
But do you know what the other one is? Awesome, this is Ukrainian Hryvnia.
This is the currency of Ukraine.
Some of it is old, some of it is, this is like the newer version.
This is the newest, which is actually kind of funny, and ironic.
But anyways, as John mentioned, main business model today is advertising.
It created some side effects.
How many of you are React developers? Yeah, you love side effects, right? (audience laughs) - Yes, same with the web.
The side effects may include tracking, and there's virtually no privacy expected on the web. The business model is set up in such a way, that it converges to- to companies wanting to know everything about you, to serve you better ads.
And so I think we need a better option for that. Another reason is browsers stopped exploring as much. There's very little internet exploring left, for the better or for worse, but if you look at the market share of desktop browsers, I guess it's pretty tiny.
But Chrome is, you know, up and to the right. Firefox is slowly going down.
Internet Explorer's stopping exploring, and then the Safari, Edge.
If you look at the mobile market browser share, it's a little bit more interesting.
Some things are happening, still you know, world wide, Chrome is up and to the right.
You know, Safari is kinda stable.
Another browser down to the right.
If you go to the US market share, things are getting a little bit more interesting in mobile.
You actually have Safari around 50%, and then, you know, Chrome, and then some other browsers.
If you go to Australia, percentage goes up a little bit. You guys seem to like iPhone a little bit more. There's some interesting bumps here.
It's probably like new iPhone announcements and stuff. If you go to Japan, Japan likes to take things even more to extreme. I was actually surprised to find that, we are like 65% Safari on mobile, that's a lot.
Chrome is a pretty, pretty small market share. So mobile is actually an interesting- mobile is an interesting space.
That's what sort of got us this idea, to start a new direction.
Then if you look at the browsers over all, there hasn't been much of experimentation.
There hasn't been new approaches, until Brave. Brave, I think, in 2015, stepped up the game a notch.
Came out very strong.
Brendan Eich announced about it, and I think it was a pretty brave decision to do that. As you can see over the next four years, it actually gains some adoption.
In the mean time, we've got paywalls.
That became one of the best ways to monetize your content, looked something like this.
Or this, it makes Koalas very sad.
And so, what can we do to fix it? And I think the answer is twofold.
It's people and technology.
It is mostly people.
While technology can help us, I think we as developers, we as a community, need to come together and start exploring new ways, and building new things.
It will always boil down to people.
And as we started building the project, I started collecting tweets from people who basically ask or like, spell out the things that we're building, for us, which made it really nice.
'Cause when you see somebody that you really like, and you really respect in the web development community. Guillermo was saying that the dream of universal currency is still alive. He wants to top-up the browser, or device, so that he can 1-click subscribe, unsubscribe, and you don't have to see this, myriads of payables, and remember which site you subscribed to, or you don't subscribe to.
Jason Fried also tweeted something similar, which is, he wishes that ad-supported services would just look at how much money they get from you, from the ads, because it's actually a really tiny amount of money.
Your worth to the site creator, when you visit, is tiny. You have to have millions of users for it to be a profitable business.
So it would be so much better if you could just pay a tiny amount of money, directly to the site creator, and enjoy this much better experience.
And so, last year I discovered Interledger Protocol. A little bit before that, so I was like, what is the best way to solve a problem? In 2017, the answer was blockchain.
Let's solve everything with blockchain.
I don't think that's gonna work.
This, obvious, 99.9 of the problems that blockchain is, projects are trying to solve are not good way to do it, to say the least.
And there's a lot of tribalism.
How many of you guys own any Cryptocurrency? It's about 10, 15%, which is a pretty private question, so I appreciate the ones raising.
But the thing you notice, if you expose yourself into Crypto world, is that there's a lot of tribalism.
There's the Bitcoin, Maximalists or not.
There's if you're in a community.
There's XRB community.
Everybody pretty much if you go on Twitter, everybody just throws punches at each other. It's not a very good environment for building something nice together.
And one of the projects I found last year, is called Interledger Protocol.
And as the name suggests, it's a project to help bridge different ledgers, and I really liked it.
I think we don't know which blockchain, which chain, what solution is gonna win in the long term. So having a technology that allows you to span that is really important.
And it's an open protocol.
It was developed by people at Ripple, but it has nothing tied to Ripple.
So that's why most of the Crypto community, being a very religious battle, kind of battleground, they're ignoring this awesome technology, which is pretty awesome and it works today. It's not like something that is theoretical, like most projects.
It actually works today really well.
It was created by Stefan Thomas and Evan Schwartz. There's a Whitepaper published in 2015.
If you want to read it, I'll post the slides later. The protocol was inspired by the internet.
Internet turned out to a thing, and it turned out to work, and even though it was designed on super slow computers, it still works today on Macs, and PC's and iPhones. So it's a really great design.
The key features of Internet Protocol were it's one, it's an open standard.
Two, it connects different networks.
It's use case agnostic, and it packetizes data.
So it breaks down data into tiny packets, and then sends them.
I'm not gonna go too deep into overview of the history of Internet Protocol development. I think this could be a really great separate topic if you're interested in that, I highly encourage you to dig into it.
The Interledger Protocol has all the same principals. It's an open standard.
It connects different networks.
It's use case agnostic, and it packetizes money. The difference is really packetized data or packetized money.
That's the approach that really drove me to Interledger. I think it's a new way of thinking about money. And that's something I think is actually really positive about the sort of Crypto hype, is that it forces you to start thinking about finances and money in a new way and like how it would look like if you were to rebuild it from scratch.
I think this approach is a really interesting one to think about it.
So a lot of you probably use Visa as a payment system. What do you think is the average transaction size in the Visa network? You can shout out.
- Five dollars.
- [Woman] 10 cents.
That's one of the key problems.
10 cents doesn't make sense.
The answer is actually $80.
That's the average transaction.
There's also SWIFT network, that banks use to send transfers to each other. The average transaction size of a SWIFT transaction is $45,000.
It really doesn't make sense for content at all. The Interledger Protocol, for a change, the average transaction size is this, it's 0.00001 of a cent, which is amazing.
Not gonna go to deep into the specifics of the Protocol.
The high level concept however, we use it if you wanna send money to, lets say, somebody who works at Trulia.
You need to have a set of connectors that connect you on a path to him.
The interesting part, that the Interledger network doesn't care what currency you sent.
If there's a connector that connects Bitcoin to use, or Ethereum, or whatever currency you prefer, the transaction will be routed that way.
If the receiver prefers to receive, let's say, what's your favourite currency? - Dollars. - Dollars, Australian?
- That's all I can spend. - Awesome.
(chuckle in unison) Nice punch, good stuff.
But anyways, so yeah, the key idea is that you have a sender and receiver.
There's a networks of connectors, which is really close to how internet actually works. And for those, of course, curious about, if you wanna dive a little bit deeper into the Crypto side of the Interledger Protocol, the way packets get sent, there's a prepare sequence which locks certain sort of hashed keys into the sequence, and then you pass it through the network.
Then you get fulfilled, if the sender confirms that. If there's a malicious node, which, once you get into Crypto, as Loren, yesterday mentioned from his talk of securing JavaScript.
People will try to hack you.
There will be a lot of malicious actors, so you have to prepare for that.
The way it works is, if the receiver for some reason doesn't receive the sort of prepared packet, it gets somehow lost in the chain, you don't lose money.
Only the connector that was closest to the sender loses money.
And because the size of a transaction is so tiny, you can actually start billing out trust between connectors, and basically sending a lot of tiny payments without having to finalise them on the network. And that's a key property which, if someone you know like Bitcoin or Ethereum are really slow, so you really don't want to be touching it too much, unless it's for some settlements.
So today it's implemented, Interledger is implemented in JavaScript.
It's a reference implementation.
It's also being implemented in Rust.
Yesterday's talks I think, about Rust was awesome. I highly encourage you to- it was like, web assembly and Rust.
They kind of, packaged them together, because Rust compiles to web assembly, and I think a lot of the projects will be built in Rust, and then cross-compiled to other platforms. In addition to that Rust, if you have a Rust project, there's a .rs domain, and I forget what country owns it, but you can actually have a domain name like, Interledger.rs, and actually works, which I think is pretty awesome.
And so, that's Interledger Protocol, which is the foundation.
Think of it as like, TCP/IP for payments.
And then what is Web Monetization Spec? Web Monetization Spec is a proposed browser API, that uses Interledger to monetize a site.
For it to work, you need a few things.
One is a payment pointer.
This is something you add to your site, to specify where you wanna receive the money. Today the easiest way to set up a small wallet is XRP Tip Bot, which allows you to send very little amounts without having to go through the whole KYC processes, and others.
That's the fastest way.
You can also sign up for any other wallet providers, if you're interested in sending many, much more money. The JavaScript API looks very simple.
You have a monetization property added to the document. And it basically has two parts.
One is the events on the web monetization site that happen, and one is the state.
The state can be either pending, or started. Then for the events, you have two.
One is for the monetization start, and monetization progress.
Monetization start is for the time when, the first IOP packet reaches the destination. So you know, that the person browsing is sending you payments.
The progress is to keep track, and to see how much money is actually being streamed. And so, how we're building it? As John mentioned, there's been many attempts at building a browser.
How does a super tiny team go on about doing it? And so yes, we are really a small team.
It's me, my brother Serg, my friend Pablo, he's actually in Sydney, and Polina is also in Canada.
We're a very small team, so we have to choose very carefully how we approach this problem.
And it's also the time where we're not alone. The beauty of the open source and tech ecosystem is there's a lot of people who are happy to help you. It really takes, not only a village, it's probably like we need to step up a notch. Then a village, to build a project like that. But there's a lot of partners that are with us on it. Coil is one of the companies, that is today, the biggest user of Interledger.
The founder of Coil is one of the creators of Interledger, Stefan Thomas.
It's a much bigger team, they are focusing on content side. So I'll show you maybe later, the demo to their site, but think of it as a medium analogy for the web monetization world, where you can easily publish content, and you can also decide whether you want the content to be available for free for everybody, whether you want to show most of the content for free, and part of it for subscribers, or whether you wanna be completely closed, and only show content to people who are subscribers. Sort of similar to Patreon model as well.
There's also Strata Labs.
It's a small company that is powering sort of the infrastructure layer of connectors, and running Interledger connectors.
A lot of their code is open source.
I highly encourage you to play around and check it out. And then also Xpring, which is the initiative by Ripple, that provides some funding and partnerships for companies that are working with Interledger. Also from our side, we focused really, really narrowly. As you noticed earlier the market share of Desktop is pretty stable, and going against Chrome today as a tiny team, I think is extremely unrealistic.
So we decided to focus on mobile only.
And mobile is much more interesting, and it's also much more limiting.
This is, I think, where a lot of experimentation can come from.
We are starting from monetization.
I think that's a very important part of creating a good ecosystem.
Not only are we focusing on mobile only, we started building with React Native, because I'm a JavaScript developer, and I always wanted to build a mobile app, using React Native.
How many of you guys actually played with React Native, or built something? Probably like 10%, maybe less.
Interesting, yeah, so I always wanted to build a mobile app, but I never shipped one. Now it's finally actually shipped it, and we're using Expo, which is a really great way to build things faster. So the first version of our project works on both, iOS and Android.
It's super high calibrated demo, soon.
But the first version is that, and not only did we decide to focus on mobile, we are also going forward for now.
We're gonna focus on iOS only.
And iOS is actually very, very interesting. I did not prepare too many slides for the iOS part, but the high level overview of the ecosystem on iOS browsers, is actually very interesting. Apple limits you on what rendering engine you can use to build a browser in iOS.
And on one hand, it's a pretty interesting limitation, where it might seem like a bad thing for companies, but the reality is that everybody has to use WebKit WebView, provided by Apple.
And so every browser on iOS is actually a glorified WebKit. Chrome, Brave, Firefox and Safari itself, they all share the same engine.
That actually allows a tiny team of a few people to step up and build a competitor, because the fundamental building block is already done for you.
And the competition will happen on what things you add above that layer.
I think it's a really interesting time, and I haven't seen too much experimentation going that way, but I think there should be. I think it could be fun to see what can be added. And with yesterday's talks, there's like a lot of new API's.
A lot of new things that could come out.
I think mobile could be a perfect playground for that, with a very good approach.
We have a video break.
Let me show you a video.
So, we launched in- we launched our project in April.
Like a super soft launch beta with, for Interledger Summit.
Very few people saw it.
But the XRP community is pretty tightly knit, and the Twitter kind of exploded, and one of the people from Twitter, he's a guy somewhere is Billa, Russia, made us this fan video, which nobody ever made a fan video for my project. It's just pretty exciting.
(intense music) - Yeah, sorry about that.
(puma roaring) (audience applauds) - It's so well done, I was blown away.
Yeah it's just one of the fans in the community built it, and I was like, this is amazing.
So demo time, let me show you what we have working today.
I will walk you through what we're gonna be building. After that, let me see.
(Yuriy hums) Alright.
So, I was advised heavily against live demos, but I like to live dangerously.
And the internet actually- the internet, oh wait, this is new version, sorry. The internet in Australia is actually way better than people tell me.
I was told it was gonna be horrible.
Turns out it's phenomenal.
Like in the hotel, it's way better than San Francisco. It's ridiculous here.
I don't know if anybody in Australia complains again, just show them this.
This is a conference wifi.
It's also a great demo for ads, a lot of ads around it. Look at this wifi, like have you ever been at a conference that had a wifi this fast? John, thank you, awesome.
Look at this, and then, look at the upload. Like, what? What? Amazing.
(audience feedback) Nobody does it in San Francisco.
It's ridiculous, just don't get me started. Anyways, what are we doing? Yeah okay, sorry about that.
Demo time.
All right, cool, so we have a simulator.
Good size, yeah, so let's show you the current version. By the way, to if you wanna play around with it, we have a website, called pumabrowser.com.
Right now, we're on PlayStore for Android.
As a private, like as a public beta, for iOS we're still doing test flight development, so you can sign up.
We'll send you- by we, I mean I, I'll manually send you- an invite to test flight.
It's also on the AppStore.
We don't tell people too much, 'cause we don't want them to not talk to us, but if you don't want to sign up, you can just go to AppStore, and download it. You still get the latest version.
We prefer if you give us an email, so we can actually reach out to you, which is kinda a little bit of ironic, for a privacy-focused browser, but we're- it's complicated, is the short answer.
We also tried to- By the way, segway a little bit, we tried to spin up privacy-focused analytics on the site, like not to use Google Analytics.
But if you guys have any ideas of a privacy cautious analytics suite, I'd appreciate hearing.
We looked into a few options.
We decided the best option would be not to do anything, and just like, we don't know who's coming to our site, and what they're doing, unless they're sign-ups or being scrippy.
So anyways, this is Expo.
This is if you're building with React Native. A really great way to build apps for React Native. This is our browser.
You can go to Puma Browser in Puma Browser, and see Puma Browser, and the screenshot of Puma Browser, which makes it really awesome.
The thing that you'll notice, that is different from the browser, other browser, is that we have this little ticker, provided by Coil, and that's actual money going from me, from this phone, using Interledger Protocol, and web monetization, to the creator of the site, who in this case, also happens to be me.
(audience chuckles) We have this beautiful, beautiful menu that shows you all the information of what is actually happening, and the key part is the payment pointer, which is, xrptipbot/html5cat.
So this is, and this is my account for Coil, which I skipped a step for now, but I can walk you through that later.
But basically, what is- I'm not gonna go there, sorry, let's not do that. But anyways, so this is actual money going to my account. The better demo of this is on the XRP community blog, which is created by Wietse, and when you go to the home page, off the blog, payment pointer is set up to his site, so he is getting paid while you're browsing the home page. But if you go to a particular post, in this case, it's by Mars75, he's getting paid for this.
So the longer you stay there, the longer you read, I'm gonna get paid.
A lot of people say that when they see this ticker, it induces a little bit of anxiety, to money ticking away.
The way right now it's sold, is actually, Coil allows you to pay them a flat fee of five dollars per month, and then you go around sites and you stream the payment. You don't have to worry how much you stream, Coil detects if there's abuse, or other ways, trying to get around the system, but basically it allows you to forget about thinking about the counter, and we are showing it right now, just for the demo purposes.
'Cause to me when I saw it at first, I was like, oh my God, this is amazing.
I wanna help build it.
If you go to another page, by Hodor, he's getting paid.
And the beauty of our browser-builder React Native, is because we're such a tiny team, it doesn't even have tabs.
We have literally one tab, so if you have a tab issue, that you have more than one tab, I highly recommend checking out Puma Browser, because we only have one tab, and you can't do, you know, many different tabs at the same time.
We also, by default, we use Tap Tap Go, which I think is a great search engine.
Priorities-focused and you can go to Web Directions Code, to show you that it's actually, it's a browser. It works, you can download it, it works.
It is a pain in the butt to use though.
Turns out tabs are pretty useful.
Who knew? So going forward, we're starting working on, which is something that is still in progress, and is very early on, but I'm basically slowly transitioning into a iOS developer. And learning SWIFT, and we're forking Firefox for iOS, which is a really great code base.
This is something, that I've never, as a front-end engineer, there's like the classic things you can rebuild, like you can rebuild a block, you can rebuild something else.
Everybody goes through the cycles.
I never thought I'd be playing around with browsers. I think it's fun, I think it's- it certainly pushed me to learn a lot.
It's very uncomfortable at times, especially going from, you think VS code and you think web development is actually pretty bad. Well you go to iOS and you think, oh my God, this is gonna be awesome.
It's so- it's horrible, you have to recompile the thing every single time.
It takes like, two, three minutes, to recompile and there's like no Light Refresh.
I think it might be coming, so like, React Native is actually really, really awesome, and Native iOS is really, really bad.
I have a 2013 Mac Pro, which is pretty good, keyboard still works.
I'm not a- I kinda want a faster processor.
It's like an I7 but it's just a new keyboard. I don't know what to do.
If you guys have any ideas on that, please find me afterward, and we'll- maybe we can do something with it.
But anyways, so we started forking Firefox for iOS. And so far there's very little sort of custom things that we added to it, except for, dark theme by default.
Very important feature.
If there's one thing you take away from this talk, Puma Browser is gonna have dark theme by default, and it's much more, turns out, energy efficient. If you've been to the talk on the leaders, or Melbourne JS, it was an energy-focused talk.
Probably, how many of you seen that talk? Nice, nice, a third of the room, yeah.
There's good jokes in that talk, I'm not gonna spoil them. Wait, dark theme turns out it's energy efficient, and then I'm- I prefer buttons in a certain way, so we rearranged the buttons.
But now Puma Browser actually has tabs and it's pretty awesome.
It doesn't yet have all the web-undisation functionality but it works much better as a daily browser. So I've been using that as a daily browser for myself, and it has been pretty awesome.
It's just a joy to have your own project be on your home screen, being the tray and I highly encourage playing around with that. Next, wait this represent or wait, wait one second.
Here we go.
Do, do, do.
Excellent, so yeah.
What can you do? One, is you can monetize your site, if you have your site, check it out.
It's pretty easy, just adding a meta tag.
So far there's not too many users.
We have 1500 people who signed up to test the beta, and I hope there's gonna be more after today. But basically, yeah, monetize your site.
I think it's a great way to poke around and see how it works.
Two, is play around with Puma Browser.
I would highly appreciate it.
It's super early, let me know what you think. And if you could, it'd be very, very appreciated. Three, we're also hiring, if you want to join. I don't know if John will allow saying that, but anyways, forget it.
And so, my hope- the whole idea for this talk was to me, it's such a perfect conference for talking about this because I think the web is heading in the direction that we might want to avoid- if you look at the political situation, if you look at the most apps that are successful on mobile phones are pretty heavy on grabbing attention.
The reason for that, I think, is pretty simple. The economics is such is that's the best way to make money on the web, is to use ads.
The best way to make more money with ads, is to grab all your attention and know more about you. This fundamentally converges to not a very pretty world, and I think it'll be nice to try to push it into slightly a better direction, and into the right direction.
So that's it.
Thank you so much.
(audience claps) (upbeat techno music)
