Web3.0前端工程师需要具备哪些技术?

简介: 最近,Web3.0的声音越来越大,越来越疯狂,对于我们的前端,我们需要具备哪些技术?

最近,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 = 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);
})

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不是一种技术,而是一种理念,我们期待它的到来。

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

相关文章
|
4月前
|
并行计算 前端开发 JavaScript
Web Worker:让前端飞起来的隐形引擎
在现代 Web 开发中,前端性能优化是一个至关重要的课题,尤其是对于计算密集型的应用,如图像处理、视频处理、大规模数据分析等任务。单线程的 JavaScript 引擎常常成为性能瓶颈,导致应用变得迟缓。Web Worker,作为一种强大的技术,使得前端能够在后台进行并行计算,从而实现高效的任务处理,不影响主线程的运行和用户的交互体验。
467 108
|
3月前
|
安全 Java API
Java Web 在线商城项目最新技术实操指南帮助开发者高效完成商城项目开发
本项目基于Spring Boot 3.2与Vue 3构建现代化在线商城,涵盖技术选型、核心功能实现、安全控制与容器化部署,助开发者掌握最新Java Web全栈开发实践。
430 1
|
8月前
|
前端开发 Java 物联网
智慧班牌源码,采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署
智慧班牌系统是一款基于信息化与物联网技术的校园管理工具,集成电子屏显示、人脸识别及数据交互功能,实现班级信息展示、智能考勤与家校互通。系统采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署与私有化定制。核心功能涵盖信息发布、考勤管理、教务处理及数据分析,助力校园文化建设与教学优化。其综合性和可扩展性有效打破数据孤岛,提升交互体验并降低管理成本,适用于日常教学、考试管理和应急场景,为智慧校园建设提供全面解决方案。
539 70
|
6月前
|
Web App开发 编解码 移动开发
零基础音视频入门:你所不知道的Web前端音视频知识
本文回顾了Web端音视频的发展历程,同时还介绍了视频的编码、帧率、比特率等概念,提到了Canvas作为视频播放的替代方案,以及FFmpeg在音视频处理中的重要作用等知识。
210 1
|
6月前
|
缓存 前端开发 应用服务中间件
Web端实时通信技术SSE在携程机票业务中的实践应用
本文介绍了携程机票前端基于Server-Sent Events(SSE)实现服务端推送的企业级全链路通用技术解决方案。文章深入探讨了 SSE 技术在应用过程中包括方案对比、技术选型、链路层优化以及实际效果等多维度的技术细节,为类似使用场景提供普适性参考和借鉴。该方案设计目标是实现通用性,适用于各种网络架构和业务场景。
208 1
|
7月前
|
缓存 前端开发 应用服务中间件
Web端实时通信技术SSE在携程机票业务中的实践应用
本文介绍了携程机票前端基于Server-Sent Events(SSE)实现服务端推送的企业级全链路通用技术解决方案。文章深入探讨了 SSE 技术在应用过程中包括方案对比、技术选型、链路层优化以及实际效果等多维度的技术细节,为类似使用场景提供普适性参考和借鉴。
292 7
|
10月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
302 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
285 6
|
前端开发 JavaScript 搜索推荐
前端懒加载:提升页面性能的关键技术
前端懒加载是一种优化网页加载速度的技术,通过延迟加载非首屏内容,减少初始加载时间,提高用户访问体验和页面性能。
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
462 5

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    595
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    247
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    231
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    178
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    291
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    417
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    179
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    118
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    195
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    266