Web3.js vs ethers.js in Blockchain / Solidity - Visual Side-by-Side Comparison

Concept Flow - Web3.js vs ethers.js

Start

↓

Choose Library

↓

Web3.js

↓

Connect to Ethereum

↓

Send Transactions

↓

Get Blockchain Data

↓

End

This flow shows choosing between Web3.js and ethers.js libraries, then connecting to Ethereum, interacting with contracts, sending transactions, and getting blockchain data.

Execution Sample

Blockchain / Solidity

import { ethers } from 'ethers';

const provider = new ethers.JsonRpcProvider('https://mainnet.infura.io/v3/YOUR_API_KEY');
const blockNumber = await provider.getBlockNumber();
console.log(`Current block number: ${blockNumber}`);

This code connects to Ethereum mainnet using ethers.js and prints the current block number.

Execution Table

Step	Action	Evaluation	Result
1	Import ethers library	ethers imported	ethers object available
2	Create provider with Infura URL	provider created	provider connected to Ethereum mainnet
3	Call getBlockNumber()	await provider.getBlockNumber()	fetches latest block number
4	Print block number	console.log output	Current block number: 17500000 (example)
5	End	No more code	Program ends

💡 Program ends after printing the current block number.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
ethers	undefined	ethers object	ethers object	ethers object
provider	undefined	JsonRpcProvider instance	JsonRpcProvider instance	JsonRpcProvider instance
blockNumber	undefined	undefined	17500000 (example)	17500000 (example)

Key Moments - 3 Insights

Why do we need a provider in ethers.js?

The provider connects your code to the Ethereum network to read blockchain data, as shown in step 2 and 3 of the execution_table.

What is the difference between Web3.js and ethers.js in usage?

Both connect to Ethereum and interact with contracts, but ethers.js uses simpler, promise-based calls and better defaults, making it easier to use as seen in the sample code.

Why do we use await with getBlockNumber()?

Because getBlockNumber() is asynchronous and returns a promise, we use await to wait for the result before continuing, as shown in step 3.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'blockNumber' after step 3?

A undefined

B 17500000 (example)

C ethers object

D JsonRpcProvider instance

💡 Hint

Check the variable_tracker row for 'blockNumber' after step 3.

At which step does the program connect to the Ethereum network?

A Step 2

B Step 3

C Step 1

D Step 4

💡 Hint

Look at the execution_table action descriptions for when the provider is created.

If we replaced ethers.js with Web3.js, which part of the code would change most?

A Variable names only

B Console.log statement

C Import statement and provider creation

D No changes needed

💡 Hint

Consider how the library import and connection setup differ between ethers.js and Web3.js.

Concept Snapshot

Web3.js and ethers.js are JavaScript libraries to interact with Ethereum.
ethers.js uses promise-based calls and simpler syntax.
Create a provider to connect to Ethereum network.
Use provider methods to read blockchain data.
Use async/await to handle asynchronous calls.
Choose ethers.js for easier and modern usage.

Full Transcript

This visual execution compares Web3.js and ethers.js libraries for Ethereum interaction. The flow starts with choosing a library, then connecting to Ethereum via a provider, interacting with smart contracts, sending transactions, and reading blockchain data. The sample code shows ethers.js usage: importing the library, creating a JsonRpcProvider connected to Infura, calling getBlockNumber asynchronously, and printing the current block number. The execution table traces each step, showing variable states and actions. Key moments clarify why a provider is needed, differences in usage, and the role of async/await. The quiz tests understanding of variable values, connection steps, and differences between libraries. The snapshot summarizes key points for quick reference.