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

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

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

2663a9ac90cc6ed420e0e1560db57782?s=128

Slobodan Stojanović

October 29, 2016
Tweet

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