Web3 is that buzzword everyone's heard about, but rarely understands. In fact, many Web3 simply because they cannot grasp how it differs from Web2. discredit Because Web3 was a new and rapidly changing field, identifying core components of the development stack used to be difficult. However, it's easier to define the Web3 stack today—especially as blockchain technology continues to improve. This guide offers an introduction to the Web3 technology landscape. Whether you're planning to build on the Web3 stack, or just curious to see how decentralized technology works under the hood, this is a good place to start. What is Web3 And Why Does It Matter? Before diving into the Web3 stack, it's important to grasp the meaning of Web3. Most of what we know about Web3 comes from this 2014 by Gavin Wood, Ethereum co-founder and CEO of Parity Technologies. article For a short introduction to the topic, Web3 is essentially a collection of technologies that power the development of (dApps). Among other things, dApps benefit from decentralized control and distributed infrastructure, while offering users more control of identity and value. decentralized applications Web3 is a vision of a decentralized Internet, built on blockchain technology. The current model of the Internet is highly centralized and more broken than most realize. For instance, users must deal with , vendor lock-in, poor user experience, and so many problems associated with a centralized infrastructure. data breaches Web3 aims to solve most—or, at least some—of these problems. By removing power from centralized intermediaries, the Web3 stack promises a better user experience, increased data safety, and failure-resistant services. [ ] Image source A Casual Introduction to the Web3 Stack Although Web3 is vaguely similar to Web2, such similarities are fleeting. If anything, the Web3 stack is infinitely complex because blockchains—on which Web3 is built—are complex mechanisms. Nevertheless, we'll attempt a breakdown of the Web3 application architecture. This section will go over the following building blocks of decentralized applications and how these systems combine to power a decentralized web: Blockchains Smart contracts Nodes Infrastructural primitives Frontend libraries Communication endpoints Access points (browsers and wallets) Layer 1 (Blockchains) At the bottom of the Web3 stack are blockchains. A blockchain is a digital ledger of transactions, maintained by a peer-to-peer network of nodes. This ledger also keeps track of on-chain data, such as account balances, smart contract code, and so on. Beyond operating as a distributed ledger, blockchains also serve as "state transition machines." A can compute an infinite amount of states, but can only be in state at a time. state transition machine one The rules governing state transition in a blockchain are defined by the consensus protocol, such as proof-of-work (Bitcoin) or proof-of-stake (Ethereum 2.0). Any transaction that fails to abide by these rules will automatically be rejected, which is why blockchains can function in the absence of a controlling entity. Blockchains are critical infrastructure for decentralized web, as they facilitate the storage and execution of smart contracts (more on this later). For example, Ethereum—a popular blockchain for dApps—provides an execution environment (the ) that allows developers to develop blockchain-based applications. Ethereum Virtual Machine Other blockchains (state transition machines) useful for executing decentralized applications include: Polkadot NEAR Solana EOS Binance Smart Chain Avalanche [ ] Image source Despite their benefits, blockchains often present many problems for applications. For instance, base-layer blockchains have slow processing speeds, limiting the functionality of dapps. To circumvent this problem, developers have created several scaling solutions to achieve scalability whilst maintaining security and decentralization. These " " solutions are designed to provide faster transactions and higher throughput to support increased usage. Layer 2 Examples include: Polygon Network Optimism Arbitrum zkSYNC Layer 2 (Smart Contracts) Slightly above blockchains in the Web3 stack are smart contracts. Smart contracts refer to software programs that run on the blockchain. A smart contract is autonomous, so it can execute operations automatically once the right functions are called. Most smart contracts are also immutable, preventing any alterations to the code once it is deployed on the blockchain. In the context of Web3, smart contracts function as the backend of an application. The smart contract defines application logic and controls the overall functionality of the application. Each time a smart contract function is called, it causes a change in the state of the blockchain network. Thereafter, the state change is accepted and broadcasted throughout the network of nodes. This is where Web3 diverges from Web2. Traditional applications use a client-server approach where the code controlling applications is controlled by a company and can be changed at will. [ ] Image source Because each smart contract lives on the blockchain, it cannot be deleted or stopped. This means dapps are censorship-resistant and cannot be unilaterally taken down by authorities. Smart contracts are written in different languages, such as Solidity and Vyper (Ethereum and EVM-compatible chains) or Rust (Solana, NEAR, Polkadot). To interact with smart contracts, users need to submit a transaction to the network, which is where nodes come into the picture. Layer 3 (Nodes) As explained earlier, a blockchain is essentially a p2p network sustained by globally distributed computers (nodes). Each node validates transactions, verifies the network state, and stores the history of the blockchain. More importantly, nodes can parse on-chain data and send data to the blockchain as well. For a dapp to connect to the blockchain (and interact with smart contracts), it must connect to a node. Typically, there are different alternatives here: Run a node Connect to a public node Use a node provider Each method carries tradeoffs. For instance, running a node might be good from a decentralization standpoint (you can verify data yourself and reduce dependence on intermediaries). However, it can be expensive to run a node—especially as the blockchain continues to grow in size. For this reason, many blockchain developers opt for node providers like and . Besides reducing overhead costs, node providers handle infrastructure management—allowing you to focus on building your dapp. Infura Alchemy Each node runs a client software, which is just a protocol that enables interaction with blockchain data. Ethereum, for example, has different clients including Go Ethereum (Geth), OpenEthereum, and Parity. Layer 4 (Technological Primitives) Nodes, smart contracts, and blockchains mostly form the underlying structure for blockchain applications. However, another layer of critical infrastructure exists. This includes decentralized file storage, data feeds, and identity management. Decentralized Storage In Web2, 99.9% of application data is stored in a centralized database. Take a Web2 app, like Twitter, for example. Data that users generate—tweets, videos, pictures, likes, and account information—must be stored somewhere. But centralized data storage is problematic for many reasons. It promotes undue and unauthorized exploitation of user data, exposes personal information to theft, and introduces the risk of censorship. Since Web3 is designed to correct these problems, it needs an alternative storage system. With built-in security, trustlessness, and transparency, blockchains would be ideal for storing information. However, limits on block sizes make it impractical to store large amounts of data on-chain. This is where come into play. A decentralized storage platform distributes files across a peer-to-peer network, ensuring the security and immutability of information. Unlike traditional databases, decentralized storage services are harder to shut down and protect privacy and control of personal information. decentralized storage networks Thus, Web3 apps solve the data management problem by integrating with the decentralized storage solutions: Arweave IPFS Filecoin Storj Sia Data Feeds Dapps are great, but their real-world functionality is often limited. That's because smart contracts that power these applications can only access on-chain data (such as account balances). For instance, building a decentralized prediction marketplace would be difficult since the dapp cannot extract information about event outcomes. To solve this problem, blockchain developers use "oracles"—entities that collect real-world information from different sources and feed them to smart contracts. This allows smart contracts to execute based on the inputs they receive. Using the previous example, you can see why data feeds (i.e., oracles) are important to blockchain applications. By integrating into an oracle service, like , the prediction dapp can reward or penalize users based on the accuracy of their predictions. Chainlink Identity Management Using applications requires proving our identity and permission to use the service. In Web2, identity management is centralized—third-party services ask for your personal information in exchange for access. In Web3, identity management is decentralized. Instead of asking users to hand over personal information, authentication is done via cryptographic keys. To use a dapp, users will only have to connect their wallets or use a wallet-based ID service like . SpruceID Layer 5 (Frontend Libraries) Every application has a frontend, an interface from which users can activate the app's functionality. The frontend is also described as user interface (UI) and determines what happens when you interact with different elements. In developer-speak, the frontend "talks" to the backend and initiates the specific functionality you requested. Let's use Twitter as an example: Say you want to use the Search box to find an account. As you input the handle, the frontend communicates your request to the backend, which then returns information relevant to your search. Many Web3 apps are similar to Web2 apps in how their frontend is built. For instance, many blockchain developers use JavaScript-based frameworks, like , to build out their dapp's front-end. React.js The main difference lies in how the frontend applications in Web3 communicate with the backend. Because Web3 apps are built on a novel architecture (blockchains), they require different communication protocols. Layer 6 (Communication Endpoints) The Web2 Internet operates on a model comprising clients and web servers. A client can be a program or protocol that can send or receive information, while the server is responsible for storing and delivering the information. Each time you visit a website or use an app, you're using a client (like your Chrome browser) to request information from a web server. This communication is governed by the HyperText Transfer Protocol (HTTP). However, blockchain applications cannot use standard HTTP communication protocols since information is stored differently on blockchain networks. Unlike Web2's client-server infrastructure, blockchains rely on a distributed network of computers serving as mini-servers. To interact with the blockchain, most dapps use newer communication endpoints, such as the and libraries. These libraries help frontend applications interface with the blockchain and perform read/write transactions. This allows users to trigger smart contract functions by using an application's frontend. ethers.js web3.js Layer 7 (Browsers and Wallets) Web3 browsers and wallets serve as entry points for users to interact with decentralized applications. Web3 Browsers The average blockchain application is usually available as a Web app, so you can only access them via browsers. However, the average browser—say, Google Chrome—cannot interact with a dapp for reasons explained earlier. To solve these problems, users rely on dapp-specific browsers like , , and or browser extensions like . These browsers have native support for parsing blockchain information, so you can read/write transactions from your browser. Brave Status Opera MetaMask For instance, MetaMask is a browser extension that injects web3.js into each webpage, making it possible to fetch on-chain data and also send transactions from your browser. [ ] Image source Wallets While you can easily read blockchain data from your dapp browser, sending transactions requires signing with a private key. As such, wallets are crucial for interacting with blockchain applications. As explained earlier, calling smart contract functions involves paying a fee to miners responsible for executing the transaction. Wallets allow users to store and send cryptocurrency, making them necessary for interacting with smart contracts. Some browsers, like MetaMask, also serve as wallets; in this case the browser stores private keys on the device. Each time a user triggers a specific dapp functionality, a confirmation screen will appear in the browser window, asking them to sign the transaction. Final Thoughts This list is by no means exhaustive—the Web3 landscape is ever-changing and new tools are always popping up. Nevertheless, the components discussed in this article form the core infrastructure of the Web3 development stack. Although Web3 technology may seem complex, the stack is important for realizing the vision of decentralization. With these technologies, we can build a better Internet that offers users greater sovereignty and improves the overall experience. Also Published Here

Ethereum

Solana

Avalanche

Polkadot

Polygon

NEAR Protocol

Chainlink

Filecoin

Chain

Binance

Dapp

Fetch

Google

Horizen

Oracle

Twitter

Why Composability Matters For Web3

Using DAOs for Shareholder Activism to Overcome Traditional Corporate Governance

Hire me to craft articles on blockchain technology!

Nominated for 2022 - HackerNoon Contributor of the Year - Ethereum

Too Long; Didn't Read

The Web3 Stack For People In A Hurry

The Web3 Stack For People In A Hurry

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

6 Ways to Start Using NFTs in Your Business

108 Stories To Learn About Blockchain Adoption

10 Tools for Blockchain Development

133 Stories To Learn About Solidity

287 Stories To Learn About Blockchain Development

2022 Web Development Trends, Mistakes, and Misconceptions: What You Need to Know

6 Ways to Start Using NFTs in Your Business

108 Stories To Learn About Blockchain Adoption

10 Tools for Blockchain Development

133 Stories To Learn About Solidity

287 Stories To Learn About Blockchain Development

2022 Web Development Trends, Mistakes, and Misconceptions: What You Need to Know

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps