Web Apps of the Future - Speaker Deck

Slide 1

Slide 1 text

Web Apps of the Future presented by Feross

Slide 2

Slide 2 text

Web vs. Native

Slide 3

Slide 3 text

Open vs. Closed

Slide 4

Slide 4 text

Good vs. Evil

Slide 5

Slide 5 text

The Web's Advantages 4 Better 4 More fun 4 More open

Slide 6

Slide 6 text

The Web is Better 4 Links 4 No install needed 4 Instant updates

Slide 7

Slide 7 text

The Web is More Fun 4 Easier to learn 4 Easier to build mashups 4 HTML, CSS, & JavaScript are fun!

Slide 8

Slide 8 text

The Web is More Open 4 Open standards 4 Not controlled by a single company

Slide 9

Slide 9 text

Native apps 4 Offline 4 Discoverable 4 Push notifications 4 Performance

Slide 10

Slide 10 text

Does any of this matter to users?

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

A more important question... How do you build your app?

Slide 14

Slide 14 text

Centralized vs. De-centralized

Slide 15

Slide 15 text

Open vs. Closed

Slide 16

Slide 16 text

Good vs. Evil

Slide 17

Slide 17 text

Centralized Apps 4 Simple & fast to build 4 Easy to make money 4 Easy to get VC funding

Slide 18

Slide 18 text

De-centralized Apps 4 Censorship resistant 4 Privacy preserving 4 User controls their data 4 Safe against user-hostile changes

Slide 19

Slide 19 text

Tor, I2P, Freenet Bitcoin, blockchain apps BitTorrent BitMessage, PGP

Slide 20

Slide 20 text

CONTROL

Slide 21

Slide 21 text

Who owns the data?

Slide 22

Slide 22 text

Who runs the servers?

Slide 23

Slide 23 text

Who has legal control?

Slide 24

Slide 24 text

NO MIDDLEMEN

Slide 25

Slide 25 text

YOU ARE THE PRODUCT

Slide 26

Slide 26 text

Who controls an app?

Slide 27

Slide 27 text

Is that control necessary?

Slide 28

Slide 28 text

HUMAN VALUES

Slide 29

Slide 29 text

Tor, I2P, Freenet Bitcoin, blockchain apps BitTorrent BitMessage, PGP

Slide 30

Slide 30 text

I want to build a social network that is safe against 'future Dominic' 1 Dominic Tarr

Slide 31

Slide 31 text

"Good" web apps

Slide 32

Slide 32 text

Promises

Slide 33

Slide 33 text

Brewster Kahle founder, Internet Archive

Slide 34

Slide 34 text

Why doesn't the Web reflect our values?

Slide 35

Slide 35 text

The web has limitations 4 Web apps are trapped in the browser 4 Domain names, DNS 4 Location-based addressing

Slide 36

Slide 36 text

CLIENT-SERVER MODEL

Slide 37

Slide 37 text

PEER TO PEER

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

Who does your code serve?

Slide 41

Slide 41 text

What values does your code promote?

Slide 42

Slide 42 text

Beginnings of a solution...

Slide 43

Slide 43 text

WebRTC Service Workers Web Crypto Replicating databases

Slide 44

Slide 44 text

Hyperboot

Slide 45

Slide 45 text

Keyboot

Slide 46

Slide 46 text

Demo hyperboot.org

Slide 47

Slide 47 text

WebTorrent

Slide 48

Slide 48 text

WebTorrent 4 BitTorrent in the browser 4 True P2P implementation 4 No install - pure JavaScript with WebRTC 4 Stream into , , VLC, Chromecast, Airplay, etc.

Slide 49

Slide 49 text

Share files with WebTorrent var WebTorrent = require('webtorrent') var dragDrop = require('drag-drop') var client = new WebTorrent() dragDrop('body', function (files) { client.seed(files, function (torrent) { console.log('Client is now seeding', torrent.magnetURI) }) })

Slide 50

Slide 50 text

Download files with WebTorrent var WebTorrent = require('webtorrent') var client = new WebTorrent() client.add('magnet:...', function (torrent) { // The first file in the torrent is a video var file = torrent.files[0] // Display the file. Supports video, audio, images, etc. file.appendTo('body') })

Slide 51

Slide 51 text

Demo instant.io

Slide 52

Slide 52 text

WebRTC is a backdoor 4 Companies just want browser video chat 4 But they've built P2P into the fabric of the web 4 Let's use this opportunity!

Slide 53

Slide 53 text

WebRTC Data Channel

Slide 54

Slide 54 text

Data Channel Unintended Consequences 4 Peer-assisted delivery (PeerCDDN, Peer5, others) 4 File transfer (WebTorrent, ShareFest) 4 Ephemeral site/content hosting 4 Chat/email/encrypted real-time communications 4 All future P2P protocols!

Slide 55

Slide 55 text

Another unintended consequence... WebRTC beyond the browser

Slide 56

Slide 56 text

This is WebRTC Everywhere 4 WebRTC in web apps (desktop & mobile) 4 WebRTC in desktop apps 4 WebRTC in server apps 4 WebRTC in mobile apps

Slide 57

Slide 57 text

WebRTC is universal

Slide 58

Slide 58 text

Only transport that works in the browser

Slide 59

Slide 59 text

You get NAT traversal for free

Slide 60

Slide 60 text

No cross-origin policy

Slide 61

Slide 61 text

Mandatory transport encryption

Slide 62

Slide 62 text

Data Channel API is easy! var channel = peer.createDataChannel() channel.send('hi') channel.addEventListener('message', function (event) { console.log('got message: ' + event.data) })

Slide 63

Slide 63 text

Where does WebRTC work today?

Slide 64

Slide 64 text

WebRTC support in Web Apps 4 Google Chrome - supported 4 Mozilla Firefox - supported 4 Opera - supported 4 Microsoft Edge (next IE) - planned 4 Apple Safari - no comment

Slide 65

Slide 65 text

WebRTC support in Desktop apps 4 Electron (atom-shell) - easiest choice! 4 NW.js (node-webkit) - also super easy! 4 Google's webrtc.org - compile it into your app 4 Ericsson's OpenWebRTC - compile it into your app

Slide 66

Slide 66 text

WebRTC support in Server apps 4 wrtc package on npm (native dep on webrtc.org) 4 Google's webrtc.org - compile it into your app 4 Ericsson's OpenWebRTC - compile it into your app

Slide 67

Slide 67 text

WebRTC support in Mobile apps 4 iOS - Google's webrtc.org - compile it into your app 4 Android - Use Chromium WebView 4 Or, better: Just use Chrome/Firefox on Android!