How to build a website that will (eventually) work on Mars, v1.1.0, WebCamp Zagreb 2016

https://2016.webcampzg.org/talks/view/how-to-build-a-website-that-will-eventually-work-on-mars/

Transcript

1. #wczg
 @slobodan_ HOW TO BUILD A WEBSITE THAT WILL EVENTUALLY WORK ON MARS
2. #wczg
 @slobodan_ I am Slobodan Stojanović CTO of Cloud Horizon and JS Belgrade Meetup organizer github.com/stojanovic twitter.com/slobodan_ 2
3. #wczg
 @slobodan_ 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. #wczg
 @slobodan_
5. #wczg
 @slobodan_ WHY MARS?! Why on earth would anyone do that?
6. #wczg
 @slobodan_ Let’s see what do we know about it? MARS #wczg
 @slobodan_
7. #wczg
 @slobodan_ • 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
8. #wczg
 @slobodan_ • 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
9. #wczg
 @slobodan_ Seriously, WTF!? Earth is perfect, right? WAIT!
 WHY WOULD ANYONE GO TO MARS!?
10. #wczg
 @slobodan_ Of course it is! Just ask the dinosaurs.
11. #wczg
 @slobodan_ To at least one more “data center” OK, SO WE NEED
 A BACKUP, RIGHT?
12. #wczg
 @slobodan_ No, not that one, imagine the one that somebody would use :) AND NOW, IMAGINE YOU HAVE A WEBSITE
13. #wczg
 @slobodan_ SO, LET’S GO BACK TO MARS
14. #wczg
 @slobodan_ IT’S THE ONLY PLANET
 INHABITED BY ROBOTS ONLY
15. #wczg
 @slobodan_ UNTIL ONE DAY IN 2025… In January, then again in 2027, 2029…
16. #wczg
 @slobodan_
17. #wczg
 @slobodan_ WI-FI Maslow’s hierarchy of needs
18. #wczg
 @slobodan_ Thanks Saša Jurić :)
19. #wczg
 @slobodan_ 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
20. #wczg
 @slobodan_ Your servers seems to be ok. It should just work, right? WHAT’S THE PROBLEM?
21. #wczg
 @slobodan_ Light travels between 3 and 22 minutes from Earth to Mars DISTANCE
22. #wczg
 @slobodan_ You tried, but they are still building their data center there… LATENCY?
 AH, CAN YOU JUST DEPLOY IT ON AWS ON MARS?
23. #wczg
 @slobodan_ No Netflix and video or audio calls, sorry Matt Damon NO REALTIME COMMUNICATION
24. #wczg
 @slobodan_ Beside crying and answering support emails, of course WHAT CAN WE DO WHEN WE DON’T HAVE ENOUGH SERVERS?
25. #wczg
 @slobodan_ That’s quite popular now, right? GO SERVERLESS?
26. #wczg
 @slobodan_ Whatsapp? Facebook Messenger? Sonic Screwdriver? HOW DO WE COMMUNICATE IN THE SPACE?
27. #wczg
 @slobodan_
28. #wczg
 @slobodan_ Yes, the same radio waves you are receiving with a car radio :) RADIO WAVES
29. #wczg
 @slobodan_ INTERPLANETARY INTERNET
30. #wczg
 @slobodan_ A computer network architecture that addresses lack of continuous connectivity DELAY/DISRUPTION TOLERANT NETWORKING
31. #wczg
 @slobodan_ Standard internet
32. #wczg
 @slobodan_ DTN
33. #wczg
 @slobodan_ Networks are hard and boring, at least for me, let’s focus on things we know LET’S GO BACK TO THE WEB DEVELOPMENT
34. #wczg
 @slobodan_ Our website would work even when the server is not available OFFLINE ACCESS WITH SERVICE WORKERS
35. #wczg
 @slobodan_ Service workers essentially act as proxy servers that sit between web applications, and the browser and network (when available).
36. #wczg
 @slobodan_ • 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.
37. #wczg
 @slobodan_ sw.js main.js
38. #wczg
 @slobodan_ We do not want to send too much API calls, because they are not cheap LESS API CALLS?
 GRAPHQL
39. #wczg
 @slobodan_ A GraphQL query is a string interpreted by a server that returns data in a specified format.
40. #wczg
 @slobodan_
41. #wczg
 @slobodan_ Storage would be useful, then we don’t depend on the server all the time STORE THINGS LOCALLY WITH INDEXEDDB
42. #wczg
 @slobodan_ 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.
43. #wczg
 @slobodan_ • Key-value pairs • Built on a transactional database model • Mostly asynchronous • It uses DOM events to notify you when results are available • noSQL • Same-origin policy
44. #wczg
 @slobodan_ Sync our local database when ever server is available DATA SYNCHRONIZATION? POUCHDB
45. #wczg
 @slobodan_ PouchDB is an open-source JavaScript database inspired by Apache CouchDB that is designed to run well within the browser.
46. #wczg
 @slobodan_ 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.
47. #wczg
 @slobodan_
48. #wczg
 @slobodan_ Why stop there? What about the requests? BACKGROUND SYNC
49. #wczg
 @slobodan_ 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.
50. #wczg
 @slobodan_
51. #wczg
 @slobodan_ Handle large upload/downloads in the background BACKGROUND DOWNLOADING/UPLOADING WITH SERVICE WORKERS
52. #wczg
 @slobodan_ SW caching can fail if you close the browser while caching big assets! More info:
 https://github.com/jakearchibald/background-cache
53. #wczg
 @slobodan_ • 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 More info:
 https://github.com/jakearchibald/background-cache
54. #wczg
 @slobodan_ • 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 More info:
 https://github.com/jakearchibald/background-cache
55. #wczg
 @slobodan_
56. #wczg
 @slobodan_ Don’t use the server when ever you don’t really need to PEER-TO-PEER CONNECTION WITH WEBRTC
57. #wczg
 @slobodan_ WebRTC is a free, open project that provides browsers and mobile applications with Real-Time Communications (RTC) capabilities via simple APIs
58. #wczg
 @slobodan_ • MediaStream (aka getUserMedia) • RTCPeerConnection • RTCDataChannel WebRTC implements three APIs:
59. #wczg
 @slobodan_
60. #wczg
 @slobodan_ WebTorrent is a streaming torrent client for the web browser WEB TORRENT
61. #wczg
 @slobodan_ 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.
62. #wczg
 @slobodan_ Why?
63. #wczg
 @slobodan_ “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.”
64. #wczg
 @slobodan_
65. #wczg
 @slobodan_ WHAT IF WE CAN LOAD HTML, CSS AND JAVASCRIPT VIA P2P CONNECTION?
66. #wczg
 @slobodan_ npm install hyperdrive MEET
 HYPERDRIVE
67. #wczg
 @slobodan_ A file sharing network based on rabin file chunking and append only feeds of data verified by merkle trees. More info:
 https://github.com/datproject/docs/blob/master/docs/hyperdrive_spec.md
68. #wczg
 @slobodan_ Hyperdrive is the peer-to-peer data distribution protocol that powers Dat. It consists of two parts. More info:
 https://github.com/datproject/docs/blob/master/docs/hyperdrive_spec.md
69. #wczg
 @slobodan_ First there is hypercore which is the core protocol and swarm that handles distributing append-only logs of any binary data. More info:
 https://github.com/datproject/docs/blob/master/docs/hyperdrive_spec.md
70. #wczg
 @slobodan_ 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
71. #wczg
 @slobodan_ http://dat-data.com DAT
72. #wczg
 @slobodan_ https://ipfs.io INTERPLANETARY FILE SYSTEM
73. #wczg
 @slobodan_ This solves just a small part of the problems WHAT OTHER PROBLEMS WE NEED TO SOLVE?
74. #wczg
 @slobodan_ • Timestamps • Storing and checking session • Security and privacy • How do we test the extreme situations?
75. #wczg
 @slobodan_ THE MESSAGE?
76. #wczg
 @slobodan_ WE NOW KNOW
 HOW TO BUILD
 AN INSTAGRAM FOR MARS? We need a place to share food images, right?
77. #wczg
 @slobodan_ NO
78. #wczg
 @slobodan_ MOST OF THE THINGS WE ARE BUILDING ARE NOT EVEN WORKING FOR EVERYONE ON THIS PLANET
79. #wczg
 @slobodan_
80. #wczg
 @slobodan_ Do not expect smart answers :) QUESTIONS? #WCZG