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

Using Blockchain for UI state on the Web

11069ea4526454fab5398554dce6571f?s=47 swizec
May 18, 2018

Using Blockchain for UI state on the Web

A crazy idea presented at WeAreDevs 2018.

11069ea4526454fab5398554dce6571f?s=128

swizec

May 18, 2018
Tweet

Transcript

  1. BLOCKCHAIN FOR SHARED STATE ON THE WEB SWIZEC TELLER

  2. @SWIZEC HELPING YOU BECOME A BETTER ENGINEER Hi I’m Swizec,

    I help you become a better engineer teaching React with books, workshops, training software engineer in San Francisco that’s me doing my learn while you poop series
  3. CRAZY IDEA TIME @SWIZEC today I want to share a

    crazy idea it’s a research project of sorts, something I’ve been playing around with when I have time
  4. @SWIZEC BLOCKCHAIN IS LIKE THE WEB IN 1995. NERDS ARE

    EXCITED ABOUT IT, NORMIES SMELL SOMETHING BREWING, NOBODY KNOWS WHAT TO DO WITH IT story time! it was a cozy december night when I was hanging out on Telegram as one does it was peak blockchain craze, normie friends asking me about it for the first time we were talking about what stage of the cycle we’re in then someone mentioned Redux, as one does
  5. BLOCKCHAIN REDUX?? @SWIZEC and that gave me an idea …

    could you build blockchains with normal webapp tools? use it to store all your UI state?
  6. WHAT’S A BLOCKCHAIN ANYWAY? @SWIZEC let’s backtrack for a bit

    what is a blockchain? how does it work? can it do more than crypto?
  7. VERIFIED REVERSE-LINKED LIST @SWIZEC a blockchain is just a hash

    list each block holds some data and a reference to the previous block that reference happens to be a hash of all preceding state once you add forks, it’s a merkle tree
  8. AND IT’S IMMUTABLE @SWIZEC and the data is immutable once

    on the blockchain, always on the blockchain
  9. REDUX ALSO IS IMMUTABLE @SWIZEC ok so what’s redux redux

    is a state management library it uses actions to make copies of state with some changes you could say that it’s a chain of state linked by actions also, immutable
  10. EH? @SWIZEC you keep saying immutable and talking about immutability

    who cares?
  11. TEXT WHY IMMUTABILITY ‣ easier to debug ‣ time travel

    ‣ easier to think about ‣ distributable @SWIZEC you care because immutability makes your life easier plus you can distribute immutable computation
  12. WAIT … DISTRIBUTABLE? @SWIZEC wait, we’re on to something blockchain

    and redux sketches looked similar they’re both distributable and immutable we can work with this!
  13. BLOCKCHAIN-REDUX @SWIZEC and so I started working on blockchain-redux a

    library that lets anyone create a new blockchain, keep their state in blocks transparently distributed, handles communication and so on all you need are the tools you already know
  14. @SWIZEC @SWIZEC it’s still a proof of concept at best

    but last night I built a chat app in about an hour that’s because I don’t know material-ui and wanted to make it pretty <demo>
  15. TEXT ANYONE CAN BLOCKCHAIN – INIT this.blockchain = await createStore(

    chatReducer, firebaseMiddleware(FirebaseApp) ); this.unsubscribe = this.blockchain.subscribe(() => { console.log("Update received"); this.forceUpdate(); }); console.log("Blockchain inited!"); this.forceUpdate(); @SWIZEC
  16. TEXT ANYONE CAN BLOCKCHAIN – ACTION sendMessage = ({ username,

    message }) => { this.blockchain.dispatch( addMessage({ username, message }) ); }; @SWIZEC
  17. TEXT ANYONE CAN BLOCKCHAIN – REDUCER sendMessage = ({ username,

    message }) => { this.blockchain.dispatch( addMessage({ username, message }) ); }; @SWIZEC
  18. TEXT ANYONE CAN BLOCKCHAIN – REDUCER const messageReducer = function(state

    = [], action) { switch (action.type) { case "ADD_MESSAGE": let { username, message } = action; return [ ...state, { user: username, message } ]; default: return state; } }; @SWIZEC
  19. THAT’S IT @SWIZEC

  20. HERE’S HOW IT WORKS @SWIZEC

  21. @SWIZEC

  22. @SWIZEC

  23. @SWIZEC

  24. ELEPHANT!? @SWIZEC

  25. YES IT’S CENTRALIZED MY CONSENSUS ALGO SUCKS @SWIZEC

  26. WEBRTC IS HARD @SWIZEC

  27. TEXT WEBRTC WAT? ‣ peer to peer communication between browsers

    ‣ can send data ‣ (also video and audio but eh) ‣ needs signaling server to perform handshake
  28. @SWIZEC

  29. @SWIZEC

  30. TEXT CAVEATS? MANY ‣ what if everyone leaves site? ‣

    consensus is hard ‣ might get slow ‣ how do you handle PWA @SWIZEC
  31. IS IT USEFUL? @SWIZEC

  32. IT’S DEFINITELY COOL @SWIZEC

  33. SWIZEC.COM HIRE ME TO HELP YOU OR YOUR TEAM BECOME

    BETTER ENGINEERS