How to build a website that will (eventually) work on Mars - Hackference 2017

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

#hackference  @slobodan_ I am Slobodan Stojanović $50PG$MPVE)PSJ[POBOE +4#FMHSBEF.FFUVQPSHBOJ[FS FGGPSUMFTTTFSWFSMFTTDPN UXJUUFSDPNTMPCPEBO@

Slide 3

Slide 3 text

#hackference  @slobodan_ WARNING 5IFNBJOHPBMPGUIJTUBMLJTUPFYQMPSFTPNFPGUIF OFXUFDIOPMPHJFTJOBCJUVOFYQFDUFEXBZ NPTUPG UIPTFUIJOHTXJMMQSPCBCMZXPSLDPNQMFUFMZEJGGFSFOUBU UIFNPNFOUIVNBOTDPMPOJ[F.BST 5IJTJTOPUEFFQUFDIOJDBMUBMLBOEJUDPOUBJOTTPNF MFWFMPGTJNQMJGJFEGBDUT

Slide 4

Slide 4 text

#hackference  @slobodan_

Slide 5

Slide 5 text

#hackference  @slobodan_ 8IZPOFBSUIXPVMEBOZPOFEPUIBU WHY MARS?!

Slide 6

Slide 6 text

#hackference  @slobodan_ -FUsTTFFXIBUEPXFLOPXBCPVUJU MARS

Slide 7

Slide 7 text

#hackference  @slobodan_ ↟*UsTBQMBOFU ↟"QQSPYJNBUFMZUIFTBNFMBOENBTTXJUI&BSUI ↟.BSTEBZ 4PM JTEIN ↟.BSTZFBSJTEBZT ZFBST ↟5FNQFSBUVSFDBOCF$ ↟.BSUJBOTVSGBDFHSBWJUZJTPOMZ  PGUIF&BSUIT ↟5IFSFBSFTJHOTPGMJRVJEXBUFSPO.BST

Slide 8

Slide 8 text

#hackference  @slobodan_ ↟0OMZNJTTJPOTUP.BST  IBWFCFFOTVDDFTTGVM ↟5FNQFSBUVSFDBOBMTPCF$ ↟.BSTIBTUIFMBSHFTUEVTUTUPSNT  JOUIFTPMBSTZTUFN ↟3BEJBUJPO ↟*UEPFTOsUIBWFBOBUNPTQIFSF

Slide 9

Slide 9 text

#hackference  @slobodan_ 4FSJPVTMZ 85' &BSUIJTQFSGFDU SJHIU WAIT!  WHY WOULD ANYONE GO TO MARS!?

Slide 10

Slide 10 text

#hackference  @slobodan_ 0GDPVSTFJUJT+VTUBTLUIFEJOPTBVST

Slide 11

Slide 11 text

#hackference  @slobodan_ 5PBUMFBTUPOFNPSFEBUBDFOUFSPSBWBJMBCJMJUZ[POF OK, SO WE NEED  A FAILOVER, RIGHT?

Slide 12

Slide 12 text

#hackference  @slobodan_ /P OPUUIBUPOF JNBHJOFUIFPOFUIBUTPNFCPEZXPVMEVTF AND NOW, IMAGINE YOU HAVE A WEBSITE

Slide 13

Slide 13 text

#hackference  @slobodan_ ! SO, LET’S GO BACK TO MARS

Slide 14

Slide 14 text

#hackference  @slobodan_ IT’S THE ONLY PLANET  INHABITED BY ROBOTS ONLY

Slide 15

Slide 15 text

#hackference  @slobodan_ UNTIL ONE DAY IN 2025… *O+BOVBSZ UIFOBHBJOJO j

Slide 16

Slide 16 text

#hackference  @slobodan_

Slide 17

Slide 17 text

#hackference  @slobodan_

Slide 18

Slide 18 text

#hackference  @slobodan_

Slide 19

Slide 19 text

#hackference  @slobodan_

Slide 20

Slide 20 text

#hackference  @slobodan_

Slide 21

Slide 21 text

#hackference  @slobodan_

Slide 22

Slide 22 text

#hackference  @slobodan_

Slide 23

Slide 23 text

#hackference  @slobodan_

Slide 24

Slide 24 text

#hackference  @slobodan_

Slide 25

Slide 25 text

#hackference  @slobodan_

Slide 26

Slide 26 text

#hackference  @slobodan_

Slide 27

Slide 27 text

#hackference  @slobodan_ .BTMPXsTIJFSBSDIZPGOFFET

Slide 28

Slide 28 text

#hackference  @slobodan_ WI-FI .BTMPXsTIJFSBSDIZPGOFFET

Slide 29

Slide 29 text

#hackference  @slobodan_

Slide 30

Slide 30 text

#hackference  @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

Slide 31

Slide 31 text

#hackference  @slobodan_ :PVSTFSWFSTTFFNTUPCFPL*UTIPVMEKVTUXPSL SJHIU WHAT’S THE PROBLEM?

Slide 32

Slide 32 text

#hackference  @slobodan_ -JHIUUSBWFMTCFUXFFOBOENJOVUFTGSPN&BSUIUP.BST DISTANCE

Slide 33

Slide 33 text

#hackference  @slobodan_ /P UIFZBSFTUJMMCVJMEJOHUIFJSEBUBDFOUFSUIFSF LATENCY?  AH, CAN YOU JUST DEPLOY IT TO MARS-WEST-1 ON AWS?

Slide 34

Slide 34 text

#hackference  @slobodan_ /P UIFZBSFTUJMMCVJMEJOHUIFJSEBUBDFOUFSUIFSF LATENCY?  AH, CAN YOU JUST DEPLOY IT TO MARS-WEST-1 ON AWS?

Slide 35

Slide 35 text

#hackference  @slobodan_ /P/FUGMJYBOEWJEFPPSBVEJPDBMMT TPSSZ.BUU%BNPO NO REALTIME COMMUNICATION

Slide 36

Slide 36 text

#hackference  @slobodan_ /P/FUGMJYBOEWJEFPPSBVEJPDBMMT TPSSZ.BUU%BNPO NO REALTIME COMMUNICATION

Slide 37

Slide 37 text

#hackference  @slobodan_ WHAT CAN WE DO WHEN WE DON’T HAVE ENOUGH SERVERS?

Slide 38

Slide 38 text

#hackference  @slobodan_ 5IBUsTRVJUFQPQVMBSOPX SJHIU GO SERVERLESS?

Slide 39

Slide 39 text

#hackference  @slobodan_

Slide 40

Slide 40 text

#hackference  @slobodan_ 8IBUTBQQ 'BDFCPPL.FTTFOHFS 4POJD4DSFXESJWFS HOW DO WE COMMUNICATE IN THE SPACE?

Slide 41

Slide 41 text

#hackference  @slobodan_

Slide 42

Slide 42 text

#hackference  @slobodan_ :FT UIFTBNFSBEJPXBWFTZPVBSFSFDFJWJOHXJUIBDBSSBEJP RADIO WAVES

Slide 43

Slide 43 text

#hackference  @slobodan_

Slide 44

Slide 44 text

#hackference  @slobodan_ INTERPLANETARY INTERNET

Slide 45

Slide 45 text

#hackference  @slobodan_ "DPNQVUFSOFUXPSLBSDIJUFDUVSFUIBUBEESFTTFTMBDLPG DPOUJOVPVTDPOOFDUJWJUZ DELAY/DISRUPTION TOLERANT NETWORKING

Slide 46

Slide 46 text

#hackference  @slobodan_ 4UBOEBSEJOUFSOFU

Slide 47

Slide 47 text

#hackference  @slobodan_ %5/

Slide 48

Slide 48 text

#hackference  @slobodan_ /FUXPSLTBSFIBSE BUMFBTUGPSNF MFUsTGPDVTPOUIJOHTXFLOPX LET’S GO BACK TO THE WEB DEVELOPMENT

Slide 49

Slide 49 text

#hackference  @slobodan_

Slide 50

Slide 50 text

#hackference  @slobodan_ 0VSXFCTJUFXPVMEXPSLFWFOXIFOUIFTFSWFSJTOPUBWBJMBCMF OFFLINE ACCESS WITH SERVICE WORKERS

Slide 51

Slide 51 text

#hackference  @slobodan_ 4FSWJDFXPSLFSTFTTFOUJBMMZBDUBT QSPYZTFSWFSTUIBUTJUCFUXFFOXFC BQQMJDBUJPOT BOEUIFCSPXTFSBOE OFUXPSL XIFOBWBJMBCMF

Slide 52

Slide 52 text

#hackference  @slobodan_ ↟&OBCMFFGGFDUJWFPGGMJOFFYQFSJFODFT ↟*OUFSDFQUOFUXPSLSFRVFTUTBOEUBLJOH BQQSPQSJBUFBDUJPOCBTFEPOXIFUIFSUIF OFUXPSLJTBWBJMBCMF ↟"MMPXBDDFTTUPQVTIOPUJGJDBUJPOT ↟#BDLHSPVOETZOD"1*T

Slide 53

Slide 53 text

#hackference  @slobodan_ TXKT NBJOKT

Slide 54

Slide 54 text

#hackference  @slobodan_ TXKT NBJOKT

Slide 55

Slide 55 text

#hackference  @slobodan_ 8FEPOPUXBOUUPTFOEUPPNVDI"1*DBMMT CFDBVTFUIFZBSFOPUDIFBQ LESS API CALLS?  GRAPHQL

Slide 56

Slide 56 text

#hackference  @slobodan_ "(SBQI2-RVFSZJTBTUSJOHJOUFSQSFUFE CZBTFSWFSUIBUSFUVSOTEBUBJOB TQFDJGJFEGPSNBU

Slide 57

Slide 57 text

#hackference  @slobodan_

Slide 58

Slide 58 text

#hackference  @slobodan_ 4UPSBHFXPVMECFVTFGVM UIFOXFEPOsUEFQFOEPOUIFTFSWFSBMMUIFUJNF STORE THINGS LOCALLY WITH INDEXEDDB

Slide 59

Slide 59 text

#hackference  @slobodan_ *OEFYFE%#JTBMPXMFWFM"1*GPSDMJFOUTJEF TUPSBHFPGTJHOJGJDBOUBNPVOUTPGTUSVDUVSFEEBUB JODMVEJOHGJMFTCMPCT 5IJT"1*VTFTJOEFYFTUPFOBCMFIJHIQFSGPSNBODF TFBSDIFTPGUIJTEBUB

Slide 60

Slide 60 text

#hackference  @slobodan_ ↟,FZWBMVFQBJST ↟#VJMUPOBUSBOTBDUJPOBMEBUBCBTFNPEFM ↟.PTUMZBTZODISPOPVT ↟*UVTFT%0.FWFOUTUPOPUJGZZPVXIFO SFTVMUTBSFBWBJMBCMF ↟OP42- ↟4BNFPSJHJOQPMJDZ

Slide 61

Slide 61 text

#hackference  @slobodan_ 4ZODPVSMPDBMEBUBCBTFXIFOFWFSTFSWFSJTBWBJMBCMF DATA SYNCHRONIZATION? POUCHDB

Slide 62

Slide 62 text

#hackference  @slobodan_ 1PVDI%#JTBOPQFOTPVSDF+BWB4DSJQU EBUBCBTFJOTQJSFECZ"QBDIF$PVDI%#UIBU JTEFTJHOFEUPSVOXFMMXJUIJOUIFCSPXTFS

Slide 63

Slide 63 text

#hackference  @slobodan_ *UFOBCMFTBQQMJDBUJPOTUPTUPSFEBUBMPDBMMZXIJMF PGGMJOF UIFOTZODISPOJ[FJUXJUI$PVDI%#BOE DPNQBUJCMFTFSWFSTXIFOUIFBQQMJDBUJPOJTCBDL POMJOF LFFQJOHUIFVTFSTEBUBJOTZODOPNBUUFS XIFSFUIFZOFYUMPHJO

Slide 64

Slide 64 text

#hackference  @slobodan_

Slide 65

Slide 65 text

#hackference  @slobodan_ 8IZTUPQUIFSF 8IBUBCPVUUIFSFRVFTUT BACKGROUND SYNC

Slide 66

Slide 66 text

#hackference  @slobodan_ #BDLHSPVOETZODJTBOFXXFC"1*UIBUMFUTZPV EFGFSBDUJPOTVOUJMUIFVTFSIBTTUBCMF DPOOFDUJWJUZ    5IJTJTVTFGVMGPSFOTVSJOHUIBUXIBUFWFSUIF VTFSXBOUTUPTFOE JTBDUVBMMZTFOU

Slide 67

Slide 67 text

#hackference  @slobodan_

Slide 68

Slide 68 text

#hackference  @slobodan_ )BOEMFMBSHFVQMPBEEPXOMPBETJOUIFCBDLHSPVOE BACKGROUND DOWNLOADING/UPLOADING WITH SERVICE WORKERS

Slide 69

Slide 69 text

#hackference  @slobodan_ 48DBDIJOHDBOGBJMJGZPVDMPTFUIF CSPXTFSXIJMFDBDIJOHCJHBTTFUT .PSFJOGP  IUUQTXJDHHJUIVCJPCBDLHSPVOEGFUDI

Slide 70

Slide 70 text

#hackference  @slobodan_ ↟&OBCMFCBDLHSPVOEDBDIJOHPGNVMUJQMFSFTPVSDFT ↟&OBCMFCBDLHSPVOEVQMPBEJOHPGNVMUJQMFSFTPVSDFT ↟"MMPXUIF04UPIBOEMFUIFGFUDI TPUIFCSPXTFS EPFTOUOFFEUPSVO .PSFJOGP  IUUQTXJDHHJUIVCJPCBDLHSPVOEGFUDI

Slide 71

Slide 71 text

#hackference  @slobodan_ ↟"MMPXUIF04UPTIPX6*UPJOEJDBUFUIFQSPHSFTT PGUIFGFUDI ↟"MMPXUIF04UPEFBMXJUIQPPSDPOOFDUJWJUZCZ QBVTJOHSFTVNJOHUIFEPXOMPBEVQMPBE ↟"MMPXUIFBQQUPSFBDUUPGBJMVSFPGUIFGFUDI .PSFJOGP  IUUQTXJDHHJUIVCJPCBDLHSPVOEGFUDI

Slide 72

Slide 72 text

#hackference  @slobodan_

Slide 73

Slide 73 text

#hackference  @slobodan_ %POsUVTFUIFTFSWFSXIFOFWFSZPVEPOsUSFBMMZOFFEUP PEER-TO-PEER CONNECTION WITH WEBRTC

Slide 74

Slide 74 text

#hackference  @slobodan_ 8FC35$JTBGSFF PQFOQSPKFDUUIBUQSPWJEFT CSPXTFSTBOENPCJMFBQQMJDBUJPOTXJUI3FBM 5JNF$PNNVOJDBUJPOT 35$ DBQBCJMJUJFTWJB TJNQMF"1*T

Slide 75

Slide 75 text

#hackference  @slobodan_ ↟.FEJB4USFBN BLBHFU6TFS.FEJB ↟35$1FFS$POOFDUJPO ↟35$%BUB$IBOOFM 8FC35$JNQMFNFOUTUISFF"1*T

Slide 76

Slide 76 text

#hackference  @slobodan_

Slide 77

Slide 77 text

#hackference  @slobodan_ 8FC5PSSFOUJTBTUSFBNJOHUPSSFOUDMJFOUGPSUIFXFCCSPXTFS WEB TORRENT

Slide 78

Slide 78 text

#hackference  @slobodan_ 8FC5PSSFOUJTXSJUUFODPNQMFUFMZJO+BWB4DSJQUmUIF MBOHVBHFPGUIFXFCmBOEVTFT8FC35$GPSQFFS UPQFFSUSBOTQPSUXIFOFWFSQPTTJCMF    /PCSPXTFSQMVHJOT FYUFOTJPOT PSJOTUBMMBUJPOJT SFRVJSFEUPVTF8FC5PSSFOUJOZPVSCSPXTFS

Slide 79

Slide 79 text

#hackference  @slobodan_ 8IZ

Slide 80

Slide 80 text

#hackference  @slobodan_ t*NBHJOFBQFFSUPQFFS:PV5VCFXIFSFWJFXFST IFMQUPIPTUUIFTJUFTDPOUFOU #ZNBLJOH#JU5PSSFOUFBTJFSUPVTF XFDBOHFU NPSFQFPQMFUPQBSUJDJQBUFBOEUBLFUIFGJSTUTUFQT UPSFEFDFOUSBMJ[JOHUIF*OUFSOFUu

Slide 81

Slide 81 text

#hackference  @slobodan_

Slide 82

Slide 82 text

#hackference  @slobodan_

Slide 83

Slide 83 text

#hackference  @slobodan_ " WHAT IF WE CAN LOAD HTML, CSS AND JAVASCRIPT VIA P2P CONNECTION?

Slide 84

Slide 84 text

#hackference  @slobodan_

Slide 85

Slide 85 text

#hackference  @slobodan_ OQNJOTUBMMIZQFSESJWF MEET  HYPERDRIVE

Slide 86

Slide 86 text

#hackference  @slobodan_ "GJMFTIBSJOHOFUXPSLCBTFEPOSBCJOGJMF DIVOLJOHBOEBQQFOEPOMZGFFETPGEBUB WFSJGJFECZNFSLMFUSFFT .PSFJOGP  IUUQTHJUIVCDPNEBUQSPKFDUEPDT

Slide 87

Slide 87 text

#hackference  @slobodan_ .PSFJOGP  IUUQTHJUIVCDPNEBUQSPKFDUEPDT

Slide 88

Slide 88 text

#hackference  @slobodan_ )ZQFSESJWFJTUIFQFFSUPQFFSEBUBEJTUSJCVUJPO QSPUPDPMUIBUQPXFST%BU *UDPOTJTUTPGUXPQBSUT .PSFJOGP  IUUQTHJUIVCDPNEBUQSPKFDUEPDT

Slide 89

Slide 89 text

#hackference  @slobodan_ 'JSTUUIFSFJTIZQFSDPSFXIJDIJTUIFDPSFQSPUPDPM BOETXBSNUIBUIBOEMFTEJTUSJCVUJOHBQQFOEPOMZ MPHTPGBOZCJOBSZEBUB .PSFJOGP  IUUQTHJUIVCDPNEBUQSPKFDUEPDT

Slide 90

Slide 90 text

#hackference  @slobodan_ 5IFTFDPOEQBSUJTIZQFSESJWFXIJDIBEETB GJMFTZTUFNTQFDJGJDQSPUPDPMPOUPQPGIZQFSDPSF .PSFJOGP  IUUQTHJUIVCDPNEBUQSPKFDUEPDT

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

#hackference  @slobodan_ IUUQTJQGTJP INTERPLANETARY FILE SYSTEM

Slide 93

Slide 93 text

#hackference  @slobodan_ IUUQTCFBLFSCSPXTFSDPN BEAKER BROWSER

Slide 94

Slide 94 text

#hackference  @slobodan_ IUUQTCFBLFSCSPXTFSDPN

Slide 95

Slide 95 text

#hackference  @slobodan_ IUUQTCFBLFSCSPXTFSDPN

Slide 96

Slide 96 text

#hackference  @slobodan_

Slide 97

Slide 97 text

#hackference  @slobodan_ 5IJTTPMWFTKVTUBTNBMMQBSUPGUIFQSPCMFNT WHAT OTHER PROBLEMS WE NEED TO SOLVE?

Slide 98

Slide 98 text

#hackference  @slobodan_ ↟5JNFTUBNQT ↟4UPSJOHBOEDIFDLJOHTFTTJPO ↟4FDVSJUZBOEQSJWBDZ ↟)PXEPXFUFTUUIFFYUSFNFTJUVBUJPOT ↟"OENBOZNBOZNPSF

Slide 99

Slide 99 text

#hackference  @slobodan_ # THE MESSAGE?

Slide 100

Slide 100 text

#hackference  @slobodan_ WE NOW KNOW  HOW TO BUILD AN INSTAGRAM FOR MARS? .BUU%BNPOOFFETBQMBDFUPTIBSFGPPEJNBHFT SJHIU

Slide 101

Slide 101 text

#hackference  @slobodan_ # NO

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

#hackference  @slobodan_ ☝ ONE MORE THING

Slide 104

Slide 104 text

#hackference  @slobodan_ ☝ ONE MORE THING

Slide 105

Slide 105 text

#hackference  @slobodan_ % .BOOJOHT Serverless Apps with Node and Claudia.js (FUUIFCPPLXJUIPGGXJUIDUXIBDLGFSDPEF

Slide 106

Slide 106 text

#hackference  @slobodan_

Slide 107

Slide 107 text

#hackference  @slobodan_

Slide 108

Slide 108 text

#hackference  @slobodan_ 4FSWFSMFTT"QQTXJUI/PEFBOE$MBVEJBKTQSPNPDPEFDUXIBDLGFS QUESTIONS? IUUQTFGGPSUFMTTTFSWFSMFTTDPN  IUUQTUXJUUFSDPNTMPCPEBO@