layout: true class: center, middle, inverse --- .width50percent[  ] --- name: start layout: false class: center, middle, inverse # Decentralised Applications Development Club  ## Technical Overview 12/03/2019 --- layout: false class: center, middle, inverse .width50percent[  ] *scan me!* https://dappsdev.org/deck/s01e02/ --- name: agenda layout: false class: left, middle, inverse ## Today - Partners - Intro - Ethereum Virtual Machine - Smart Contracts - Web3.js - Next session - Announcements --- name: partners layout: false class: left, middle, inverse ## Partners --- layout: false class: left, middle, inverse .left-column[ ## Partners ### Chainstack ] .right-column[ .width50percent[  ] ] --- layout: false class: left, middle, inverse .left-column[ ## Partners ### Chainstack ### Spartan ] .right-column[ .width50percent[  ] ] --- layout: false class: left, middle, inverse .left-column[ ## Partners ### Chainstack ### Spartan ### NBC'19 ] .right-column[ .width50percent[  ] ] --- layout: false class: left, middle, inverse .left-column[ ## Partners ### Chainstack ### Spartan ### NBC'19 ### StartupToken ] .right-column[ .width50percent[  ] ] --- layout: false class: left, middle, inverse .left-column[ ## Partners ### Chainstack ### Spartan ### NBC'19 ### StartupToken ### EngineersSG ] .right-column[ .width50percent[  ] ] --- name: intro layout: false class: left, middle, inverse ## Intro ??? - Before we go into the the topics, for the benefit of those who are attending the their first session today --- layout: false class: left, middle, inverse .left-column[ ## Intro ### DADC ] .right-column[ .width50percent[  ] - Decentralised Applications Development Club - Format inspired by the technical book club from SingaporeJS - [dappsdev.org](https://dappsdev.org/) - [our discord](https://discordapp.com/invite/eM9Vv7P) ] ??? - The DApps Dev Club meets twice a month, and this is our 2nd session - In each session, we plan to discuss about 3 or four different topics, selected from the *Mastering Ethereum* book - We are a technical book club, so in each session, when we meet up together, we'll be discussing select parts from this book, plus working through things together - I should mention that while this is not a common format, it isn't completely new - in fact it is inspired by the book club that the SingaporeJS meetup runs - The nexus for all the club happennings are on this website, dappsdev.org - The main thing to look out for on the website are the news feed, which you can subscribe to via the RSS feed, or check back on manually - The other thing to loom out for on the website is the sessions page, which is a calendar for all of the events - Apart from meeting in person, we can also have discussions online - We have a discord server for that, and you can join using the link found on our website --- layout: false class: left, middle, inverse .left-column[ ## Intro ### DADC ### Kenneth ] .right-column[ - Also runs the Blockchain&DApps meetup - CTO of Bytepay .width50percent[  ] .footnote[ - http://www.kennethhu.net/ ] ] ??? - Kenneth is the CTO of Bytepay - He knows the Ethereum stack inside out - He also runs a blockchain events across Taiwan, Malaysia, and Singapore --- layout: false class: left, middle, inverse .left-column[ ## Intro ### DADC ### Kenneth ### Brendan ] .right-column[ - Started DApps Dev Club - NodeJS developer .footnote[ - http://bguiz.com/ ] ] ??? - I'm Brendan, and I work as a software engineer - Spend most of my time doing NodeJs - Met Kenneth through the EthSG hackathon last year - We to collaborate and create a series of educational blockchain meetups, and here we are --- layout: false class: left, middle, inverse .left-column[ ## Intro ### DADC ### Kenneth ### Brendan ### You! ] .right-column[ - No blockchain knowledge required - No solidity or smart contract knowledge required - Basic Javascript needed in session #05 - ~~wen ico? wen moon?~~ ] ??? - So, how about you? These sessions are designed with a particular audience in mind. - If you know nothing about blockchain, or about smart contracts, that's perfect - However, if you don't know some basic JS, you'll need to pick that up to follow along in the later sessions. - I'll post some resources that you can use to learn JS after this session, or come talk to me, or ask around in our discord - Bring your laptops to the sessions, as you'll be able to paerticipate in the hands on parts of the sessions --- name: evm class: center, middle, inverse ## Ethereum Virtual Machine ??? - So today's topics are the EVM, Smart Contracts, and Web3 - *Mastering Ethereum* Chapter 13 - These are all pretty intertwined, and IMO, you do need to understand all of them, at a basic level, before you can properly understand any one of them - The goal is that at the end of this session, you will understand what the purpose of each of these three things is, and how they work with each other. --- layout: false class: left, middle, inverse .left-column[ ## EVM ### Broadly ] .right-column[ - Global computer - Turing complete (* quasi) - Gas costs .footnote[ - https://github.com/ethereum/wiki/wiki/White-Paper - https://en.wikipedia.org/wiki/Turing_completeness ] ] ??? - The EVM is a global computer, where every single ethereum node runs a compliant virtual machine - The virtual machine executes functions stored in programs (AKA smart contracts), which we'll come to later - It is said to be Turing complete - Contrast with bitcoin's stack-based scripts, which are non-Turing complete - Implication: Can, in theory, write any type of general purpose application - Implication: Need a way to prevent infinite resource consumption - Quasi --> solution is gas. halt function execution when run out of gas --- layout: false class: left, middle, inverse .left-column[ ## EVM ### Broadly ### Distributed Computation ] .right-column[ - EVM + blockhain - "Distributed programming is the art of solving the same problem that you can solve on a single computer using multiple computers." - *mixu* - CAP theorem: Choose 2 out of 3 of these - Consistency, Availability, Partition tolerance .footnote[ - http://book.mixu.net/distsys/single-page.html ] ] ??? - Using blockchain to ensure that consensus is achieved between nodes, one can use EVM + blockchain to achieve a general purpose distributed computation model - it is worthwhile reading up about the distributed computing, and analysing Ethereum through the lens of it - for example, where does Ethereum sit within the CAP theorem? - with sharding, and without sharding? - We will not be going through this is detail here, but I think it is worthwhile doing a deep dive into this on your own - If you're interested, start a discussion on our discord --- layout: false class: left, middle, inverse .left-column[ ## EVM ### Broadly ### Distributed Computation ### Execution/1 ] .right-column[ .width100percent[  ] .footnote[ - https://ethervm.io/ ] ] ??? - So what actually happens when an Ethereum node receives a request to execute something on the EVM? - It reads the EVM byte code - Each byte code is just a number, but it corresponds to a particular low level instruction... --- layout: false class: left, middle, inverse .left-column[ ## EVM ### Broadly ### Distributed Computation ### Execution/2 ] .right-column[ .width100percent[  ] .footnote[ - https://ethervm.io/ ] ] ??? - And these are the low level instructions that those numbers correspond to. - If you're familiar with assembly language, this is the same concept - Byte code has a 1-to-1 correspondence with op-codes - op-codes are slightly more human readable, but still too low level for most of us, so that's where solidity comes in. more on this later! - op-codes, and therefore byte codes, are intended mainly as compiler targets --- layout: false class: left, middle, inverse .left-column[ ## EVM ### Broadly ### Distributed Computation ### Execution/3 ] .right-column[ - Opcode & bytecode - Software level abstraction over hardware instructions on different platforms - Side note: Virtual machines? - *Same type* as JVM, or .NET CLR - *Not* the same type as Virtual Box - Is *not* intended to be human readable .footnote[ - https://www.cubrid.org/blog/understanding-jvm-internals/ - https://github.com/trailofbits/evm-opcodes ] ] ??? - The node reads the EVM byte code, and runs each of those instructions in turn, until it is complete, or runs out of gas - Every invocation is sandboxed, and you can think of this as being analogous to a database queries wrapped in a transaction so that it can be rolled back - note about the *other type* of VM --- layout: false class: left, middle, inverse .left-column[ ## EVM ### Broadly ### Distributed Computation ### Execution ### Implementations ] .right-column[ - The abstraction via op-codes enables multiple implementations - Currently - Go - geth: core/vm - Rust - parity: ethcore - C++ - cpp-ethereum: libevm - Python - py-evm - Java - ethereumJ - many more .footnote[ - https://github.com/pirapira/awesome-ethereum-virtual-machine#evm-implementations ] ] ??? - Since op-codes are an abstraction, this gives developers the freedom to create their own implementation of the virtual machine itself - Choice of programming language, choice of operating system to compile on - Can even benefit from reusing the same test harness to test your own implementation against an existing one while bootstrapping --- layout:false class: center, middle, inverse ## Hands on remix: [bit.do/dadc-remix](http://remix.ethereum.org/#optimize=false&version=soljson-v0.5.1+commit.c8a2cb62.js) gist: [bit.do/dadc-sol](https://gist.github.com/bguiz/3d7048362323cc76931f72719972dc3b)     ??? - time to crack out your laptops, if you've brought them! --- name: sc class: center, middle, inverse ## Smart Contracts --- layout: false class: left, middle, inverse .left-column[ ## Smart Contracts ### What & Why ] .right-column[ - What - Ethereum's interpretation: General purpose computation that takes place on a blockchain or distributed ledger - Why - Negotiate and enforce an agreement or a transaction - A means to achieve decentralised automation .footnote[ - https://en.wikipedia.org/wiki/Smart_contract ] ] ??? - the term was first coined by nick szabo - smart contracts can mean different things in different contexts - in ethereum, they really are general purpose computations encoded by programs stored on its blockchain - they are useful in many ways, but the most notable one is that it can automate tasks and execution in a decentralised manner - advanced used case: build a decentralised autonomous organisation --- layout: false class: left, middle, inverse .left-column[ ## Smart Contracts ### What & Why ### How ] .right-column[ - How - Code stored on a blockchain, running on participating nodes - Set of rules that defines how they interact with each other - When rules are met, and consensus is achieved, they are enacted, and added to the next block .footnote[ - https://en.wikipedia.org/wiki/Smart_contract ] ] ??? - the key to how it works: - all nodes operate by the same set of rules for execution - decentralised consensus required for state --- layout: false class: left, middle, inverse .left-column[ ## Smart Contracts ### What & Why ### How ### Blockchain/1 ] .right-column[ - The EVM is embedded in a blockchain state divided into accounts - All accounts in ethereum are stored in a Merkle radix tree - Programs in the EVM live in accounts known as contracts. In addition to an address, a balance, and a sequence number (equal to the number of transactions sent by the account - also known as a nonce) - Contracts keep the hash of their EVM bytecode, and the Merkle root of their internal storage tree .footnote[ - https://github.com/CoinCulture/evm-tools/blob/master/analysis/guide.md#contracts ] ] ??? - let's delve a little into exactly what anchors a smart contract into the blockchain - this guide by CoinCulture describes this in detail, right down to the data structures used - we will not go into this level of detail here, but if you're interested, read the page that's linked on this slide, it's extremely detailed --- layout: false class: left, middle, inverse .left-column[ ## Smart Contracts ### What & Why ### How ### Blockchain/2 ] .right-column[ - An account can have at most one program associated with it - any time a transaction is made to the contract, or it is the target of another contract executing the CALL opcode, the code of that contract will execute - Note that once deployed, the code of a contract may not be changed. The Merkle root of the account/contract storage is updated after any successful transaction where execution of the SSTORE opcode results in a value being stored at a new key or a change to the value stored at an existing key. .footnote[ - https://github.com/CoinCulture/evm-tools/blob/master/analysis/guide.md#contracts ] ] ??? - (continues) - the main things to take away from this is that there are 2 things stored on the blockchain: 1. the byte code of the smart contract itself 2. the stored state of the smart contract --- layout: false class: left, middle, inverse .left-column[ ## Smart Contracts ### What & Why ### How ### Blockchain ### Code + State ] .right-column[ - Code + State - State can be updated via `SSTORE` opcode - and `SLOAD` reads state - Ethereum's blockchain contains a ledger of every single state change .footnote[ - https://ethereum.github.io/yellowpaper/paper.pdf - https://en.wikipedia.org/wiki/State_(computer_science) ] ] ??? - Before we delve into this - what is state? let's define it - data stored either in memory, or persisted - important to know that for any data, what are the rules/ conditions for changing it? - As we've just established, Ethereum stores both code and state on the blockchain - The only thing that can write code is deploy and kill - i.e. analogous to create and delete operations, there is no *update* equivalent - OTOH, state can indeed be updated --- layout: false class: left, middle, inverse .left-column[ ## Smart Contracts ### What & Why ### How ### Blockchain ### Code + State ### Storage costs/1 ] .right-column[ - it costs 20K gas to store a word (8 bytes) -  - Cost per word = `20000 gas * (10 * 10^-9 ETH/gas) * (188 SGD/1 ETH)` = 0.0376 SGD - Cost per megabyte = 4700 SGD .footnote[ - http://mitchellbarron.io/eth-storage ] ] ??? - ETH/SGD exchange rate from CoinHako - Let us work out what the real cost of storing data on Ethereum is right now - Using the current price of around 188 SGD per ETH, we do some multiplication, and work out that 8 bytes costs just under 4 cents to store - This means that 1MB takes close to 5K dollars to store - In the kickoff session, we mentioned that smart contract data storage is extremely expensive in a hand-wavey sort of way - but now we have a precise figure - This is quite possibly the world's most expensive storage system --- layout: false class: left, middle, inverse .left-column[ ## Smart Contracts ### What & Why ### How ### Blockchain ### Code + State ### Storage costs/1 ] .right-column[ - Poll: If you work on a CApp, what is the size of your database? - Off-chain storage - Disbelief? .footnote[ - http://mitchellbarron.io/eth-storage ] ] ??? - If you are a developer, this gives you an extremely heavy-handed constraint, and in some cases it even forces you away from writing certain types of applications - A common middle ground amongst developers is that they write hybrid CApps and DApps, where the storage is shifted off of the blockchain, and only a hash of this off-chain stored state is stored on-chain, for consensus purposes - Poll: Shall we recap what a hash is? - Now that the headline dollar amount has set in, some of you will be reacting, based on gut feel, that something cannot be right - perhaps the math is wrong, etc. But consider the following: 1. We're not just storing the latest state, but all the state that precedes it 2. The storage is massively redundant, meaning that many many different computers each store their own copies of this data 3. You need pay for the nodes to make it worthwhile to do all this storage for you --- layout: false class: left, middle, inverse .left-column[ ## Smart Contracts ### What & Why ### How ### Blockchain ### Code + State ### Storage costs/3 ] .right-column[ - The blockchain is huge, despite costs - At block ~56 million - geth "fast sync": 132 GB - geth "full archive": 2191 GB ] ??? - screen shots of these charts coming up next - Despite the fact that storing data is so expensive, the size of the blockchain is huge - Note that this is not just smart contract data, but also everything else in the blockchain - I would like to see someone do an analysis breaking down the percentage each type of data takes up on ethereum's blockchain --- layout: false class: left, middle, inverse ### "fast" size .width100percent[  ] .footnote[ - https://etherscan.io/chart2/chaindatasizefast ] --- layout: false class: left, middle, inverse ### "full" size .width100percent[  ] .footnote[ - https://etherscan.io/chartsync/chainarchive ] --- name: sc-workshop layout: false class: left, middle, inverse ## Hands on Time to open your laptops!  .footnote[ [bit.do/dadc-codestate](http://bit.do/dadc-codestate) ] ??? - We're going to do a demo --- layout: false class: left, middle, inverse Get the git repo ```bash git clone git@github.com:dapps-dev-club/blockchain-demo.git cd blockchain-demo git fetch origin feat/codestate:feat/codestate git checkout feat/codestate ``` .footnote[ [bit.do/dadc-codestate](http://bit.do/dadc-codestate) ] --- layout: false class: left, middle, inverse Install and start ```bash npm install npm run start # open http://localhost:3000/ ``` .footnote[ [bit.do/dadc-codestate](http://bit.do/dadc-codestate) ] --- layout: false class: left, middle, inverse So, what's new? … .footnote[ [bit.do/dadc-codestate](http://bit.do/dadc-codestate) ] ??? - You can't have possibly seen this before, because I literally made this at midnight last night! - Then begin the demo --- layout: false class: center, middle, inverse .width100percent[  ] .footnote[ [bit.do/dadc-codestate](http://bit.do/dadc-codestate) ] --- layout: false class: left, middle, inverse Code: ```javascript const x = (state.x || 0) + args[0]; return { ...state, x }; ``` Arguments: ```javascript [1] ``` .footnote[ [bit.do/dadc-codestate](http://bit.do/dadc-codestate) ] --- layout: false class: left, middle, inverse ## Recap - Blockchain: immutable ledger - EVM: Distributed computing - Smart contracts: Programs deployed - ... then? ??? - So let's do a recap of where we are up to at this point: - We have the blockchain which can be thought of as a distributed immutable ledger storing state transitions - We have the EVM which can execute programs in a distributed computation manner, and stores state changes from of those programs on the blockchain - We have smart contracts which are these programs, deployed onto the blockchain - That's what we have so far, but now we have all of these programs, but none of them do anything, because you have no way to start them --- name: web3 class: center, middle, inverse ## Web3 --- layout: false class: left, middle, inverse .left-column[ ## Web3 ### What & Why ### How ] .right-column[ - Web.js - **Javascript** API to talk to Ethereum nodes - Uses the **JSON-RPC** specification - Connects to nodes via **websockets**: `ws://...` - Why is it needed? - Allow users to run mart contract functions - Need a way to do so from a web app .footnote[ - https://github.com/ethereum/web3.js/ - https://web3js.readthedocs.io/en/1.0/ ] ] ??? - That is where web3 comes - we use it to talk to smart contracts - Web.js is ... - Technically, you could roll your own client-side cryptography implementation, and JSON-RPC implementation, plus other things - but why would you? - web3.js provides a standardised API for various web developers to call smart contracts --- layout: false class: left, middle, inverse .left-column[ ## Web3 ### What & Why ### How ### Alt impls ] .right-column[ - Alternative web3 implementations - web3.js is not the only one - similar functionality in python, java, etc - Develop DApps that are not web applications - Less common .footnote[ - https://github.com/ethereum/web3.js/#similar-libraries-in-other-languages ] ] ??? - The terms web3 and web3.js are often used interchangeably - It is worth noting that the JS implementation, which is by far the most common one, is *not* the only one, and there are others targeting different programming languages - If you are developing a DApp where the client is not a web app, these will come in handy - For the most part though, DApps are web apps - In our sessions, we will focus on web3.js - as these alternate varieties are for more advanced users --- layout: false class: left, middle, inverse .left-column[ ## Web3 ### What & Why ### How ### Alt impls ### Provider/1 ] .right-column[ - How to get web3 in your browser? - Give in-browser JS access to you Ethereum private keys? .footnote[ ] ] ??? - web3.js is a library that has all the utility functions that a client needs in order to communicate with Ethereum nodes - but how do we get an instance into the browser? - one approach might be to load it up like any other JS library - while that works in the general sense, it is important to note that web3.js also needs access to your private keys - you cannot trust JS loaded in the browser with your private keys - any funds you have are likely to be stolen very quickly! --- layout: false class: left, middle, inverse .left-column[ ## Web3 ### What & Why ### How ### Alt impls ### Provider/2 ] .right-column[ - **inject** a web3 provider - done via a browser extension, e.g. MetaMask - contains your private keys - acts as both wallet and web3 provider - wallet: manage accounts and their keys - web3 provider: sign transactions, communicate with Ethereum nodes .footnote[ - https://github.com/MetaMask/metamask-extension ] ] ??? - instead we use a browser extension to do this - MetaMask is the most common one that is used - browser extensions can form the bridge between software that run locally on your device, vs software that runs in the browser - the browser extension "injects" a global variable named `web3` - in newer versions of MetaMask, it instead injects an `ethereum` global from which you have to obtain the `web3` variable asynchronously --- layout: false class: left, middle, inverse .left-column[ ## Web3 ### What & Why ### How ### Alt impls ### Provider/3 ] .right-column[  .footnote[ - https://github.com/MetaMask/metamask-extension ] ] ??? - compare to AJAX requests. Two differences - Need to "aprove" via browser extension - Takes **much** longer - in-browser JS has access to a `web3` variable - subsequent JS code can then access all of the utility functions - when a TX needs to be signed - this is either a transfer or a smart contract call - the in-browser JS execution hands over to the browser extension, which has a pop-up dialog that prompts the user with the details of what the DApp has asked it to do - if the user approves the transaction, the extension accesses the private key - without revealing it to the in-browser JS - and signs the TX - the signed TX data is returned to the in-browser JS, which at this point will send it to the Ethereum network --- name: make-what class: left, middle, inverse ## What can you make? - store information/ records - multi-signature schemes - manage agreements between users - expose functions for others to call ??? - these are generic things that ethereum smart contracts enable you to do - based on these, what sorts of DApps can you build? --- name: make-what class: left, middle, inverse ## What can you make? /2 .width50percent[  ] .footnote[ - https://nvlpubs.nist.gov/nistpubs/ir/2018/NIST.IR.8202.pdf ] ??? - NIST has made a handy flowchart that helps you to decide whether you really need a blockchain to build your app on - The bent of this is that there are many things being built on blockchain that could be feasibly built using other technologies instead - However, I see this a "why?" vs "why not?" sort of thing - That being said, it is worth while weighing the pros and cons of any technology when you're building something, and using Ethereum, or the blockchain, is no exception --- layout: false class: left, middle, inverse ## Next session - https://dappsdev.org/sessions#session-SG-S01-E03 - Read from Ethereum Book: - [Chapter 7](https://github.com/ethereumbook/ethereumbook/blob/develop/07smart-contracts-solidity.asciidoc) - Try Solidity: - [Crypto Zombies](https://cryptozombies.io/en/course/) - Install software - [MetaMask](https://metamask.io/) - [NodeJs](https://nodejs.org/) - Bring your DApp ideas! ??? - we have our next session scheduled for 2 Tuesdays from today - in our next session, we'll be looking properly at some code for the first time, and writing our first solidity - Crypto Zombies is a very gentle and fun intro to solidity - have a play with that if you can - Also, those of you who have read the couple of chapters ahead of this session: Thanks for doing so, and keeping with the spirit of a book club! - This week we have just one chapter, and that is chapter 7, which is about solidity - Finally, we would like to get all of you here to build some DApps together. In the kickoff session, we said to think of some ideas, and we'll help you to refine them. - If you've done just that, and already have some ideas for DApps you'd like to build with the club, pls come to the front - If you're shy, just stick around and talk about it with us, and those around you --- layout: false class: left, middle, inverse ## Thanks! Chainstack, Spartan, NBC'19, StartupToken, Blockchain&DApps --- layout: false class: center, middle, inverse  https://dappsdev.org/ ??? - be sure to check out the sessions page for updates, and join our discord - any other announcements?