A guide to Web3 for Web2 frontend devs

With all the hype around, web3 can be overwhelming if you’re looking to get started. Luckily, if you are a frontend dev coming from web2, you already have most of the skills you need to get started in web3. I can say this because I come from a web2 frontend background myself, and I made the move to web3 last year. I now work full-time in web3.

In this post, I’ll try to give you an overview of the web3 space so that you can make a decision on whether you want to switch to web3 and how you can do it.

What stays the same

The one thing that stays the same between web2 and web3 apps is that all of them are just websites (or mobile apps) to begin with. So if you know how to build UIs with React, you can build UIs for both web2 and web3 apps. Nothing changes. You’re just manipulating the DOM after all. The difference lies in how web2 and web3 apps handle data and authentication. Let’s talk about that next.

What’s different

There is a paradigm shift in how web2 and web3 apps handle data and authentication.

Instead of managing passwords and access tokens, you will be dealing with wallet connections and signed messages in the web3 world. Your wallet is a store of identity and value owned by you that you use across all dapps.

Instead of making network requests to a centralized API server somewhere, you will be reading data from the blockchain directly, usually from smart contracts. As a web3 frontend engineer, you will be interacting with smart contracts on a daily basis. Make sure you have a solid understanding of what a smart contract is, how they work, what the ABI is, etc.

Data mutation in web3, unlike building the ui, is completely different from web2. Each time you mutate a smart contract’s data, you pay a fee (infamously known as gas). So you need to be extra careful with your smart contract calls in your frontend code. You need to ensure that you interact with the correct smart contract and send the valid data in the correct format. Smart contracts and anything on the blockchain are immutable by nature. Once it's there, it's there. If you want to change it, it usually costs money, and sometimes it's impossible - depending on the nature of the smart contract you're interacting with.

Data mutation in web3 also takes much longer than web2. POST requests in web2 usually take a few hundred milliseconds. Data mutation in web3, or smart contract calls/transactions, can take anywhere between a few seconds and forever.

This is because the nodes on the blockchain network have to add each transaction to a new block on the chain. The delay between submitting the transaction and it getting added to the chain depends on the gas fee (i.e., the cost) your user is willing to pay for it. Because of this uncertain nature of data mutation, you need to make sure that you get your loading and error states right.

You’ll also be dealing with different networks. You want to ensure that your users and the smart contracts they’re interacting with are on the same network.

If all of the stuff I mentioned above seems overwhelming, please don’t worry. Some great open-source libraries abstract out all of this for you. My favorites are wagmi and eth-hooks. (Also plugging web3-ui, the library that I am working on!)

Code comparison

Let’s make some direct code comparisons between similar scenarios in web2 and web3.

1. Authentication

Compared to the traditional auth via cookies approach in web2, in web3 you will usually ask the user to connect their wallet to the site. While the code for wallet connections can be a bit boilerplate-y and tricky, there are many libraries that provide high-level abstractions.

// web2
const res = await axios.post('https://some-api.com/auth', payload);
// then use cookies

// web3
import { useWallet } from '@web3-ui/core';

function App() {
  const { connectWallet, connection, connected } = useWallet();

  if (!connected) {
    return (
      <button onClick={connectWallet}>Connect wallet</button>
    )
  }

  return (
    <p>{connection.userAddress}</p>  
  )
}

2. Reading data

You may be familiar with using fetch or axios to make requests to APIs to read data. In web3, you will first create an instance of a smart contract using the contract's address and its ABI. ethers is one of the most popular libraries that let you interact with the blockchain.

One thing you should keep in mind as a frontend engineer is that when you try to read a number from a smart contract (eg. a balance), the type of the value you get will be BigNumber and not number. This means that you will have to convert the returned data into a string or a number using methods like toString().

// web2
const res = await axios.get('https://some-api.com');

// web3
const contract = new ethers.Contract('contract_address', ABI, provider); // create instance
const res = await contract.balanceOf('some_address'); // read from the contract
console.log(res.toString()); // convert from BigNumber to string

3. Writing data

Both reading and writing data in web3 is done via calling a function on a smart contract. As you can see, the syntax for writing to a smart contract is no different than reading from it. There are two caveats though:

To write to a smart contract, you need a signer. A provider isn't enough.

https://docs.ethers.io/v5/api/signer/

You need to call the wait() method on the returned promise in order to wait for the transaction to be mined/confirmed. The wait() method also returns a promise which resolves once the transaction has been mined.

// web2
const res = await axios.post('https://some-api.com/', { name: 'John Doe' });

// web3
const contract = new ethers.Contract('contract_address', ABI, signer); // create instance
const res = await contract.setGreeting('Hi!');
await res.wait(); // wait for the transaction to be 'mined'

Rough roadmap

If you want to get started in web3 as a frontend dev, this is a rough roadmap that you can use as a reference. This roadmap is inspired by both my personal experiences and what I've seen others do.

Learn about blockchain and Ethereum fundamentals (just the very basic stuff)
Learn about smart contracts
Learn about wallets and wallet connections in web3 (provider, signer, different wallet providers)

This playlist will give you a solid understanding of the above three items:

Create a frontend that simply lets you connect your wallet and shows the connected wallet's address (I have listed more resources at the end of the post)

https://wagmi-xyz.vercel.app/guides/connect-wallet

Create a frontend that interacts with a smart contract on a testnet (you can start by interacting with a simple Greeter contract)

https://wagmi-xyz.vercel.app/docs/hooks/useContractRead

You will now have all the basics you need to call yourself a web3 frontend engineer. Some extras that could be useful to learn too:

ERC20 and ERC721 token issuance flows (approvals, transfer, mint, etc)

https://ethereum.org/en/developers/docs/standards/tokens/erc-20/

Sign-in with Ethereum

https://login.xyz/

Useful links

Feel free to reach out to me on Twitter if you have any queries. More than happy to help!