目录
互联网
Web3.0
介绍
开始
web3.js
添加web3
使用
Ethers.js
工具
构建
结论
首页 web前端 前端问答 Web3.0来了!它对前端很友好吗?

Web3.0来了!它对前端很友好吗?

Nov 09, 2022 pm 08:44 PM
web前端 前端 web

Web3.0来了!它对前端很友好吗?

最近 web3.0 的呼声真的是越来越高,也越来越疯狂。对于我们前端来说,我们需要具备什么技术呢?(学习视频分享:web前端

首先先介绍一下 web3.0 是如何衍生的

互联网

我们先聊一下啥是web,在1989 年,由CERN(欧洲粒子物理研究所)中 Tim Berners-Lee 领导的技术小组提交了一个针对互联网的新协议和一个使用该协议的文档系统,该系统命名为 World Wide Web,简称 WWW(万维网),就是我们现在熟知的“互联网”,它的目的在于使全球的科学家能够利用互联网来交流自己的工作文档。它采用的技术主要是 HTML、URI 、URL、HTTP 等,可以通过静态的方式展示网页内容。也就是我们

Web1.0

通常来说,Web1.0 指的是20世纪90年代和21世纪初的互联网。说白了,就是由博客、留言板以及AOL和CompuServe等早期门户网站组成的互联网,国内咱们所熟知得就是新浪、搜狐网易等网站就是当时的产物。在 Web1.0 上基本上都是被动地阅读静态网页,网页构建协议都是使用 HTTP、FTP 等。在Web1.0 的情况下,网页内容是只读的、静态的,类似于杂志,只能看不能修改、不能互动。在Web1.0下,用户只是信息(网页)的消费者,不能与之交互。Web1.0也是拨号上网,平均宽带50k。

总的来说,Web1.0 是只读、去中心化的。

Web2.0

而 Web2.0 大概在2005年左右凸显出来。 Web2.0 大概的含义就是用户可以在网页上创建和发布自己的内容,主动参与到互联网中,不再是单纯地被动阅读网页。整个网页最终的资金和控制权还是被网页的拥有者所占据。比如 Facebook、Twitter和YouTube等社交媒体也是这个时代的产物。当然通过这种方式让用户生成内容的激增也造成了自然垄断,这样也会导致几个问题的产生:1.用户数据是中心化的;2. 用户数据不可移植;3. 用户数据被出售

总而言之,Web2.0 是读写并存的

Web3.0

Web3.0 是一个去中心化的网络,通过将权力和数据集中到用户手中,而不是某个公司所独有。将数据分布到网络上其中内含去中心化的区块链技术。Web3.0 这个词语已存在多年了,只是在过去一年才开始流行起来。使用 Web3,网络是去中心化的,因此没有权威机构对其进行控制,并且构建在网络之上的去中心化应用程序(dapps)是开放的。去中心化网络的开放性意味着任何一方都无法控制数据或限制访问。任何人都可以在未经中央公司许可的情况下构建和连接不同的 dapp。

Web3.0 的主要特点包括如下几点:

  • 语义 Web——它是 Web3.0 的关键,使机器易于处理数据。

  • AI——AI是影响 Web3.0 技术流行的主要关键因素之一。它使机器通过大量的Web数据变得更加智能,以满足用户的需求。

  • 3D图形——Web3.0 已经超越了传统的互联网,因为它的三维技术,它提供了一个比2D更现实的三维在线世界。

  • 无处不在——同时存在或无处不在的概念,移动设备的兴起日益增加,许多人更容易随时随地访问互联网。

  • 开放性和互操作性,这指的是在应用程序编程接口、数据格式、协议和设备与平台之间的互操作性方面的开放性。

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

总之:Web3.0 是读、写、拥有网络的一切。

介绍

对于我们前端开发者来说,我们应该掌握哪些技术或者应该了解什么呢?简单来说,web3 开发人员创建了分散的全栈应用程序,这些应用程序存在于区块链上并与之交互。下面简单得说一下。

我们先了解一下专业术语有哪些:

  • Web3:它是以太坊区块链 Ethereum blockchain 和你的智能合约 Smart Contracts 之间的连接。
  • 以太坊 Ethereum:一个去中心化的开源区块链 blockchain,允许用户通过创建智能合约 creating smart contracts 与网络进行交互。它的原生加密货币是以太币。就市值而言,以太币是仅次于比特币的第二大最有价值的加密货币。它由 Vitalik Buterin 于 2013 年创建。
  • 智能合约 Smart Contracts :它们是存储在区块链上的计算机程序 computer programs ,在满足预定条件时运行。智能合约是用 Solidity 语言编写的。
  • 去中心化 Decentralized :数据状态不由中央实体 central entity、平台 platform 或个人 individual 收集
  • 区块链:区块链网络是一种点对点连接,其中信息在多个设备之间共享,几乎不可能被黑客入侵。它是一种记录信息的系统,其方式使得很难或不可能更改保存在网络上的信息。
  • Solidity:一种用于编写智能合约 writing smart contracts 的面向对象 object-oriented 的编程语言。它用于在各种区块链平台上实施智能合约,最著名的是以太坊。Solidity 的语法类似于 javascript。要了解 Solidity,最好有 javascript 等编程语言的背景。直接跳入 Solidity 是一个坏主意
  • Dapp:代表去中心化应用程序 Decentralized App 。它们是在去中心化网络或区块链上运行其后端代码(主要用 Solidity 编写的智能合约)的应用程序。可以使用 react、vue 或 Angular 等前端框架构建 Dapps。
  • Bitcoin 比特币:世界上第一个被广泛应用的加密货币。
  • Crypto: 又称 Cryptocurrency,加密货币,一种去中心化的数字货币。
  • NFT: Non-Fungible Token,一种在链上被记录的、有所有权的数字资产。
  • DAO: Decentralized Autonomous Organization,去中心化的自治组织。
  • Metaverse元宇宙:一种由科技手段创造的虚拟世界的构想。
  • DeFi Decentralized Finance:去中心化金融系统。
  • Token 代币:可以理解为加密货币、NFT 等数字资产的统称。
  • GameFi: Game + DeFi,中文说法链游,游戏中的金融系统可通过加密货币和 NFT 映射到现实。

介绍完以上这些,我们再聊下区块链对于开发人员也是分类得。主要是核心区块链开发(核心区块链工程师负责区块链系统的架构和安全协议)和区块链软件开发(这些区块链开发人员利用核心区块链开发人员提供的设计架构创建 Dapp)。

开始

下面我们来点实在得,对于我们前端开发,我们想要开发驻留并与区块链交互的去中心化应用程序,就必须使用 web3.js 和 Ethers.js 库。

web3.js

web3.js 是一个JavaScript API库。要使 DApp 在以太坊上运行,我们可以使用web3.js库提供的web3对象。web3.js 通过RPC调用与本地节点通信,它可以用于任何暴露了RPC层的以太坊节点。web3 包含 eth 对象 - web3.eth(专门与以太坊区块链交互)和 shh 对象 - web3.shh(用于与 Whisper 交互)

添加web3

web3 引入到你的工程中,其实跟我们现有的引用方式基本一致

  • npm: npm install web3
  • bower: bower install web3
  • metor: meteor add ethereum:web3
  • vanilla: dist./web3.min.js

使用

然后你需要创建一个web3的实例,设置一个provider。为了保证你不会覆盖一个已有的provider,比如使用Mist时有内置,需要先检查是否web3实例已存在

if (!web3) {
  web3 = new Web3(web3.currentProvider);
} else {
  web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
}
登录后复制

由于这套API被设计来与本地的RPC结点交互,所有函数默认使用同步的HTTP的请求。如果你想发起一个异步的请求。大多数函数允许传一个跟在参数列表后的可选的回调函数来支持异步

web3.eth.getBlock(48, function(error, result){
  if(!error)
      console.log(result)
  else
      console.error(error);
})
登录后复制

API的具体目录可以点击查看

Ethers.js

为以太坊区块链及其生态系统提供一个小而完整的 JavaScript API 库 它最初是与 ethers.io 一起使用,现在已经扩展为更通用的库。功能上基本和web3.js差不多。

特点如下:

  • 将私钥保存在客户端,安全 可信赖
  • 可支持导入和导出的 JSON钱包文件 (Geth,Parity和crowdsale)
  • 从任何合同ABI创建JavaScript 元类对象,包括 ABIv2 和 可读的 ABI
  • 支持通过 JSON-RPC,INFURA , Etherscan 或 MetaMask 连接到以太坊节点。
  • 库 非常小 (压缩~88kb;未压缩284kb)

工具

当然除了上面这些,我们也会用到很多工具去完善我们的开发

  • Truffle: 提供了一个使用以太坊虚拟机编译和测试智能合约的开发环境,用作项目中的构建依赖项
  • Remix IDE: 编写和使用智能合约的完美环境,我们可以使用它直接从浏览器创建、修改和执行智能合约。它更像是一个编辑器
  • MetaMask: 一个 Chrome 扩展程序,可让您从浏览器连接到以太坊区块链网络
  • Ganache: 提供了一个本地区块链环境来测试您的智能合约

构建

我们想构建一个全栈 Dapp 如果您想为项目添加用户界面,react.js、vue.js 或 angular.js 是很好的 javascript 前端框架,因为它们可以使用 ethers.js 或 web3.js 轻松与区块链网络集成。有多种平台可让您在不编写代码的情况下创建完整的 Dapp比如:BunzDapp builderAtra ioBubble io

结论

总的来说,Web3.0 不是一种技术,而是一个概念。我们前端开发者也不用很慌张,不管技术发展成什么样子,都会用到前端。我们可以利用我们 react.js、vue.js 或 angular.js 去为我们自己开发的 Dapp 应用去搭建属于我们自己的平台,也可以利用 nodejs 通过使用web3.js这个以太坊提供的工具包,来完成合约的编译,发布,合约方法调用的一整个流程。

更多编程相关知识,请访问:编程教学!!

以上是Web3.0来了!它对前端很友好吗?的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

PHP与Vue:完美搭档的前端开发利器 PHP与Vue:完美搭档的前端开发利器 Mar 16, 2024 pm 12:09 PM

PHP与Vue:完美搭档的前端开发利器在当今互联网高速发展的时代,前端开发变得愈发重要。随着用户对网站和应用的体验要求越来越高,前端开发人员需要使用更加高效和灵活的工具来创建响应式和交互式的界面。PHP和Vue.js作为前端开发领域的两个重要技术,搭配起来可以称得上是完美的利器。本文将探讨PHP和Vue的结合,以及详细的代码示例,帮助读者更好地理解和应用这两

C#开发经验分享:前端与后端协同开发技巧 C#开发经验分享:前端与后端协同开发技巧 Nov 23, 2023 am 10:13 AM

作为一名C#开发者,我们的开发工作通常包括前端和后端的开发,而随着技术的发展和项目的复杂性提高,前端与后端协同开发也变得越来越重要和复杂。本文将分享一些前端与后端协同开发的技巧,以帮助C#开发者更高效地完成开发工作。确定好接口规范前后端的协同开发离不开API接口的交互。要保证前后端协同开发顺利进行,最重要的是定义好接口规范。接口规范涉及到接口的命

web标准是什么东西 web标准是什么东西 Oct 18, 2023 pm 05:24 PM

Web标准是一组由W3C和其他相关组织制定的规范和指南,它包括HTML、CSS、JavaScript、DOM、Web可访问性和性能优化等方面的标准化,通过遵循这些标准,可以提高页面的兼容性、可访问性、可维护性和性能。Web标准的目标是使Web内容能够在不同的平台、浏览器和设备上一致地展示和交互,提供更好的用户体验和开发效率。

如何从驾驶舱Web用户界面启用管理访问 如何从驾驶舱Web用户界面启用管理访问 Mar 20, 2024 pm 06:56 PM

Cockpit是一个面向Linux服务器的基于Web的图形界面。它主要是为了使新用户/专家用户更容易管理Linux服务器。在本文中,我们将讨论Cockpit访问模式以及如何从CockpitWebUI切换Cockpit的管理访问。内容主题:驾驶舱进入模式查找当前驾驶舱访问模式从CockpitWebUI启用Cockpit的管理访问从CockpitWebUI禁用Cockpit的管理访问结论驾驶舱进入模式驾驶舱有两种访问模式:受限访问:这是驾驶舱的默认访问模式。在这种访问模式下,您不能从驾驶舱Web用户

Django是前端还是后端?一探究竟! Django是前端还是后端?一探究竟! Jan 19, 2024 am 08:37 AM

Django是一个Python编写的web应用框架,它强调快速开发和干净方法。尽管Django是一个web框架,但是要回答Django是前端还是后端这个问题,需要深入理解前后端的概念。前端是指用户直接和交互的界面,后端是指服务器端的程序,他们通过HTTP协议进行数据的交互。在前端和后端分离的情况下,前后端程序可以独立开发,分别实现业务逻辑和交互效果,数据的交

前端面试官常问的问题 前端面试官常问的问题 Mar 19, 2024 pm 02:24 PM

在前端开发面试中,常见问题涵盖广泛,包括HTML/CSS基础、JavaScript基础、框架和库、项目经验、算法和数据结构、性能优化、跨域请求、前端工程化、设计模式以及新技术和趋势。面试官的问题旨在评估候选人的技术技能、项目经验以及对行业趋势的理解。因此,应试者应充分准备这些方面,以展现自己的能力和专业知识。

Go语言前端技术探秘:前端开发新视野 Go语言前端技术探秘:前端开发新视野 Mar 28, 2024 pm 01:06 PM

Go语言作为一种快速、高效的编程语言,在后端开发领域广受欢迎。然而,很少有人将Go语言与前端开发联系起来。事实上,使用Go语言进行前端开发不仅可以提高效率,还能为开发者带来全新的视野。本文将探讨使用Go语言进行前端开发的可能性,并提供具体的代码示例,帮助读者更好地了解这一领域。在传统的前端开发中,通常会使用JavaScript、HTML和CSS来构建用户界面

Django:前端和后端开发都能搞定的神奇框架! Django:前端和后端开发都能搞定的神奇框架! Jan 19, 2024 am 08:52 AM

Django:前端和后端开发都能搞定的神奇框架!Django是一个高效、可扩展的Web应用程序框架。它能够支持多种Web开发模式,包括MVC和MTV,可以轻松地开发出高质量的Web应用程序。Django不仅支持后端开发,还能够快速构建出前端的界面,通过模板语言,实现灵活的视图展示。Django把前端开发和后端开发融合成了一种无缝的整合,让开发人员不必专门学习

See all articles