Web3.js vs ethers.js in Blockchain / Solidity - Trade-offs & Expert Analysis

Overview - Web3.js vs ethers.js

What is it?

Web3.js and ethers.js are JavaScript libraries that help developers interact with the Ethereum blockchain. They allow you to read blockchain data, send transactions, and work with smart contracts using simple code. Both libraries provide tools to connect your app to Ethereum nodes and manage user wallets. They make blockchain programming easier by handling complex details behind the scenes.

Why it matters

Without these libraries, developers would have to write complex code to communicate directly with the Ethereum network, which is slow and error-prone. Web3.js and ethers.js simplify blockchain development, making it accessible to more people and enabling the creation of decentralized apps (dApps). This helps grow the blockchain ecosystem and brings real-world blockchain applications to users.

Where it fits

Before learning these libraries, you should understand basic JavaScript and how blockchain and Ethereum work. After mastering them, you can explore advanced topics like smart contract development, decentralized finance (DeFi), and building full dApps with frameworks like Hardhat or Truffle.

Mental Model

Core Idea

Web3.js and ethers.js are bridges that connect your JavaScript code to the Ethereum blockchain, making blockchain interactions simple and reliable.

Think of it like...

Imagine the Ethereum blockchain as a huge library full of books (data and contracts). Web3.js and ethers.js are like friendly librarians who help you find the right books, read pages, and even write new pages without getting lost in the maze.

Ethereum Blockchain
   │
   ├─ Node (Ethereum client)
   │
   ├─ Web3.js / ethers.js (JavaScript libraries)
   │      ├─ Connect to node
   │      ├─ Read data
   │      ├─ Send transactions
   │      └─ Manage wallets
   │
   └─ Your JavaScript app

Build-Up - 7 Steps

1

Foundation

What is Web3.js and ethers.js

Concept: Introduce the two main JavaScript libraries for Ethereum interaction.

Web3.js is the older, widely used library that provides many features to connect to Ethereum nodes and interact with smart contracts. Ethers.js is a newer library designed to be smaller, simpler, and more secure, focusing on ease of use and modern JavaScript practices.

Result

You understand that both libraries serve the same purpose but have different design goals and features.

Knowing the existence of both libraries helps you choose the right tool for your blockchain project.

2

Foundation

Basic blockchain interaction with libraries

Concept: Learn how these libraries connect to Ethereum and read simple data.

Both libraries let you connect to an Ethereum node (like Infura or your own) using a provider. Then you can ask for the current block number or account balance with simple commands.

Result

You can write code to get blockchain data like the latest block or your wallet balance.

Understanding the provider concept is key to accessing blockchain data through these libraries.

3

Intermediate

Differences in API design and usage

🤔Before reading on: do you think Web3.js and ethers.js use the same method names and return types? Commit to your answer.

Concept: Explore how the two libraries differ in their function names, return values, and coding style.

Web3.js often returns raw data and uses callbacks or Promises, while ethers.js uses modern Promises and returns more user-friendly objects. For example, ethers.js returns BigNumber objects for large numbers, making math safer. Also, ethers.js uses immutable objects and encourages functional programming styles.

Result

You see that ethers.js code tends to be cleaner and less error-prone, while Web3.js has a more traditional style.

Recognizing API differences helps you write better code and avoid bugs when switching between libraries.

4

Intermediate

Wallet and key management approaches

🤔Before reading on: do you think both libraries handle private keys and wallets the same way? Commit to your answer.

Concept: Understand how each library manages user wallets and private keys securely.

Web3.js relies heavily on external wallet providers like MetaMask for signing transactions, while ethers.js includes built-in wallet classes that can create, manage, and sign transactions with private keys directly. Ethers.js also supports encrypted JSON wallets and hardware wallets more seamlessly.

Result

You know that ethers.js offers more built-in wallet tools, giving developers more control over keys.

Knowing wallet management differences is crucial for building secure blockchain apps.

5

Intermediate

Smart contract interaction patterns

Concept: Learn how each library lets you call and send transactions to smart contracts.

Both libraries use contract ABIs (descriptions) to create contract objects. Web3.js uses methods like contract.methods.myFunction().call() for reading and .send() for writing. Ethers.js uses contract.myFunction() for calls and contract.myFunction() for transactions, often returning transaction receipts with more details.

Result

You can write code to interact with smart contracts using either library.

Understanding contract interaction patterns helps you build dApps that communicate with blockchain logic.

6

Advanced

Handling big numbers and data types safely

🤔Before reading on: do you think JavaScript numbers are safe for Ethereum values? Commit to your answer.

Concept: Explore how ethers.js and Web3.js handle large numbers and why this matters.

Ethereum uses 256-bit numbers, which are too big for JavaScript's number type. Web3.js returns strings or raw numbers, which can cause errors. Ethers.js uses a BigNumber class to safely handle these values, preventing bugs in calculations and transactions.

Result

You avoid common bugs related to number precision and overflow in blockchain apps.

Knowing how to handle big numbers prevents costly mistakes in financial blockchain applications.

7

Expert

Library size, modularity, and ecosystem impact

🤔Before reading on: do you think smaller library size always means fewer features? Commit to your answer.

Concept: Understand the trade-offs between library size, modularity, and community support.

Web3.js is larger and monolithic, including many features in one package, which can slow down apps. Ethers.js is modular, letting you import only what you need, reducing bundle size. This design choice affects app performance and developer experience. Also, ethers.js has gained popularity in modern dApp development due to this modularity and cleaner API.

Result

You can choose the best library based on your app's performance needs and development style.

Recognizing design trade-offs helps you build efficient and maintainable blockchain applications.

Under the Hood

Both libraries work by connecting to Ethereum nodes via JSON-RPC calls over HTTP or WebSocket. They translate JavaScript function calls into low-level network requests that query blockchain data or send signed transactions. They also handle encoding and decoding of smart contract data using ABI specifications. Wallet management involves cryptographic signing of transactions using private keys, either managed internally or via external providers.

Why designed this way?

Web3.js was created early to provide a comprehensive Ethereum interface but grew large and complex. Ethers.js was designed later to be lightweight, modular, and use modern JavaScript features, improving developer experience and security. The design trade-off was between feature richness and simplicity/modularity.

┌─────────────────────────────┐
│ Your JavaScript Application  │
└─────────────┬───────────────┘
              │ Calls library functions
┌─────────────▼───────────────┐
│ Web3.js or ethers.js Library │
│ - Encode requests           │
│ - Decode responses          │
│ - Manage wallets           │
└─────────────┬───────────────┘
              │ JSON-RPC calls
┌─────────────▼───────────────┐
│ Ethereum Node (Infura, etc.) │
│ - Access blockchain data    │
│ - Broadcast transactions    │
└─────────────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Do you think Web3.js and ethers.js are interchangeable without code changes? Commit to yes or no.

Common Belief: Many believe Web3.js and ethers.js have identical APIs and can be swapped easily.

Reality: They have different APIs, method names, and return types, so code changes are needed when switching.

Why it matters: Assuming interchangeability causes bugs and wasted time debugging unexpected errors.

Quick: Do you think JavaScript's number type safely handles Ethereum values? Commit to yes or no.

Common Belief: Some think JavaScript numbers can safely represent Ethereum's large numeric values.

Reality: JavaScript numbers lose precision for large Ethereum values; special BigNumber classes are needed.

Why it matters: Ignoring this leads to incorrect balances or transaction amounts, causing financial loss.

Quick: Do you think Web3.js manages private keys internally like ethers.js? Commit to yes or no.

Common Belief: People often believe Web3.js can manage private keys directly within the library.

Reality: Web3.js relies mostly on external wallets like MetaMask for key management and signing.

Why it matters: Misunderstanding this can cause security risks or confusion about how to sign transactions.

Quick: Do you think a smaller library always means fewer features? Commit to yes or no.

Common Belief: Some assume ethers.js is less capable because it is smaller and modular.

Reality: Ethers.js offers all essential features but in a modular way, improving performance and usability.

Why it matters: Underestimating ethers.js may cause missed opportunities for better app design.

Expert Zone

1

Ethers.js immutability of objects reduces side effects, making code more predictable in complex dApps.

2

Web3.js's monolithic design can cause larger bundle sizes, impacting web app load times significantly.

3

Ethers.js supports ENS (Ethereum Name Service) resolution natively, simplifying human-readable addresses.

When NOT to use

Avoid Web3.js if you need a lightweight, modular library for modern frontend apps; prefer ethers.js. Conversely, if you rely on legacy codebases or need some specific Web3.js plugins, Web3.js might be better. For non-Ethereum chains, check library compatibility or use chain-specific SDKs.

Production Patterns

In production, ethers.js is often used with frameworks like Hardhat for testing and deployment, leveraging its clean API and wallet management. Web3.js remains popular in projects needing broad community support or legacy integration. Both are used with MetaMask for user wallet interactions in dApps.

Connections

REST API clients

Both Web3.js and ethers.js act like specialized API clients for Ethereum nodes.

Understanding how API clients work helps grasp how these libraries send requests and handle responses from blockchain nodes.

Cryptographic key management

Wallet handling in these libraries connects deeply with cryptographic principles of private/public keys.

Knowing cryptography basics clarifies why secure key management is critical and how signing transactions works.

Human-computer interaction (HCI)

The design of these libraries affects developer experience and usability, a core HCI concern.

Recognizing the importance of API design and ergonomics helps appreciate why ethers.js focuses on simplicity and modularity.

Common Pitfalls

#1 Using JavaScript numbers for Ethereum values causes precision loss.

Wrong approach:

const balance = await contract.balanceOf(address);
console.log(balance.toNumber()); // May overflow or lose precision

Correct approach:

const balance = await contract.balanceOf(address);
console.log(balance.toString()); // Use string or BigNumber methods

Root cause:

Misunderstanding JavaScript number limits and ignoring BigNumber usage.

#2 Assuming Web3.js manages private keys internally leads to missing signing steps.

Wrong approach:

const tx = { to: addr, value: amount };
web3.eth.sendTransaction(tx); // Without user wallet or signing

Correct approach:

Use MetaMask or wallet provider to sign and send transactions:
await web3.eth.sendTransaction(tx); // With MetaMask popup

Root cause:

Confusing library capabilities with wallet provider responsibilities.

#3 Swapping Web3.js code directly to ethers.js without adapting API calls.

Wrong approach:

contract.methods.myFunction().call(); // Web3.js style used in ethers.js code

Correct approach:

await contract.myFunction(); // Ethers.js style without .methods or .call()

Root cause:

Not recognizing API differences between the two libraries.

Key Takeaways

Web3.js and ethers.js are essential JavaScript libraries that simplify Ethereum blockchain interaction.

Ethers.js is newer, modular, and uses modern JavaScript features, while Web3.js is older and more monolithic.

Handling large numbers safely with BigNumber is critical to avoid errors in blockchain apps.

Wallet management differs: ethers.js includes built-in wallet tools, Web3.js relies on external wallets.

Choosing the right library depends on your app's needs, performance goals, and developer experience preferences.