英文 | https://levelup.gitconnected.com/what-technologies-do-web3-0-front-end-engineers-need-to-have-25748238a75f

翻译 | web前端开发（web_qdkf）

最近，Web3.0的声音越来越大，越来越疯狂，对于我们的前端，我们需要具备哪些技术？

首先，说说Web3.0是怎么衍生出来的？

1.互联网

让我们谈谈什么是网络，在1989年，CERN（欧洲粒子物理研究所）Tim Berners-Lee领导的一个技术小组提交了一个新的互联网协议和使用该协议的文档系统，命名为万维网，简称WWW（World Wide Web )，也就是我们现在所说的互联网。

其目的是使世界各地的科学家能够使用 Internet 来交流他们的工作文件，它使用的技术主要有HTML、URI、URL、HTTP等，可以静态显示网页内容。

接着，我们就来到web1.0。

2.Web1.0

一般来说，Web 1.0 指的是 1990 年代和 2000 年代初期的互联网。

说白了就是由博客、留言板和早期的门户网站如AOL、CompuServe等组成的Internet。

在Web 1.0时代，我们只能读取信息，就好像我们看报纸一般，我们只能看，不能在网络里进行交互。

web1.0是静态网页是被动读取，它的网页构建协议使用HTTP、FTP等。

在Web1.0的情况下，网页内容是只读的、静态的，类似于杂志，只能阅读，不能修改，不能交互。

在 Web 1.0 的网络里，用户只是信息的消费者，无法与之交互。Web1.0也是拨号上网，平均宽带50k。

因为，web1.0无法满足交互需求，于是，就有了web2.0的出现。

3、Web2.0

Web2.0大概是在2005年前后，Web2.0的大意是用户可以在网页上创作和发布自己的内容，主动参与互联网，不再是简单地被动阅读网页。

整个网页的最终资金和控制权仍由网页所有者占据，像微信，抖音，Facebook、Twitter、YouTube等社交媒体也是这个时代的产物。

当然，这种用户生成内容的泛滥也造成了天然的垄断，这也导致了几个问题：

• 用户数据集中

• 用户数据不可移植

• 用户数据被出售

总而言之，Web2.0是读写并存的互联网时代。

因为数据的安全问题，大家想要更加安全且相对自由的网络空间，于是，就有了web3.0的理念，于是，大家开始憧憬web3.0。

4.Web3.0

那什么是web3.0？简单来讲，Web 3.0 是一个去中心化的网络，将权力和数据集中在用户手中，而不是某单一公司机构手中。

在网络上分发数据包含去中心化的区块链技术。Web 3.0 一词已经存在多年，直到最近一两年才流行起来。

使用 Web3.0，网络是去中心化的，因此，没有任何一个人或者任何一家机构可以控制它，并且构建在网络之上的去中心化应用程序（应用程序）是开放的。

去中心化网络的开放性意味着任何一方都无法控制数据或限制访问。任何人都可以在没有中央公司许可的情况下构建和连接不同的 dapp。

Web 3.0 的主要特点包括：

• 语义网- 它是 Web 3.0 的关键，使机器可以轻松处理数据。

• AI——AI是影响Web 3.0技术普及的主要关键因素之一。它通过海量的网络数据使机器变得更聪明，以满足用户的需求。

• 3D图形——Web3.0凭借其3D技术超越了传统互联网，提供了比2D更真实的3D网络世界。

• Ubiquity- 同时或无处不在的概念，移动设备的兴起增加了，许多人更容易随时随地访问互联网。

• 开放互通是指应用程序接口、数据格式、协议的开放，以及设备与平台之间的互通。

• 全球数据存储库是跨程序和网络访问信息的能力。

简而言之：Web 3.0 是读取、写入和拥有 Web 的一切。

5.我们需要学习掌握哪些技术呢？

那么，对于我们前端开发者来说，应该掌握哪些技术或者应该了解哪些？简而言之，web3.0开发人员创建去中心化的全栈应用程序，这些应用程序存在于区块链上并与之交互。

下面简单说一下，不过，在开始之前，我们先来了解一下相关的一些专业术语：

• Web3.0：它是以太坊区块链和您的智能合约之间的连接。

• 以太坊：一种去中心化的开源区块链，允许用户通过创建智能合约与网络进行交互。它的原生加密货币是以太币。就市值而言，以太坊是仅次于比特币的第二大最有价值的加密货币。它由 Vitalik Buterin 于 2013 年创建。

• 智能合约：它们是存储在区块链上的计算机程序，在满足预定条件时运行，智能合约是用 Solidity 语言编写的。

• 去中心化：数据状态不被中央实体和平台、平台或个体个人收集。

• 区块链：区块链网络是一种点对点连接，其中信息在多个设备之间共享，因此几乎不可能被黑客入侵。它是一种难以或不可能更改存储在其上的信息的方式记录信息的系统网络。

• Solidity：一种用于编写智能合约的面向对象的编程语言。它用于在各种区块链平台上实施智能合约，最著名的是以太坊。Solidity 的语法类似于 JavaScript。要了解Solidity，最好有JavaScript等编程语言的背景，直接进入 Solidity 不是一个好主意。

• Dapp：代表去中心化应用程序。它们是在去中心化网络或区块链上运行后端代码（主要用 Solidity 编写的智能合约）的应用程序。可以使用 React、Vue 或 Angular 等前端框架构建 Dapp。

• 比特币：世界上第一个广泛使用的加密货币。

• Crypto：又称Cryptocurrency，加密货币，是一种去中心化的数字货币。

• NFT：Non-Fungible Token，一种所有权记录在链上的数字资产。

• DAO：Decentralized Autonomous Organization，去中心化的自治组织。

• Metaverse：通过技术手段创建的虚拟世界的概念。

• DeFi Decentralized Finance：去中心化金融系统。

• Token：一个令牌，可以理解为加密货币、NFT等数字资产的统称，

• GameFi：Game+DeFi，中文链游，游戏中的金融系统可以通过加密货币和NFT映射到现实中。

简单介绍完以上这些专业术语后，我们再来说说区块链对于开发者也是如何分类的。主要是核心区块链开发（核心区块链工程师负责区块链系统的架构和安全协议）和区块链软件开发（这些区块链开发者使用核心区块链开发者提供的设计架构来创建Dapps）。

6.开始学习

让我们进入正题。对于我们的前端开发，我们想要开发驻留在区块链上并与区块链交互的去中心化应用程序，我们必须使用 web3.js 和 Ethers.js 库。

6.1 Web3.js

web3.js 是一个 JavaScript API 库。要让 DApp 在以太坊上运行，我们可以使用 web3.js 库提供的 web3 对象。web3.js 通过 RPC 调用与本地节点通信，它可以与任何公开 RPC 层的以太坊节点一起使用。web3 包含 eth 对象 - web3.eth（用于与以太坊区块链交互）和 shh 对象 - web3.shh（用于与 Whisper 交互）

6.2 添加web3

web3引入到你的项目中和我们现有的参考方法是一样的

• npm: npm 安装 web3

• Bower: bower 安装 web3

• Metor: meteor  添加 Ethereum:web3

• Vanilla：dist./web3.min.js

6.3 使用

然后，你需要创建一个 web3 的实例并设置一个提供者。确保不覆盖已有的provider，比如使用Mist时，它是内置的，需要检查web3实例是否已经存在。

if(!web3) {web3 =newWeb3(web3.currentProvider);}else{web3 =newWeb3(newWeb3.providers.HttpProvider("http://localhost:8545"));}

由于此 API 旨在与本地 RPC 节点进行交互，因此默认情况下所有功能都使用同步 HTTP 请求。如果你想发出一个异步请求。大多数函数允许在参数列表之后传递一个可选的回调函数以支持异步。

web3.eth.getBlock(48,function(error, result){if(!error)console.log(result)elseconsole.error(error);})

6.4 Ethers.js

为以太坊区块链及其生态系统提供一个小而完整的 JavaScript API 库。最初与 ethers.io 一起使用，它已扩展为更通用的库，功能类似于web3.js。

特点如下：

• 将私钥保存在客户端，安全可靠

• JSON钱包文件的导入导出（Geth、Parity和crowd、sale）

• 从任何合约 ABI 创建 JavaScript 元类对象，包括 ABIv2 和可读 ABI

• 支持通过 JSON-RPC、INFURA、Etherscan 或 MetaMask 连接到以太坊节点。

• 该库非常小（~88kb 压缩；284kb 未压缩）

6.5 工具

当然，除了上面这些，我们还会用到很多工具来完善我们的开发工作。

• Truffle：提供使用以太坊虚拟机编译和测试智能合约的开发环境，在项目中用作构建依赖。

• Remix IDE：编写和使用智能合约的完美环境，我们可以直接从浏览器创建、修改和执行智能合约，它更像是一个编辑器。

• MetaMask：一个 Chrome 扩展程序，允许您从浏览器连接到以太坊区块链网络。

• Ganache：提供原生区块链环境来测试你的智能合约

7.构建

我们想要构建一个全栈 Dapp 如果你想为你的项目添加 UI，react.js、vue.js 或 angular.js 是很好的 javascript 前端框架，因为它们可以使用 ethers.js 或 web3.js 网络轻松与区块链集成 一体化。多个平台让您无需编写代码即可创建完整的 Dapp，例如 Bunz、Dapp builder、Atra io、Bubble io

8.写在最后

看到这里，我想你也会觉得web3.0的强大，但是，我更想说的是，Web3.0不是一种技术，而是一种理念，我们期待它的到来。

最后，感谢你的阅读，如果你想获取更多技术类文章，请记得关注我，如果你觉得今天内容有用的话，请点赞我。

学习更多技能

请点击下方公众号