[JSDC 2021] Blockchain 101 for Frontend Engs
0 likes100 views
The document introduces blockchain concepts tailored for frontend engineers, explaining its functionalities and underlying technologies such as peer-to-peer networks and cryptographic principles. It details how transactions occur on blockchain, the architecture of decentralized applications (dApps), and the roles of smart contracts. Additionally, it emphasizes the significance of frontend engineers in creating user-friendly interfaces for blockchain interactions.
![20
RPC, Remote Procedure Call
balanceOf(address)
0x70a08231b98ef4ca268c9c……db06bb5d45e689f2a360be
8
sha3
{
"jsonrpc":"2.0"
,
"method":"eth_call"
,
"params":
[
{
“to":"<contract address>"
,
"data":"0x70a08231<arg>
"
}
,
"latest
"
]
,
“id":
1
}
Post to RPC endpoint](https://image.slidesharecdn.com/jsdc2021-211102191314/85/JSDC-2021-Blockchain-101-for-Frontend-Engs-20-320.jpg)
[JSDC 2021] Blockchain 101 for Frontend Engs
- 1. Lucien Lee Blockchain 101 for Frontend Engs 前端工程師也可以懂的區塊鏈 2021
- 2. Lucien Lee・鹿尋 2 Tech Lead Dapps Fullstack Eng The first Taiwanese Defi CEO Co-founder The largest crowdsourcing fact-check platform in Asia PREVIOUS
- 3. What is Blockchain? 3 a semantic overloaded word
- 4. 4 We only discuss this today
- 5. So blockchain is a P2P Network that… 5 Public Permissionless Distributed Decentralized Immutable Unforgeable Data Storage Compute Engine +
- 6. You can believe the justification of computing on this P2P Network 6 Robust Public Trust(less) Machine
- 8. How to achieve that Unforgeable 8 Public-key cryptograph Digital Signature
- 9. How to achieve that Immutable 9 Block Hash Chain https://andersbrownworth.com/blockchain/
- 10. How to achieve that Decentralized 10 Kademlia Msg exchange consensus POW, POS, PBFT…
- 11. Example of ETH Tx POW version 11 1. A user init an TX 2. Input Tx Info in wallet, 3. Sign TX with private key 4. Broadcast “Signed Tx” to nearby ETH node Broadcast to ( nearby ) node 4 Creat a Tx Steve 0x123… 0x321… ether FROM Dave TO 12 AMOUNT 10 gwei GAS PRICE units 21,000 GAS LIMIT Welcome to Pelith! … INPUT DATA Tx Signature 3 Wallet Private Key Steve 2 1
- 12. 12 State Database SQL BALANCE ( ether ) ADDRESS 34 16 9 Steve Dave W 130 X 0.7 Y 0.02 Z 9 First Miner finding out the “nonce” Generate new block and get the ETH award Tx Pool Filtered by “Gas Price” Tx Gas Limit Gas Price W X 3.5 Y Z 0.7 Depoly Contract Call Contract I J 25 S D 12 21,000 21,000 21,000 500,000 120,000 21,000 11 10 10 8 8 7 Check Status 5 Join Wait List 6 Executed in EVM 8 ( ≈ 2.4 TB ) Node 7 New Block Calculating “nonce” for block <PoW> (Competing with other nodes) Total Gas Limit < 8,000,000 EVM Ether Balance Updated Smart Contract Deployed / Called 1 Block ≤ 8M Gas Blockchain New Block 8660586 Block 8660585 Block 8660584 5. Check the balance 6. Put Tx in the pool 7. Nodes keep broadcast and received new Tx 8. Nodes select more tips tx, calc and prepare to pack them into new block 9. Mine the block
- 13. 13 Node Node Node Node Node Node Node Node Node Node Broadcast with each other to update latest status 10 P2P Network 11 12 10. Broadcast the new block to the network 11. Nodes sync the new block, state and Tx pool 12. Loop
- 14. Smart Contract 14 Computing Engine Code is Rule Resistance to Censorship Verifiable Behavior
- 15. It’s like serverless Architecture Function-as-a-Service 15 Source: https://medium.com/@tanmayct/serverless-architecture-function-as-a-service-19e127b8c990
- 16. 16 Todo App as example const { AWS } = require('../connection'); const docClient = new AWS.DynamoDB.DocumentClient(); exports.getTodo = async function (event, context) { let response; let todoId; const table = "Todos"; if (event.body) { let body = JSON.parse(event.body); todoId = body.id; } const params = { TableName: table, Key: { "id": todoId, } }; try { const data = await docClient.get(params).promise(); response = { 'statusCode': 200, 'body': JSON.stringify({ message: data, }) } } catch (err) { response = { 'statusCode': 400, 'body': JSON.stringify({ message: err, }) } } return response; } getTodo
- 17. 17 Cost is based on actual execution time
- 18. 18 Cost is based on sum of opcode, storage usage, message call…
- 20. 20 RPC, Remote Procedure Call balanceOf(address) 0x70a08231b98ef4ca268c9c……db06bb5d45e689f2a360be 8 sha3 { "jsonrpc":"2.0" , "method":"eth_call" , "params": [ { “to":"<contract address>" , "data":"0x70a08231<arg> " } , "latest " ] , “id": 1 } Post to RPC endpoint
- 21. Why we need trust(less) computing Loot drop rate is a blackbox 21
- 22. How does JS get involved in blockchain? 22
- 23. Dapps The UI for users interacting with blockchain 23
- 24. Why Frontend Engs are so important? Put an elephant into refrigerator 24 Gas fee too expensive Lightweight Backend Move user-friendly logic to FE Isomorphic-like app solidity <-> JS/TS contract blockchain TypeChain, @symfoni/hardhat-react
- 26. What’s good scenario of blockchain? 26 Assets To incentivize validators, blockchain network native has money system