Web3.js explained!

Have you ever wanted to interact with Ethereum nodes via HTTP or WebSocket? Well with the web3.js library you can! 🤯

In this guide we will go over what Web3.js is, what is it used for, how it is used and other related details so without further delay let's jump right in!🚀

Figure 1: Logos of Solidity,Web3.js and Ganache respectively

Web3.js Overview

There are two requirements to be met in the process of developing decentralized applications:

Smart contract development
Interacting with smart contracts using a JavaScript client(which is where web3.js is mainly used)

Web3.js fits the second part of the requirements listed above. It is a collection of libraries that enable interactions with Ethereum nodes. Some of these interactions include reading, writing and creating smart contracts, transferring Ether between accounts, retrieving user accounts. So basically, Web3.js is just a way to interact with smart contracts.

Web3.js in Decentralized Application Architecture

Here is an informative diagram showing the architecture of a decentralized application and where web3.js fits in it:

Figure 2: Architecture of a decentralized application

As you see in the above diagram, web3.js is a part of the frontend application and is contained inside it. The frontend application could be built using any popular frontend framework such as Vue.js, React.js, Angular.js, Svelte.js, etc...

The Ethereum node shown in the application could most likely be a Ganache instance, if we are talking about development environments. Ganache is a personal blockchain for rapid Ethereum distributed application development(click here to learn more about Ganache from their official site)

The smart contract instances shown in the diagram are most likely written in Solidity because of its ability to provide an ABI(application binary interface) and due to it supporting complex data types and member variables. In case you didn't know, Solidity is an object-oriented programming language specifically designed for writing smart contracts(click here to visit its official documentation page)

Web3.js In Action

Now let's see a simple demonstration of how web3.js works!

To get a smart contract using web3.js we need an ABI. An ABI is a type of JSON file that specifies what a smart contract can do, such as all the functions and variables it has. Here is an example of an ABI:

[{
	"constant": true,
	"inputs": [],
	"name": "mintingFinished",
	"outputs": [{
		"name": "",
		"type": "bool"
	}],
	"payable": false,
	"type": "function"
}, {
	"constant": true,
	"inputs": [],
	"name": "name",
	"outputs": [{
		"name": "",
		"type": "string"
	}],
	"payable": false,
	"type": "function"
}, {
	"constant": false,
	"inputs": [{
		"name": "_spender",
		"type": "address"
	}, {
		"name": "_value",
		"type": "uint256"
	}],
	"name": "approve",
	"outputs": [],
	"payable": false,
	"type": "function"
},
...

]

We also need to know the address of the smart contract so that web3.js can interact with the specified smart contract.

Note that everything that is connected to the Ethereum network has an address. So that means all users, including you, have their own unique address that represent your account. Smart contracts are no exceptions, they too have their own address.

Basically, web3.js connects to a specified Ethereum network and reads smart contracts that are deployed to that Ethereum network. To use an analogy that relates to web development: using web3.js to interact with Ethereum networks and nodes are similar web clients that interact with backend REST APIs. Therefore, the Ethereum blockchain would act as our backend if we think from a web application design perspective.

Here is a simple example of how to use Web3.js:

const Web3 = require('web3')
const RPC_URL = 'http://127.0.0.1:7545'
const web3 = new Web3(RPC_URL)
const address = '<YOUR_METAMASK_ACCOUNT_ADDRESS_HERE>'
web3.eth.getBalance(address, (err, wei) => { balance = web3.utils.fromWei(wei, 'ether') })

The require('web3') expression imports Web3.js into the Web3 variable. The RPC_URL variable needs the address of an RPC URL. An RPC URL is an URL that is needed to interact with JSON RPC based APIs, of which all Ethereum networks fall into. If you're using MetaMask as your crypto wallet, just click on the Settings button -> Networks then click on the Ethereum network you're using to find it's RPC URL like so:

Figure 3 & 4: Finding the RPC URL

Then you'll need to copy and paste your account's unique address as the value of the address variable. If you're using MetaMask, this address can be found in the account dashboard page. Finally, the web3.eth.getBalance() method is used to communicate with the blockchain and fetch the balance of the block to which the address is assigned to.

Conclusion

Well, that's it for this blog post! Hopefully you now have a better idea of what web3.js is and how to use it🚀

Thanks for following along in this blog post. If you have any questions or concerns please feel free to post a comment in the comments section and I will get back to you when I find the time.

If you found this article helpful please share it and make sure to follow me on Twitter and GitHub, connect with me on LinkedIn and subscribe to my YouTube channel.