原文： A guide to Web3 for Web2 frontend devs
作者：Dhaiwat Pandya
译者：0x_SimonLu

随着web3的大热，想要入局的你可能觉得无从下手。幸运的是，如果你是 web2 的前端开发者，那么你已经具备开始 web3 所需的大部分技能。我敢这么说是因为我原本就是一名 web2 前端开发，而去年我转向了 web3，现在在 web3 全职工作。

在这篇文章中，我会提供 web3 的概貌，以便你可以决定是否要进入 web3 。

哪些东西没有变？

web2 和 web3 APP之间保持不变的是它们都是从网站（或移动APP）开始。因此，如果你知道如何用 React 构建 UI，那么你也可以为web3 的APP构建 UI，没有任何变化，毕竟你只是在操纵 DOM。区别只是在于如何处理数据和身份验证。

哪些东西变了？

web2 和 web3 APP的处理数据和身份验证的方式发生了巨大的范式转变。

在 web3 世界中，你需要去处理钱包连接和签名消息，而不是管理密码和访问令牌（access tokens）。你的钱包是你在所有 dapp 中的身份和价值的存储库。

你将直接从区块链读取数据（通常是从智能合约中读取数据），而不是向某个地方的中心化 API 服务器发出网络请求。作为 web3 前端工程师，你将每天与智能合约进行交互。因此建议你对什么是智能合约、它是如何工作的、什么是智能合约的 ABI 等有深入的了解。

另一方面，web3 中的数据更改与 web2 截然不同。每次更改智能合约的数据时，都需要付费（gas）。因此，您需要格外小心在前端代码中调用智能合约。你需要确保与正确的智能合约交互并以正确的格式发送有效数据。智能合约和区块链上的任何东西本质上都是不可变的。一旦它在那里，它就在那里。如果你想改变它，通常要花钱，有时甚至是不可能的——这取决于你与之交互的智能合约的属性。

web3 中的数据更改也比 web2 需要更长的时间。 web2 中的 POST 请求通常需要几百毫秒。 web3 中的数据更改，或智能合约调用/交易，可能需要几分钟甚至永远。这是因为区块链网络上的节点必须将每笔交易添加到链上的新区块中。提交交易和它被添加到链中之间的延迟取决于你的用户愿意为它支付的gas（即成本）。由于数据更改的这种不确定性，你需要确保加载和错误状态是正确的。

你还将处理不同的网络。你需要确保你的用户和他们正在交互的智能合约在同一个网络上。

如果上面提到的这些让你倍感压力，请不要担心。一些很棒的开源库会为您抽象出所有这些东西。我最喜欢的是 wagmi 和 eth-hooks。（还有 web3-ui，我正在开发这个库！）

代码比较

现在让我们在 web2 和 web3 中的类似场景之间做一些直观的代码比较。

1. 验证

与 web2 中通过 cookie 进行的传统身份验证方法相比，在 web3 中，你通常会要求用户将他们的钱包连接到你的网站。虽然连接钱包的代码可能有点样板和棘手，但有许多库提供高级的抽象。

// web2
const res = await axios.post('https://some-api.com/auth', payload);
// then use cookies

// web3
import { useWallet } from '@web3-ui/core';

function App() {
  const { connectWallet, connection, connected } = useWallet();
  
  if (!connected) {
    return (
      <button onClick={connectWallet}>Connect wallet</button>
    )
  }
  
  return (
    <p>{connection.userAddress}</p>  
  )
}

2. 读取数据

你一定熟悉如何使用 fetch 或 axios 向 API 发出请求以读取数据。在 web3 中，你将首先使用合约的地址及其 ABI 创建智能合约的实例。 ethers 是最受欢迎的库之一，它可让你与区块链进行交互。

作为前端工程师，你应该记住的一件事是，当你尝试从智能合约中读取数据时（例如余额），你获得的值的类型将是 BigNumber 而不是number。所以你必须使用 toString() 等方法将返回的数据转换为字符串或数字。

// web2
const res = await axios.get('https://some-api.com');

// web3
const contract = new ethers.Contract('contract_address', ABI, provider); // create instance
const res = await contract.balanceOf('some_address'); // read from the contract
console.log(res.toString()); // convert from BigNumber to string

3. 写入数据

在 web3 中读取和写入数据都是通过调用智能合约上的函数来完成的。如下面代码所示，写入智能合约的语法与读取智能合约的语法没有什么不同。但是有两个地方需要注意：

要写入数据到智能合约，你还需要一个singer。只有provider是不够的。
你需要在返回的 promise 上调用 wait() 方法，以等待交易被挖矿/确认。 wait() 方法还返回一个promise，一旦交易被挖矿确认，该promise就会被resolve。

// web2
const res = await axios.post('https://some-api.com/', { name: 'John Doe' });

// web3
const contract = new ethers.Contract('contract_address', ABI, signer); // create instance
const res = await contract.setGreeting('Hi!');
await res.wait(); // wait for the transaction to be 'mined'

简略路线图

如果您想以前端开发人员的身份开始进入 web3，你可以参考下面这个简略的路线图。这个路线图的灵感来自我的个人经历和我看到的其他人所做的事情。

了解区块链和以太坊基础知识（只是非常基础的东西）
了解智能合约
了解 web3 中的钱包和钱包连接（provider, signer和不同的钱包提供者）

下面的播放列表将让你对上述三点有一个深入的了解：

https://www.youtube.com/playlist?list=PLJz1HruEnenCXH7KW7wBCEBnBLOVkiqIi

DeFi Simon

[译]写给 Web2 前端开发人员的 Web3 指南