Web3.js Tutorial

• Blockchain Council
• June 07, 2024

What are Web3 and JS?

Web3 and JS, in the context of web3.js, refer to concepts and technologies in the development of decentralized applications (DApps) on the Ethereum Blockchain.

Web3 represents the third generation of the internet, which focuses on decentralized networks and applications. It leverages blockchain technology to enable direct peer-to-peer interactions without centralized intermediaries.

Meanwhile, JavaScript (JS) is a popular programming language used extensively in web development to create interactive and dynamic user interfaces. It’s crucial for developing front-end components of websites and applications.

Web3.js is a JavaScript library that allows developers to interact with a local or remote Ethereum node using HTTP, IPC, or WebSocket. It is the bridge between the Ethereum Blockchain and a web browser or other JavaScript environments.

An Introduction to Web3.js Tutorial

Web3.js thrives as a robust library collection that facilitates interaction between programmers and the Ethereum blockchain ecosystem. Given that almost all web browsers natively support JavaScript, Web3.js represents a JavaScript language binding for Ethereum’s JSON RPC interface. The characteristic makes it a powerful resource for direct use in web technology. Both desktop apps built with Electron and Node.js frequently use Web3.js on the server side. 

Any Ethereum node that permits HTTP or IPC access can be used to establish a connection to the Ethereum network using Web3.js. The options can include a local node, a node maintained by the DApp provider, or public gateways, which provide free Ethereum access points.

Developing DApps over Ethereum blockchain involves two exclusive parameters:

• Smart contract development- involves writing codes using the Solidity programming language to deploy on the blockchain.
• Designing websites or apps that communicate with the DLT- involves writing smart contract code that reads and writes data to and from the blockchain.

Web3.js satisfies the second parameter of creating clients communicating with the Ethereum blockchain channel. The JavaScript library supports a variety of functions, including:

• Reading and writing data from smart contracts
• Retrieval of user accounts
• Sending Ether across digital accounts
• Creating smart contracts, etc.

One typical method of integrating a web application with Ethereum is using the Metamask browser plugin and Web3.js. Metamask is a popular in-browser Ethereum wallet that infuses a Web3 provider object into the network. Web3 provider is a data product that connects users to publicly available Ethereum nodes. Users can control their private keys and sign transactions across their web browsers using Metamask. An easy way to communicate with the Ethereum network is by utilizing Metamask in a web interface and Web3.js.

Further, we will talk about the working of Web3.js which will help the readers to develop an expert understanding of the topic. 

How does Web3.js Works?

Deployed on the blockchain, virtual assets, cryptocurrencies, programmable tokens, and smart contracts are vital components of DApps. However, transactions must be created on the blockchain to interact with these on-chain elements. A node must transmit the transaction to the core peer-to-peer network for an off-chain program to establish it on the blockchain. Web3.js helps developers to connect with these on-chain elements by building a link with Ethereum nodes. 

On Ethereum, transactions are received by a node via a JSON RPC interface. It stands for Remote Procedure Call protocol and is a textual encoding structure that allows processes to receive transactional data. The network nodes on Ethereum can exploit this interface in various ways depending on how they are configured and how the underlying software is implemented. IPC, WebSockets, and HTTP connections are popular alternatives. For instance, with the command line option “geth -rpc,” the Go Ethereum implementation (geth) may be set up to provide the RPC interface by a web3 expert.

A copy of all the information and code on the blockchain is kept on Ethereum’s peer-to-peer network of nodes. Similar to using jQuery with a JSON API, Web3.js receives and writes data to the network by sending JSON RPC queries to an Ethereum node.

Web3.js employs a provider and implements the request function responsible for calling an Ethereum RPC method to transform JavaScript code to json-rpc requests. The aforementioned specification is easily implemented via Web3.js. It is made accessible through web3.providers, HttpProvider, WebsocketProvider, and IpcProvider.

What are Web3.js packages?

There are five packages associated with web3.js. Web3 education on these packages is vital for understanding Web3.js well. So, let’s have a look:

1. web3.eth: communicates with Ethereum blockchain and smart contracts.
2. web3.bzz: communicates with decentralized file stores.
3. web3.shh: communicates with Whisper protocol for broadcasting.
4. web3.utils: facilitates core capacities such as converting strings to hex literals and Ether values to Wei.
5. web3.*.net: communicates with Ethereum nodes’ network properties like network ID or the peer count.

The Dependencies

Web3 development is in full swing, with firms investing hefty amounts in the R&D of innovative products related to the technology. Following this trend, Web3.js has also evolved. It is presently offered in two versions. Version 1.0 has almost entirely taken the place of the most recent stable version (0.3). Version 1.0 is, however, still considered to be in the beta stage. Users must first get a copy of Web3.js to use in a project. This can be done in a variety of ways. 

• Node Package Manager (NPM)

One of the most commonly used options is the NPM package manager. JavaScript programmers widely use NPM. It comes with Node.js. Downloading the source code from the project’s GitHub repository is also an option. A file named Web3.js must be included in the HTML code for it to be used on a web page.

• Web3.js Library

A Node.js application can use the library by including it with:

const Web3 = require(‘web3′);

A programmer must provide a Web3 provider before using Web3.js to connect to Ethereum. Naturally, this code depends on the specific node the programmer wants to connect to. An illustration of how the above-mentioned Metamask browser plugin could be utilized in a web application is as follows:

const web3 = new Web3(Web3.givenProvider, null, {});

A Web3 provider is injected into the browser through Metamask. The code above initializes Web3.js to utilize this provider and helps Web3.js to use it.

The address of the deployed smart contract and the Application Binary Interface (ABI) are needed to communicate with it. The ABI is a JSON object that serves as a description of the contract’s public interface.

The contract can be referred to in a contract object with the following code, presuming the ABI description is saved in a variable named “abi” and the contract address in a variable named “address”:

let contract = new web3.eth.Contract(abi, address);

Now, transactions can be sent to the contract using this object, as in:

contract.methods.transfer(toAddress, value).send({from: myAddress});

The variable “toAddress” in the code above is considered to represent the Ethereum address of the recipient, while the variable “myAddress” is assumed to hold the origin address. The individual Web3 provider being used must automatically sign this straightforward transaction.

Conclusion

Web3.js is garnering a lot of attention from blockchain enthusiasts. The library builds communication links between users and Ethereum nodes through the world’s second-largest crypto network. If you are planning to learn more about web3 technology, you can choose a web3 certification course offered by Blockchain Council. The courses are designed to offer subjective skills to the participants on the core concepts related to the sector. The web3 training helps to strengthen practical skills on the subject.