Web3.0 is coming, is it front-end friendly?

Recently, the calls for web3.0 are really getting louder and louder, and they are getting more and more crazy. For our front-end, what technology do we need? Is it front-end friendly? The following article will let you talk about it, I hope it will be helpful to you!

First let me introduce how web3.0 is derived

Internet

Let’s talk about what the web is. In 1989, a technical team led by Tim Berners-Lee at CERN (European Institute for Particle Physics) submitted a new protocol for the Internet and a document system using the protocol. This system Named World Wide Web, referred to as WWW (World Wide Web), it is what we now know as the "Internet". Its purpose is to enable scientists around the world to use the Internet to exchange their work documents. The technologies it uses are mainly HTML, URI, URL, HTTP, etc., and can display web content in a static way. That is our

Web1.0

Generally speaking, Web1.0 refers to the Internet in the 1990s and early 21st century. To put it bluntly, it is the Internet composed of blogs, message boards, and early portals such as AOL and CompuServe. The well-known websites in China such as Sina, Sohu, and NetEase were products of that time. On Web1.0, static web pages are basically read passively, and web page construction protocols use HTTP, FTP, etc. In the case of Web1.0, web page content is read-only and static, similar to a magazine. It can only be viewed but cannot be modified or interacted with. Under Web1.0, users are only consumers of information (web pages) and cannot interact with them. Web1.0 also uses dial-up Internet access, with an average bandwidth of 50k.

In general, Web1.0 is read-only and decentralized.

Web2.0

And Web2.0 probably became prominent around 2005. The general meaning of Web2.0 is that users can create and publish their own content on web pages, actively participate in the Internet, and no longer simply passively read web pages. The final funds and control of the entire web page are still occupied by the owner of the web page. Social media such as Facebook, Twitter and YouTube are also products of this era. Of course, the proliferation of user-generated content in this way also creates a natural monopoly, which will also lead to several problems: 1. User data is centralized; 2. User data is not portable; 3. User data is sold

In short, Web2.0 is the coexistence of reading and writing

Web3.0

Web3.0 is a decentralized network that integrates power and data centralized into the hands of users rather than exclusive to one company. Distribute data to the network with decentralized blockchain technology. Web3.0 is a term that has been around for years, but has only started to gain popularity in the past year. With Web3, the network is decentralized, so no authority controls it, and decentralized applications (dapps) built on top of the network are open. The open nature of a decentralized network means that no one party can control the data or restrict access. Anyone can build and connect different dapps without permission from a central company.

The main features of Web3.0 include the following:

• Semantic Web - It is the key to Web3.0 and makes it easy for machines to process data.

• AI - AI is one of the main key factors affecting the popularity of Web3.0 technology. It enables machines to become smarter through large amounts of web data to meet user needs.

• 3D graphics - Web3.0 has surpassed the traditional Internet because of its three-dimensional technology, which provides a more realistic three-dimensional online world than 2D.

• Ubiquity – The concept of being present or everywhere at the same time, the increasing rise of mobile devices has made it easier for many people to access the Internet anytime and anywhere.

• Openness and interoperability, which refers to openness in terms of application programming interfaces, data formats, protocols and interoperability between devices and platforms.

• Global data repository, the ability to access information across programs and networks.

In short: Web3.0 is everything about reading, writing, and owning the Internet.

Introduction

For us front-end developers, what technologies should we master or what should we know? Simply put, web3 developers create decentralized full-stack applications that live on and interact with the blockchain. Let’s talk about it briefly below.

Let’s first understand what the professional terms are:

• Web3: It is the connection between the Ethereum blockchain and your smart contracts Smart Contracts.
• Ethereum Ethereum: A decentralized open source blockchain blockchain that allows users to interact with the network by creating smart contracts. Its native cryptocurrency is Ethereum. Ethereum is the second most valuable cryptocurrency in terms of market capitalization after Bitcoin. It was created in 2013 by Vitalik Buterin.
• Smart Contracts Smart Contracts: They are computer programs stored on the blockchain that run when predetermined conditions are met. Smart contracts are written in Solidity language.
• Decentralized: Data status is not collected by a central entity, platform platform or individual individual
• Blockchain: A blockchain network is a point-to-point connection in which information is stored in multiple Shared between devices, almost impossible to hack. It is a system of recording information in a way that makes it difficult or impossible to change the information saved on the network.
• Solidity: An object-oriented programming language for writing smart contracts. It is used to implement smart contracts on various blockchain platforms, most notably Ethereum. Solidity's syntax is similar to javascript. To understand Solidity, it is best to have a background in a programming language such as javascript. Jumping directly into Solidity is a bad idea
• Dapp: stands for Decentralized App. They are applications that run their backend code (smart contracts primarily written in Solidity) on a decentralized network or blockchain. Dapps can be built using front-end frameworks such as react, vue, or Angular.
• Bitcoin Bitcoin: The world’s first widely used cryptocurrency.
• Crypto: Also known as Cryptocurrency, cryptocurrency, a decentralized digital currency.
• NFT: Non-Fungible Token, a digital asset with ownership recorded on the chain.
• DAO: Decentralized Autonomous Organization, decentralized autonomous organization.
• Metaverse: a concept of a virtual world created by technological means.
• DeFi Decentralized Finance: Decentralized financial system.
• Token Token: It can be understood as the collective name for digital assets such as cryptocurrency and NFT.
• GameFi: Game DeFi, Chinese version of blockchain game, the financial system in the game can be mapped to reality through cryptocurrencies and NFTs.

After introducing the above, let’s talk about the classification of blockchain for developers. Mainly core blockchain development (core blockchain engineers are responsible for the architecture and security protocols of the blockchain system) and blockchain software development (these blockchain developers create Dapps using the design architecture provided by core blockchain developers ).

Start

Let’s get down to something practical. For our front-end development, we want to develop decentralized applications that reside and interact with the blockchain. You must use the web3.js and Ethers.js libraries.

web3.js

web3.js is a JavaScript API library. To make a DApp run on Ethereum, we can use the web3 objects provided by the web3.js library. web3.js communicates with local nodes through RPC calls, and it can be used with any Ethereum node that exposes the RPC layer. web3 contains the eth object - web3.eth (specifically for interacting with the Ethereum blockchain) and the shh object - web3.shh (for interacting with Whisper)

Add web3

Introducing web3 into your project is basically the same as our existing reference method

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

##Use

Then you need to create an instance of web3 and set up a provider. In order to ensure that you do not overwrite an existing provider, such as one built-in when using Mist, you need to first check whether the web3 instance already exists

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

Since this API is designed to interact with local RPC nodes, all The function uses synchronous HTTP requests by default. If you want to make an asynchronous request. Most functions allow passing an optional callback function following the parameter list to support asynchronous

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

The specific directory of the API can be

clicked to view

Ethers .js

Provides a small but complete JavaScript API library for the Ethereum blockchain and its ecosystem. It was originally used with ethers.io and has now been expanded into a more general library. The function is basically similar to web3.js.

Features are as follows:

• Keep the private key on the client, safe and trustworthy
• Supports imported and exported JSON wallet files (Geth, Parity and crowdsale)
• Create from any contract ABI JavaScript metaclass objects, including ABIv2 and human-readable ABI
• support connecting to Ethereum nodes via JSON-RPC, INFURA, Etherscan or MetaMask.
• The library is very small (compressed ~88kb; uncompressed 284kb)

Tools

Of course, in addition to the above, we will also use it Many tools to improve our development

• Truffle: Provides a development environment for compiling and testing smart contracts using the Ethereum Virtual Machine, used as build dependencies in the project
• Remix IDE: The perfect environment for writing and using smart contracts, we can use it to create, modify and execute smart contracts directly from the browser. It's more like an editor
• MetaMask: A Chrome extension that allows you to connect to the Ethereum blockchain network from your browser
• Ganache: Provides a local blockchain environment To test your smart contract

Build

We want to build a full stackDapp If you want to add a user interface to your project, react.js, vue.js or angular.js are good javascript front-end frameworks as they can be easily integrated with blockchain networks using ethers.js or web3.js. There are various platforms that allow you to create complete Dapps without writing code such as: Bunz, Dapp builder, Atra io, Bubble io

Conclusion

In general, Web3.0 is not a technology, but a concept. We front-end developers don’t need to panic. No matter how the technology develops, we will always use the front-end. We can use our react.js, vue.js or angular.js to build our own platform for our own developed Dapp applications, or we can use nodejs to complete it by using web3.js, the toolkit provided by Ethereum. The entire process of contract compilation, release, and contract method invocation.

(Learning video sharing: Web front-end introduction, Basic programming video)

The above is the detailed content of Web3.0 is coming, is it front-end friendly?. For more information, please follow other related articles on the PHP Chinese website!