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.

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

7. Ledger
7
Data Storage

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…

19. 19
Dapps Architecture

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

25. Script / Arbitrage
25

26. What’s good scenario of blockchain?
26
Assets
To incentivize validators, blockchain network native has money system

27. Contact
27
Email
lucien@pelith.com
We’re hiring engineers!
cakeresume.com/companies/pelith/jobs
Facebook
facebook.com/lucienlee.deer