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

Using Blockchain for UI state on the Web

swizec
May 18, 2018

Using Blockchain for UI state on the Web

A crazy idea presented at WeAreDevs 2018.

swizec

May 18, 2018
Tweet

More Decks by swizec

Other Decks in Technology

Transcript

  1. BLOCKCHAIN FOR SHARED STATE
    ON THE WEB
    SWIZEC TELLER

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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?

    View full-size slide

  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?

    View full-size slide

  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

    View full-size slide

  8. AND IT’S IMMUTABLE
    @SWIZEC
    and the data is immutable

    once on the blockchain, always on the blockchain

    View full-size slide

  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

    View full-size slide

  10. EH?
    @SWIZEC
    you keep saying immutable and talking about immutability

    who cares?

    View full-size slide

  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

    View full-size slide

  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!

    View full-size slide

  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

    View full-size slide

  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


    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  19. THAT’S IT
    @SWIZEC

    View full-size slide

  20. HERE’S HOW IT WORKS
    @SWIZEC

    View full-size slide

  21. ELEPHANT!?
    @SWIZEC

    View full-size slide

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

    View full-size slide

  23. WEBRTC IS HARD
    @SWIZEC

    View full-size slide

  24. TEXT
    WEBRTC WAT?
    ‣ peer to peer communication between browsers
    ‣ can send data
    ‣ (also video and audio but eh)
    ‣ needs signaling server to perform handshake

    View full-size slide

  25. TEXT
    CAVEATS? MANY
    ‣ what if everyone leaves site?
    ‣ consensus is hard
    ‣ might get slow
    ‣ how do you handle PWA
    @SWIZEC

    View full-size slide

  26. IS IT USEFUL?
    @SWIZEC

    View full-size slide

  27. IT’S DEFINITELY COOL
    @SWIZEC

    View full-size slide

  28. SWIZEC.COM
    HIRE ME TO HELP YOU OR YOUR TEAM
    BECOME BETTER ENGINEERS

    View full-size slide