BLOCKCHAIN FOR SHARED STATE ON THE WEB SWIZEC TELLER 

@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 

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 

@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 

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? 

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? 

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 

AND IT’S IMMUTABLE @SWIZEC and the data is immutable once on the blockchain, always on the blockchain 

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 

EH? @SWIZEC you keep saying immutable and talking about immutability who cares? 

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 

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! 

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 

@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 

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 

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

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

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 

THAT’S IT @SWIZEC 

HERE’S HOW IT WORKS @SWIZEC 

@SWIZEC 

@SWIZEC 

@SWIZEC 

ELEPHANT!? @SWIZEC 

YES IT’S CENTRALIZED MY CONSENSUS ALGO SUCKS @SWIZEC 

WEBRTC IS HARD @SWIZEC 

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

@SWIZEC 

@SWIZEC 

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

IS IT USEFUL? @SWIZEC 

IT’S DEFINITELY COOL @SWIZEC 

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