Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Apps of the Future

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!

Feross Aboukhadijeh

September 03, 2015
Tweet

More Decks by Feross Aboukhadijeh

Other Decks in Programming

Transcript

  1. The Web is More Fun 4 Easier to learn 4

    Easier to build mashups 4 HTML, CSS, & JavaScript are fun!
  2. The Web is More Open 4 Open standards 4 Not

    controlled by a single company
  3. Centralized Apps 4 Simple & fast to build 4 Easy

    to make money 4 Easy to get VC funding
  4. De-centralized Apps 4 Censorship resistant 4 Privacy preserving 4 User

    controls their data 4 Safe against user-hostile changes
  5. I want to build a social network that is safe

    against 'future Dominic' 1 Dominic Tarr
  6. The web has limitations 4 Web apps are trapped in

    the browser 4 Domain names, DNS 4 Location-based addressing
  7. 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.
  8. 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) }) })
  9. 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') })
  10. 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!
  11. 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!
  12. 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
  13. Data Channel API is easy! var channel = peer.createDataChannel() channel.send('hi')

    channel.addEventListener('message', function (event) { console.log('got message: ' + event.data) })
  14. 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
  15. 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
  16. 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
  17. 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!