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

Using Blockchain for UI state on the Web

May 18, 2018

Using Blockchain for UI state on the Web

A crazy idea presented at WeAreDevs 2018.


May 18, 2018

More Decks by swizec

Other Decks in Technology



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

    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
  4. 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?
  5. 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?
  6. 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
  7. AND IT’S IMMUTABLE @SWIZEC and the data is immutable once

    on the blockchain, always on the blockchain
  8. 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
  9. 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
  10. 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!
  11. 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
  12. @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>
  13. 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
  14. TEXT ANYONE CAN BLOCKCHAIN – ACTION sendMessage = ({ username,

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

    message }) => { this.blockchain.dispatch( addMessage({ username, message }) ); }; @SWIZEC
  16. 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
  17. TEXT WEBRTC WAT? ‣ peer to peer communication between browsers

    ‣ can send data ‣ (also video and audio but eh) ‣ needs signaling server to perform handshake
  18. TEXT CAVEATS? MANY ‣ what if everyone leaves site? ‣

    consensus is hard ‣ might get slow ‣ how do you handle PWA @SWIZEC