Recently the clamor for web3.0 has been really loud and crazy. For us on the front end, what skills do we need to have?
Let’s start by describing how web3.0 was derived
Let’s talk about what is the web, in 1989, by the CERN (European Institute of Particle Physics) in Tim Berners-Lee led a technical group submitted a new protocol for the Internet and a document system using the protocol, the system is named World Wide Web, abbreviated as WWW (World Wide Web), which is now known as the “Internet”. “The Internet”, which aims to enable scientists around the world to use the Internet to exchange documents about their work. It uses technologies such as HTML, URIs, URLs, HTTP, etc., and can display web content in a static manner. That is, we
Web 1.0
Generally speaking, Web 1.0 refers to the Internet of the 1990s and early 2000s. To put it bluntly, it was the Internet of blogs, message boards, and early portals such as AOL and CompuServe, which we know as Sina, Sohu, and NetEase at home. In Web 1.0, we were basically passive readers of static web pages, and web page construction protocols such as HTTP and FTP were used. In the case of Web1.0, the content of the web page is read-only, static, similar to magazines, which can only be viewed but not modified, and cannot be interacted with. Under Web 1.0, users are only consumers of information (web pages) and cannot interact with it. web 1.0 is also dial-up, with an average broadband of 50k.
In a nutshell, Web 1.0 is read-only and decentralized.
Web 2.0
And Web 2.0 came to prominence around 2005. Web 2.0 roughly means that users can create and publish their own content on web pages and actively participate in the Internet, instead of just passively reading web pages. The entire webpage is still ultimately funded and controlled by the owner of the webpage. Social media such as Facebook, Twitter and YouTube for example are also products of this era. Of course the proliferation of user-generated content in this way also creates a natural monopoly, which can lead to several problems: 1. user data is centralized; 2. user data is not portable; 3. user data is for sale
In short, Web 2.0 is about reading and writing.
Web 3.0
Web 3.0 is a decentralized web, by centralizing power and data into the hands of users, rather than being exclusive to one company. Distributing data across the web incorporates decentralized blockchain technology.The term Web3.0 has been around for years and has only become popular in the past year. With Web3, the web is decentralized so there is no authority to control it, and the decentralized applications (dapps) built on top of the web are open. The openness of the decentralized web means that no party can control the data or restrict access. Anyone can build and connect different dapps without the permission of a centralized company.
Key features of Web 3.0 include the following:
Semantic Web – It is the key to Web 3.0, making it easy for machines to process data.
AI – AI is one of the major key factors influencing the popularity of Web 3.0 technologies. It enables machines to become smarter through large amounts of Web data in order to fulfill the needs of users.
3D Graphics – Web 3.0 has transcended the traditional Internet because of its three-dimensional technology, which provides a more realistic three-dimensional online world than 2D.
Ubiquitous – the concept of simultaneous presence or ubiquity, the increasing rise of mobile devices, and the increased ease with which many people can access the Internet anytime, 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, a capability to access information across programs and networks.
In short: Web 3.0 is all about reading, writing, and owning the web.
For us front-end developers, what are the technologies we should master or what should we know? Simply put, web3 developers create decentralized full-stack applications that exist and interact with the blockchain. Here’s a quick rundown.
Let’s first understand what the terminology is:
Web3: It is the connection between the Ethereum blockchain and your Smart Contracts Smart Contracts.
Ether Ethereum: a decentralized open source blockchain blockchain that allows users to interact with the network by creating smart contracts creating smart contracts. Its native cryptocurrency is Ether. In terms of market capitalization, Ether is the second most valuable cryptocurrency after Bitcoin. It was created by Vitalik Buterin in 2013.
Smart Contracts : They are computer programs stored on the blockchain that run when predetermined conditions are met. Smart contracts are written in the Solidity language.
Decentralized: Data state is not collected by a central entity, platform or individual.
Blockchain: A blockchain network is a peer-to-peer connection in which information is shared between multiple devices and is virtually impossible to hack. It is a system of recording information in such a way that it makes it difficult or impossible to alter the information stored on the network.
Solidity: An object-oriented programming language for writing smart contracts. It is used to implement smart contracts on a variety of blockchain platforms, most notably Ether.Solidity’s syntax is similar to javascript, and it is best to have a background in a programming language such as javascript to understand Solidity. Jumping straight into Solidity is a bad idea!
Dapp: stands for Decentralized App. They are applications that run their backend code (mainly smart contracts 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 that is recorded on the chain and has a title.
DAO: Decentralized Autonomous Organization.
Metaverse metaverse: a conception of a virtual world created by technological means.
DeFi Decentralized Finance: decentralized financial system.
Token: can be understood as a collective term for digital assets such as cryptocurrencies and NFTs.
GameFi: Game + DeFi, or Chain Tour in Chinese, is a game in which the financial system can be mapped to reality through cryptocurrencies and NFTs.
After the above, let’s talk about the blockchain for developers are also categorized. The main ones are core blockchain developers (core blockchain engineers are responsible for the architecture and security protocols of the blockchain system) and blockchain software developers (these blockchain developers create Dapps using the design architecture provided by the core blockchain developers).
Let’s get real, for us front-end developers, we want to develop decentralized applications that reside and interact with the blockchain, we have to use the web3.js and Ethers.js libraries.
web3.js
web3.js is a JavaScript API library. To make the DApp run on Ether, we can use the web3 objects provided by the web3.js library. web3.js communicates with the local node via RPC calls, and it can be used on any Ether node that exposes an RPC layer. web3 contains the eth object – web3.eth (specialized for interacting with the Ether blockchain) and the shh object – web3.shh ( for interacting with Whisper)
Add web3
Introducing web3 into your project is actually basically the same as our existing references
- npm: npm install web3
- bower: bower install web3
- metor: meteor add ethereum:web3
- vanilla: dist./web3.min.js
Then you need to create an instance of web3 and set up a provider. to make sure you don’t override an existing provider, such as the one built-in when using Mist, you need to check if the web3 instance already exists first
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 functions use synchronous HTTP requests by default. If you want to initiate an asynchronous request. Most functions allow passing an optional callback function followed by a list of parameters to support asynchrony.
web3.eth.getBlock(48, function(error, result){
if(!error)
console.log(result)
else
console.error(error);
})
Ethers.js
A small but complete JavaScript API library for the ethereum blockchain and its ecosystem It started out with ethers.io and has been expanded into a more general library. The functionality is basically similar to web3.js.
The features are as follows:
- Save the private key in the client, safe and reliable
Support for importing and exporting JSON wallet files (Geth, Parity and crowdsale)
Create JavaScript metaclass objects from any contract ABI, including ABIv2 and readable ABIs.
Support for connecting to Ethernet nodes via JSON-RPC, INFURA, Etherscan or MetaMask.
Library Very small (compressed ~88kb; uncompressed 284kb)
Of course, in addition to the above, we will also use many tools to improve our development
Truffle: Provides a development environment for compiling and testing smart contracts using the Ethernet Virtual Machine, which is used as a build dependency in the project.
Remix IDE: The perfect environment for writing and working with 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 lets you connect to the EtherChannel blockchain network from your browser
Ganache: provides a local blockchain environment to test your smart contracts
We want to build a full stack Dapp If you want to add a user interface to your project, react.js, vue.js or angular.js are great javascript front-end frameworks as they can be easily integrated with the blockchain network using ethers.js or web3.js. There are several platforms that allow you to create complete
Overall, Web 3.0 is not a technology, but a concept. We front-end developers don’t need to panic, no matter what the technology develops into, we will use the front-end. We can use our react.js, vue.js or angular.js to develop our own Dapp application to build our own platform, you can also use nodejs by using web3.js, the toolkit provided by the EtherCenter, to complete the contract compilation, release, contract method invocation of a whole process.
