Using Blockchain for UI state on the Web

A crazy idea presented at WeAreDevs 2018.

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