$30 off During Our Annual Pro Sale. View Details »

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

Slobodan Stojanović

October 29, 2016
Tweet

More Decks by Slobodan Stojanović

Other Decks in Programming

Transcript

  1. #wczg

    @slobodan_
    HOW TO BUILD
    A WEBSITE
    THAT WILL EVENTUALLY
    WORK ON MARS

    View Slide

  2. #wczg

    @slobodan_
    I am Slobodan Stojanović
    CTO of Cloud Horizon and
    JS Belgrade Meetup organizer
    github.com/stojanovic
    twitter.com/slobodan_
    2

    View Slide

  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.

    View Slide

  4. #wczg

    @slobodan_

    View Slide

  5. #wczg

    @slobodan_
    WHY MARS?!
    Why on earth would anyone do that?

    View Slide

  6. #wczg

    @slobodan_
    Let’s see what do we know about it?
    MARS
    #wczg

    @slobodan_

    View Slide

  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

    View Slide

  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

    View Slide

  9. #wczg

    @slobodan_
    Seriously, WTF!? Earth is perfect, right?
    WAIT!

    WHY WOULD ANYONE GO TO
    MARS!?

    View Slide

  10. #wczg

    @slobodan_
    Of course it is! Just ask the dinosaurs.

    View Slide

  11. #wczg

    @slobodan_
    To at least one more “data center”
    OK, SO WE NEED

    A BACKUP, RIGHT?

    View Slide

  12. #wczg

    @slobodan_
    No, not that one, imagine the one that somebody would use :)
    AND NOW,
    IMAGINE YOU HAVE A
    WEBSITE

    View Slide

  13. #wczg

    @slobodan_

    SO, LET’S GO BACK TO MARS

    View Slide

  14. #wczg

    @slobodan_
    IT’S THE ONLY PLANET

    INHABITED BY ROBOTS ONLY

    View Slide

  15. #wczg

    @slobodan_
    UNTIL ONE DAY IN 2025…
    In January, then again in 2027, 2029…

    View Slide

  16. #wczg

    @slobodan_

    View Slide

  17. #wczg

    @slobodan_
    WI-FI
    Maslow’s hierarchy of needs

    View Slide

  18. #wczg

    @slobodan_
    Thanks Saša Jurić :)

    View Slide

  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

    View Slide

  20. #wczg

    @slobodan_
    Your servers seems to be ok. It should just work, right?
    WHAT’S THE PROBLEM?

    View Slide

  21. #wczg

    @slobodan_
    Light travels between 3 and 22 minutes from Earth to Mars
    DISTANCE

    View Slide

  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?

    View Slide

  23. #wczg

    @slobodan_
    No Netflix and video or audio calls, sorry Matt Damon
    NO REALTIME
    COMMUNICATION

    View Slide

  24. #wczg

    @slobodan_
    Beside crying and answering support emails, of course
    WHAT CAN WE DO WHEN WE
    DON’T HAVE ENOUGH
    SERVERS?

    View Slide

  25. #wczg

    @slobodan_
    That’s quite popular now, right?
    GO SERVERLESS?

    View Slide

  26. #wczg

    @slobodan_
    Whatsapp? Facebook Messenger? Sonic Screwdriver?
    HOW DO WE COMMUNICATE
    IN THE SPACE?

    View Slide

  27. #wczg

    @slobodan_

    View Slide

  28. #wczg

    @slobodan_
    Yes, the same radio waves you are receiving with a car radio :)
    RADIO WAVES

    View Slide

  29. #wczg

    @slobodan_
    INTERPLANETARY INTERNET

    View Slide

  30. #wczg

    @slobodan_
    A computer network architecture that addresses lack of continuous connectivity
    DELAY/DISRUPTION
    TOLERANT NETWORKING

    View Slide

  31. #wczg

    @slobodan_
    Standard internet

    View Slide

  32. #wczg

    @slobodan_
    DTN

    View Slide

  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

    View Slide

  34. #wczg

    @slobodan_
    Our website would work even when the server is not available
    OFFLINE ACCESS WITH
    SERVICE WORKERS

    View Slide

  35. #wczg

    @slobodan_
    Service workers essentially act as
    proxy servers that sit between web
    applications, and the browser and
    network (when available).

    View Slide

  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.

    View Slide

  37. #wczg

    @slobodan_
    sw.js
    main.js

    View Slide

  38. #wczg

    @slobodan_
    We do not want to send too much API calls, because they are not cheap
    LESS API CALLS?

    GRAPHQL

    View Slide

  39. #wczg

    @slobodan_
    A GraphQL query is a string
    interpreted by a server that returns
    data in a specified format.

    View Slide

  40. #wczg

    @slobodan_

    View Slide

  41. #wczg

    @slobodan_
    Storage would be useful, then we don’t depend on the server all the time
    STORE THINGS LOCALLY
    WITH INDEXEDDB

    View Slide

  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.

    View Slide

  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

    View Slide

  44. #wczg

    @slobodan_
    Sync our local database when ever server is available
    DATA SYNCHRONIZATION?
    POUCHDB

    View Slide

  45. #wczg

    @slobodan_
    PouchDB is an open-source
    JavaScript database inspired by
    Apache CouchDB that is designed
    to run well within the browser.

    View Slide

  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.

    View Slide

  47. #wczg

    @slobodan_

    View Slide

  48. #wczg

    @slobodan_
    Why stop there? What about the requests?
    BACKGROUND SYNC

    View Slide

  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.

    View Slide

  50. #wczg

    @slobodan_

    View Slide

  51. #wczg

    @slobodan_
    Handle large upload/downloads in the background
    BACKGROUND
    DOWNLOADING/UPLOADING
    WITH SERVICE WORKERS

    View Slide

  52. #wczg

    @slobodan_
    SW caching can fail if you close the
    browser while caching big assets!
    More info:

    https://github.com/jakearchibald/background-cache

    View Slide

  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

    View Slide

  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

    View Slide

  55. #wczg

    @slobodan_

    View Slide

  56. #wczg

    @slobodan_
    Don’t use the server when ever you don’t really need to
    PEER-TO-PEER CONNECTION
    WITH WEBRTC

    View Slide

  57. #wczg

    @slobodan_
    WebRTC is a free, open project that
    provides browsers and mobile applications
    with Real-Time Communications (RTC)
    capabilities via simple APIs

    View Slide

  58. #wczg

    @slobodan_
    • MediaStream (aka getUserMedia)
    • RTCPeerConnection
    • RTCDataChannel
    WebRTC implements three APIs:

    View Slide

  59. #wczg

    @slobodan_

    View Slide

  60. #wczg

    @slobodan_
    WebTorrent is a streaming torrent client for the web browser
    WEB TORRENT

    View Slide

  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.

    View Slide

  62. #wczg

    @slobodan_
    Why?

    View Slide

  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.”

    View Slide

  64. #wczg

    @slobodan_

    View Slide

  65. #wczg

    @slobodan_

    WHAT IF WE CAN LOAD
    HTML, CSS AND JAVASCRIPT
    VIA P2P CONNECTION?

    View Slide

  66. #wczg

    @slobodan_
    npm install hyperdrive
    MEET

    HYPERDRIVE

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  71. #wczg

    @slobodan_
    http://dat-data.com
    DAT

    View Slide

  72. #wczg

    @slobodan_
    https://ipfs.io
    INTERPLANETARY
    FILE SYSTEM

    View Slide

  73. #wczg

    @slobodan_
    This solves just a small part of the problems
    WHAT OTHER PROBLEMS WE
    NEED TO SOLVE?

    View Slide

  74. #wczg

    @slobodan_
    • Timestamps
    • Storing and checking session
    • Security and privacy
    • How do we test the extreme situations?

    View Slide

  75. #wczg

    @slobodan_

    THE MESSAGE?

    View Slide

  76. #wczg

    @slobodan_
    WE NOW KNOW

    HOW TO BUILD

    AN INSTAGRAM FOR MARS?
    We need a place to share food images, right?

    View Slide

  77. #wczg

    @slobodan_

    NO

    View Slide

  78. #wczg

    @slobodan_
    MOST OF THE THINGS WE
    ARE BUILDING ARE NOT EVEN
    WORKING FOR EVERYONE ON
    THIS PLANET

    View Slide

  79. #wczg

    @slobodan_

    View Slide

  80. #wczg

    @slobodan_
    Do not expect smart answers :)
    QUESTIONS?
    #WCZG

    View Slide