Web Apps of the Future

Web Apps of the Future

The ideal app is peer-to-peer, offline, and decentralized. Apps should protect users from censorship, the addition of user-hostile features, and data loss due to business failure. Good news! The future is here early; it's possible to build a service like this today, using WebRTC, Service Workers, Web Crypto, and replicating databases. Welcome to the future!

Transcript

1. Web Apps of the Future presented by Feross
2. Web vs. Native
3. Open vs. Closed
4. Good vs. Evil
5. The Web's Advantages 4 Better 4 More fun 4 More open
6. The Web is Better 4 Links 4 No install needed 4 Instant updates
7. The Web is More Fun 4 Easier to learn 4 Easier to build mashups 4 HTML, CSS, & JavaScript are fun!
8. The Web is More Open 4 Open standards 4 Not controlled by a single company
9. Native apps 4 Offline 4 Discoverable 4 Push notifications 4 Performance
10. Does any of this matter to users?
13. A more important question... How do you build your app?
14. Centralized vs. De-centralized
15. Open vs. Closed
16. Good vs. Evil
17. Centralized Apps 4 Simple & fast to build 4 Easy to make money 4 Easy to get VC funding
18. De-centralized Apps 4 Censorship resistant 4 Privacy preserving 4 User controls their data 4 Safe against user-hostile changes
19. Tor, I2P, Freenet Bitcoin, blockchain apps BitTorrent BitMessage, PGP
20. CONTROL
21. Who owns the data?
22. Who runs the servers?
23. Who has legal control?
24. NO MIDDLEMEN
25. YOU ARE THE PRODUCT
26. Who controls an app?
27. Is that control necessary?
28. HUMAN VALUES
29. Tor, I2P, Freenet Bitcoin, blockchain apps BitTorrent BitMessage, PGP
30. I want to build a social network that is safe against 'future Dominic' 1 Dominic Tarr
31. "Good" web apps
32. Promises
33. Brewster Kahle founder, Internet Archive
34. Why doesn't the Web reflect our values?
35. The web has limitations 4 Web apps are trapped in the browser 4 Domain names, DNS 4 Location-based addressing
36. CLIENT-SERVER MODEL
37. PEER TO PEER
40. Who does your code serve?
41. What values does your code promote?
42. Beginnings of a solution...
43. WebRTC Service Workers Web Crypto Replicating databases
44. Hyperboot
45. Keyboot
46. Demo hyperboot.org
47. WebTorrent
48. WebTorrent 4 BitTorrent in the browser 4 True P2P implementation 4 No install - pure JavaScript with WebRTC 4 Stream into <video>, <audio>, VLC, Chromecast, Airplay, etc.
49. 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) }) })
50. 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') })
51. Demo instant.io
52. 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!
53. WebRTC Data Channel
54. 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!
55. Another unintended consequence... WebRTC beyond the browser
56. 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
57. WebRTC is universal
58. Only transport that works in the browser
59. You get NAT traversal for free
60. No cross-origin policy
61. Mandatory transport encryption
62. Data Channel API is easy! var channel = peer.createDataChannel() channel.send('hi') channel.addEventListener('message', function (event) { console.log('got message: ' + event.data) })
63. Where does WebRTC work today?
64. 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
65. 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
66. 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
67. 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!
68. Friends
69. Demo github.com/moose-team/friends
70. Despite challenges, we should rally around WebRTC & ServiceWorkers
71. We need more apps that respect & empower users
72. Learn more hyperboot.org keyboot.org webtorrent.io moose-team.github.io/friends
73. THE IDEAL APP
74. Thank you! — Feross Aboukhadijeh (@feross)