Front-End Development In Web3: This Is What You Need to Know
As the shift to Web3 accelerates, there’s an increasing demand for developers who are knowledgeable in this space.
The good news? Front-end frameworks are pretty much the same for Web2 and Web3. If you’re familiar with front-end development in JavaScript, jumping into Web3 shouldn’t be too difficult.
What makes Web3 development different is that Web3 websites interact with blockchains instead of a server and a database.
In this article, we provide you with the tools and know-how to get started in Web3. We focus on Ethereum as it’s most widely used and has the largest developer community.
TLDR
You need to be familiar with Javascript to build Web3 websites.
Web3 websites require nodes that interact with the Ethereum blockchain.
You can run your own node or use a Web3 provider.
Nodes and providers make requests on the blockchain using clients.
Hack Web3 Front-End Development With Javascript
The foundations of front-end web development are HTML, CSS, and Javascript. If you’re new to web development, you’ll need to acquire this toolset to build interactive websites.
Javascript is crucial because it’s responsible for interactivity through frameworks like React, Vue, and Angular. Most Web3 projects use React, a popular Javascript library, to build their user interface. React is quite flexible and through packages like web3.js or ether.js, it allows users to sign in to websites using digital wallets like Metamask.
Web3.js is a Javascript library containing modules designed to communicate with the Ethereum blockchain. Ethers.js is a more compact, beginner-friendly library. Although it was at first used to simplify writing Javascript-based wallets, it’s now a complete library that talks to the blockchain.
You’ll also need some basic knowledge about blockchain and cryptocurrencies.
Why Use the Ethereum Blockchain: The Possibilities Are Endless
Decentralized applications (dApps) run on a blockchain. Blockchains are typically open-source, decentralized ledgers. Currently, Ethereum is the most popular choice for developers. Partly because it was the first blockchain to introduce programmability via smart contracts, partly because it has the most extensive technical documentation and support.
Ethereum is what’s considered layer 1. It provides the foundational architecture for an ecosystem of various dApps. The Ethereum Virtual Machine (EVM) acts as a virtual computer determining the state of the network. It also hosts smart contracts and allows for development on Ethereum.
If you learn how to work with the EVM, you can transfer those skills to other blockchains that support it (eg. Moonbeam). EVM is also functional on layer 2 solutions like Polygon, Arbitum, and Aurora. These blockchains are designed to improve the capabilities of Ethereum by enhancing scalability.
How to Access and Talk to the Blockchain
For the Web3 library to interact with smart contracts on the blockchain, you need an Ethereum node. A node runs a client, which is software that allows you to make calls via the Ethereum network. Nodes store data from a block and verify it. There are three different types:
Full node: contains the current state of the blockchain, meaning it copies and verifies transactions on the Ethereum blockchain.
Archive node: a node that stores data going back to the genesis block (the first block). It’s a full node with “archive mode” activated. Read more here.
Light node: Stores only basic information about a block, but can retrieve other information by request.
You can run your own local node, which provides the most secure connection. However, this can be difficult to install and maintain as a beginner, which is why there are public Web3 providers.
Web3 providers are websites that run nodes for you. You can use Infura, Alchemy, or QuickNode as Web3 providers for Ethereum nodes.
As for Ethereum clients that allow you to make requests to the network, their code is accessible through Github. Clients include Geth, Nethermind, or OpenEthereum.
How to access web3.js on Geth
Initiate the library:
const web3 = require(‘web3’);
Use an HTTP provider:
const web3 = new Web3(new Web3.providers.HttpProvider( ‘http://127.0.0.1:8545’));
Retrieve the balance of a wallet
Let’s say you want to build a front-end application that connects your wallet to your browser using Web3.js. This library allows you to get balances and make transactions, among other things.
You can query a balance on a wallet using Infura and Node.js. To start, run:
npm init -y
Install the dependencies in the latest version:
npm install web3@3.0.0
To retrieve a balance, you’ll need to know the wallet address. You can use your own address or you can get one through Etherscan for practice. Hover over the “Blockchain” menu at the top of the page on Etherscan. Click on “Top Accounts”. A list of addresses shows up. Once you click on an address, you’re able to copy it from the top left corner of the account page.
Return to your text editor. Create a variable and paste the address within the brackets of the “eth.getBalance()” function, as seen below. Use “console.log” to test and see if the code works:
web3.eth.getBalance("0xDA9dfA130Df4dE4673b89022EE50ff26f6EA73Cf").then(console.log)Read the balance on the account. It will look like this:
> 98999296192000000000
The balance retrieved will be in gwei, which is the smallest denomination of ether.
A Glance at Smart Contracts
Even though front-end development doesn’t require you to write smart contracts, it’s useful to know a bit about them and how they’re implemented onto the blockchain.
A smart contract is a self-executing digital contract running on a blockchain.
To build smart contracts on the Ethereum blockchain, you can use Solidity, Vyper, or Yul. Solidity is one of the most popular languages and is influenced by Javascript, C++, and Python. The good news is, if you’re already familiar with any curly bracket language, it probably won’t be too difficult to adapt to smart contract languages.
Check out our guide on smart contracts for the full overview.
Additional Resources
Check out these resources to dip your toes in frontend development for Web3:
Participate in the Ethereum Network Without Building Smart Contracts
How to Read The Balance of Your MetaMask Wallet With Web3.js
How to Query the Ethereum Blockchain using Web3
A detailed look at Web3 providers
Ethereum Nodes & Clients: A Complete Guide
Free comprehensible guides for Web3 developers
When You’re Ready…
Document your progress on Twitter or your blog/website. Showcase some of your past Web2 work, fun projects, or any dApps you helped create. Your wallet address can also serve as proof of your on-chain activity.
Have any questions? Join our Discord community to chat with engineers or find a course for engineers in our Perks Dashboard.
