How to build a website that will (eventually) work on Mars?

Talk from the Full Stack Fest in Barcelona, 2016.
https://2016.fullstackfest.com/speakers/slobodan-stojanovic/

At not so distant future human race will be able to make a colony on Mars, and we'll need a stable communication between the planets. Interplanetary internet works differently (ie. 3.5 to 22 mins delay between planets), so what from today's technologies can we use to build an interplanetary web app?

Transcript

1. HOW TO BUILD A WEBSITE THAT WILL EVENTUALLY WORK ON MARS
2. I am Slobodan Stojanović CTO of Cloud Horizon and JS Belgrade Meetup organizer github.com/stojanovic twitter.com/slobodan_ 2
3. WARNING The main goal of this talk is to explore some of the new technologies in a bit unexpected way, most of those things will probably work completely different at the moment humans colonize Mars. This is not deep technical talk and it contains some level of simplified facts.
4. #askfsf
 @slobodan_
5. WHY MARS?! Why on earth would anyone do that? #askfsf
 @slobodan_
6. Let’s see what do we know about it? MARS #askfsf
 @slobodan_
7. • It’s a planet • Approximately the same landmass with Earth • Mars day (Sol) is 1d 0h 40m • Mars year is 687 days (1.9 years) • Temperature can be 20°C • Martian surface gravity is only
 37% of the Earths • There are signs of liquid water on Mars #askfsf
 @slobodan_
8. • Only 18 missions to Mars
 have been successful • Temperature can also be -153°C • Mars has the largest dust storms
 in the solar system • Radiation • It doesn’t have an atmosphere #askfsf
 @slobodan_
9. Seriously, WTF!? Earth is perfect, right? WAIT!
 WHY WOULD ANYONE GO TO MARS!? #askfsf
 @slobodan_
10. Of course it is! Ask the dinosaurs. #askfsf
 @slobodan_
11. To at least one more “data center” OK, SO WE NEED
 A BACKUP, RIGHT? #askfsf
 @slobodan_
12. No, not that one, imagine the one that somebody would use :) AND NOW, IMAGINE YOU HAVE A WEBSITE #askfsf
 @slobodan_
13. SO, LET’S GO BACK TO MARS #askfsf
 @slobodan_
14. IT’S THE ONLY PLANET
 INHABITED BY ROBOTS ONLY #askfsf
 @slobodan_
15. UNTIL ONE DAY IN 2027… Or 2031; or even earlier - 2025 #askfsf
 @slobodan_
16. WI-FI Maslow’s hierarchy of needs #askfsf
 @slobodan_
17. Thanks Saša Jurić :) #askfsf
 @slobodan_
18. Chrome v123 on Illudium Q-36 Space Modulator 15:42 Hm, what browser and network are you using? 15:18 Your **** website doesn’t work! 15:17 WTF?! 15:42 #askfsf
 @slobodan_
19. Your servers seems to be ok. It should just work, right? WHAT’S THE PROBLEM? #askfsf
 @slobodan_
20. Light travels between 3 and 22 minutes from Earth to Mars DISTANCE #askfsf
 @slobodan_
21. You tried, but they are still building their data center there… LATENCY?
 AH, CAN YOU JUST DEPLOY IT ON AWS ON MARS? #askfsf
 @slobodan_
22. No Netflix and video or audio calls, sorry Matt Damon NO REALTIME COMMUNICATION #askfsf
 @slobodan_
23. Beside crying and answering support emails, of course WHAT CAN WE DO WHEN WE DON’T HAVE ENOUGH SERVERS? #askfsf
 @slobodan_
24. That’s quite popular now, right? GO SERVERLESS? #askfsf
 @slobodan_
25. Whatsapp? Facebook Messenger? Sonic Screwdriver? HOW DO WE COMMUNICATE IN THE SPACE? #askfsf
 @slobodan_
26. Yes, the same radio waves you are receiving with a car radio :) RADIO WAVES #askfsf
 @slobodan_
27. INTERPLANETARY INTERNET #askfsf
 @slobodan_
28. A computer network architecture that addresses lack of continuous connectivity DELAY/DISRUPTION TOLERANT NETWORKING #askfsf
 @slobodan_
29. Standard internet #askfsf
 @slobodan_
30. DTN #askfsf
 @slobodan_
31. Networks are hard and boring, at least for me, let’s focus on things we know LET’S GO BACK TO THE WEB DEVELOPMENT #askfsf
 @slobodan_
32. Our website would work even when the server is not available OFFLINE ACCESS WITH SERVICE WORKERS
33. • Enable effective offline experiences • Intercept network requests and taking appropriate action based on whether the network is available • Allow access to push notifications • Background sync APIs. Service workers essentially act as proxy servers that sit between web applications, and the browser and network (when available). 
 They can: #askfsf
 @slobodan_
34. sw.js main.js #askfsf
 @slobodan_
35. We do not want to send too much API calls, because they are not cheap LESS API CALLS?
 GRAPHQL #askfsf
 @slobodan_
36. A GraphQL query is a string interpreted by a server that returns data in a specified format. #askfsf
 @slobodan_
37. Storage would be useful, then we don’t depend on the server all the time STORE THINGS LOCALLY WITH INDEXEDDB #askfsf
 @slobodan_
38. • IndexedDB databases store key-value pairs • It’s built on a transactional database model • It’s mostly asynchronous • It uses DOM events to notify you when results are available • It does not use Structured Query Language (SQL) • It adheres to a same-origin policy IndexedDB is a low-level API for client-side storage of significant amounts of structured data, including files/blobs. This API uses indexes to enable high performance searches of this data. 
 Some concepts: #askfsf
 @slobodan_
39. Sync our local database when ever server is available DATA SYNCHRONIZATION? POUCHDB #askfsf
 @slobodan_
40. PouchDB is an open-source JavaScript database inspired by Apache CouchDB that is designed to run well within the browser. PouchDB was created to help web developers build applications that work as well offline as they do online. It enables applications to store data locally while offline, then synchronize it with CouchDB and compatible servers when the application is back online, keeping the user's data in sync no matter where they next login. #askfsf
 @slobodan_
41. #askfsf
 @slobodan_
42. Why stop there? What about the requests? BACKGROUND SYNC #askfsf
 @slobodan_
43. Background sync is a new web API that lets you defer actions until the user has stable connectivity. This is useful for ensuring that whatever the user wants to send, is actually sent. #askfsf
 @slobodan_
44. Handle large upload/downloads in the background BACKGROUND DOWNLOADING/UPLOADING WITH SERVICE WORKERS #askfsf
 @slobodan_
45. • Enable background-caching of multiple resources • Enable background-uploading of multiple resources • Allow the OS to handle the fetch, so the browser doesn't need to run • Allow the OS to show UI to indicate the progress of the fetch • Allow the OS to deal with poor connectivity by pausing/resuming the download/upload • Allow the app to react to /failure of the fetch SW caching can fail if you close the browser while caching big assets! This proposal should help with following: More info:
 https://github.com/jakearchibald/background-cache #askfsf
 @slobodan_
46. Don’t use the server when ever you don’t really need to PEER-TO-PEER CONNECTION WITH WEBRTC #askfsf
 @slobodan_
47. • MediaStream (aka getUserMedia) • RTCPeerConnection • RTCDataChannel WebRTC is a free, open project that provides browsers and mobile applications with Real-Time Communications (RTC) capabilities via simple APIs WebRTC implements three APIs: #askfsf
 @slobodan_
48. #askfsf
 @slobodan_
49. WebTorrent is a streaming torrent client for the web browser WEB TORRENT #askfsf
 @slobodan_
50. WebTorrent is written completely in JavaScript – the language of the web – and uses WebRTC for peer-to-peer transport whenever possible. No browser plugins, extensions, or installation is required to use WebTorrent in your browser. Why? “Imagine a peer-to-peer YouTube where viewers help to host the site's content. By making BitTorrent easier to use, we can get more people to participate and take the first steps to re-decentralizing the Internet.” #askfsf
 @slobodan_
51. #askfsf
 @slobodan_
52. WHAT IF WE CAN LOAD HTML, CSS AND JAVASCRIPT VIA P2P CONNECTION? #askfsf
 @slobodan_
53. npm install hyperdrive MEET
 HYPERDRIVE #askfsf
 @slobodan_
54. A file sharing network based on rabin file chunking and append only feeds of data verified by merkle trees. Hyperdrive is the peer-to-peer data distribution protocol that powers Dat. It consists of two parts. First there is hypercore which is the core protocol and swarm that handles distributing append-only logs of any binary data. The second part is hyperdrive which adds a filesystem specific protocol on top of hypercore. More info:
 https://github.com/datproject/docs/blob/master/docs/ hyperdrive_spec.md #askfsf
 @slobodan_
55. https://ipfs.io INTERPLANETARY FILE SYSTEM #askfsf
 @slobodan_
56. This solves just a small part of the problems WHAT OTHER PROBLEMS WE NEED TO SOLVE? #askfsf
 @slobodan_
57. • Timestamps • Storing and checking session • Security and privacy • How do we test the extreme situations? #askfsf
 @slobodan_
58. THE MESSAGE? #askfsf
 @slobodan_
59. WE NOW KNOW
 HOW TO BUILD
 AN INSTAGRAM FOR MARS? We need a place to share food images, right? #askfsf
 @slobodan_
60. NO #askfsf
 @slobodan_
61. MOST OF THE THINGS WE ARE BUILDING ARE NOT EVEN WORKING FOR EVERYONE ON THIS PLANET #askfsf
 @slobodan_
63. Do not expect smart answers :) QUESTIONS? #ASKFSF