Web Application Development

The Web3 Stack: What Web 2.0 Developers Need to Know

Our senior editor at the Infiniti Tech Solution and writes a weekly column about web and application development trends. Previously he founded Read Write Web in 2003 and built it into one of the world’s most influential blogs.

Despite the developer ecosystem for Web3 being a tiny proportion of the larger web developer ecosystem, it appears to be fast-growing — so it makes sense to try and pinpoint what the Web3 tech stack is made up of. We know it includes block chain for decentralization and crypto currency wallets as a form of identity. You may have also heard of distributed storage solutions with grandiose names like the Interplanetary File System (IPFS). But what else do developers need to learn to get into the Web3 world? Also, how do traditional web technologies — like JavaScript — fit into the Web3 picture?

The best definition of the Web3 stack I’ve come across so far was written by Nader Debit, a developer relations engineer for a Web3 company called Edge & Node. I first interviewed Debit back in August 2020, when he worked at Amazon Web Services as a server less expert. At that time, he had just released an O’Reilly Media book entitled “Full Stack Server less: Modern Application Development with React, AWS, and GraphQL”. In April 2021, he brought those skills into the nascent Web3 world. Part of his work with Edge & Node is helping to build The Graph, “a Web3 protocol for indexing and querying block chain data with GraphQL.”

I reached out to Debit to ask how being a developer in Web3 differs from his previous work for Web 2.0 companies. But first, let’s take a closer look at his Web3 reference article. He categorizes the Web3 stack as follows:

· Blockchain

· Blockchain development environment

· File storage

· P2P Databases

· API (Indexing & querying)

· Identity

· Client (frameworks and libraries)

· Other protocols

As he noted, this stack is “completely different in many ways” to traditional web architecture — with block chain and crypto currency-based identity being the two most obvious differences. Debit also cautioned that the “Web3 tools, technologies, and ecosystem are less mature than Web2.”

“From a web infrastructure perspective,” Debit told me, “the main differences really are around what we’d consider ‘backend’ technologies, but in Web3 they are usually talked about in terms of ‘protocols’.”

The Frontend

Let’s start with the easy part first. According to Debit, the ​​client-side technologies (frameworks and libraries) of Web3 are essentially the same as in Web 2.0. There is heavy use of JavaScript on the frontend and — as with the current state of Web 2.0 — React is a leading JavaScript framework. Debit noted that “an overwhelming number of [Web3] projects and examples are built in React.”

“There isn’t a lot of difference in the frontend tech, other than actual HTTP client libraries,” Debit explained to me. So to communicate with servers through the HTTP protocol, “instead of fetch or axios, you might use web3.js or ethers.js to talk to an rpc [remote procedure call] or a graphQL client to talk to The Graph.” Web3.js and Ethers.js are both JavaScript libraries that enable developers to interact with the Ethereum block chain.

“Also identity and how we deal with identity is different on the front end,” said Debit. “To read data, you don’t need to know anything about the user — since almost all of the data is public. But for writing data, you usually need to connect to the user’s wallet. There are a couple of ways in which this is done. On a desktop app, the user usually has a browser extension for their wallet, which automatically injects a global window object for the network (e.g. Solana, Ethereum, reweave). Or on mobile, [it] will allow you to authenticate in a wallet app and redirect after signing a transaction.”

If you’ve played around with buying crypto currencies or NFTs, or experimented with daps (decentralized applications), chances are high that you’ve used MetaMask — which has a browser extension for Chrome, Firefox, and Chromium-based browsers like Brave. MetaMask is owned by ConsenSys, which calls itself, with justification, “the leading Ethereum software company.”

ConsenSys also owns one of the leading IDEs (integrated development environments) in Web3. Truffle is a “development environment, testing framework and asset pipeline for block chains using the Ethereum Virtual Machine (EVM).” Among other things, it offers “smart contract lifecycle management” and “automated contract testing.”

Learning Ethereum (and Rust)

Now we get to the more complex aspects of the Web3 stack. By now, most developers are familiar with the concept of a block chain — basically, it’s a distributed ledger of data. But there are many different types of block chains. The two most important are Bitcoin and Ethereum (and not coincidentally, the crypto currencies associated with those block chains are the two market leaders). But whereas Bitcoin is about as programmable as a calculator — as Ethereum researcher Justin Drake put it in an episode of the podcast, Web3 Breakdowns — Ethereum is a fully programmable “Turing-complete” computer.

It’s the programmable nature of Ethereum that has led to the new paradigm of a block chain-focused web development stack — a.k.a. “Web3”. One of the tenets of Ethereum is that, theoretically, you can build anything on top of it. It’s a web platform, to use Web 2.0 parlance. Ethereum is the largest Web3 platform, and it is also compatible with some of the other block chains. So the main on-ramp to becoming a Web3 developer is to learn how to use Ethereum.

You may have heard that Solidity, a programming language for the Ethereum block chain, somewhat resembles JavaScript. While that’s true, Solidity is only used to write “smart contracts” for block chains — putting data on a block chain, along with any instructions for that data.

“In the Blockchain world, learning Solidity and the EVM (or Ethereum Virtual Machine) might be the best bet when getting started as a block chain developer,” explained Debit in his article. “Using this skill set (and tech stack), you can build not only for Ethereum, but other Ethereum Layer 2s, side chains, and even other block chains like Avalanche, Phantom, and Cello.”

However, in another nod to the Web 2.0 world, Rust is also becoming a go-to skill for smart contract developers. Debit cites Solana, NEAR and Polka dot as three examples of block chains with “first-class Rust support.”

“I’d say that Solidity and Rust are the most used and in-demand languages for smart contract development by a wide margin,” Debit told me. He added that experienced smart contract programmers, since they are relatively rare, can command salaries “in the mid-hundreds of thousands of dollars per year easily, and I’ve even seen some examples of the most experienced ones pulling in the range of $1M per year.”

How to Store Data and Query It

One of the trickiest parts of Web3 development is storing and using data. While block chains are good at being “trustless” chains of immutable data, they are also incredibly inefficient at storing and processing large amounts of data — especially for daps. This is where file storage protocols like IPFS, Reweave and File coin come in.

Reweave is an open source project that describes itself as “a protocol that allows you to store data permanently, sustainably, with a single upfront fee.” It’s essentially a peer-to-peer (P2P) network, but has its own set of crypto buzzwords — its mining mechanism is called “Succinct Proofs of Random Access (SPoRAs)” and developers can deploy apps to the “perm web” (“a permanent and decentralized web built on top of the Airwave”).

To complicate matters further, dap developers have the option to use “off-chain” solutions, where the data is stored somewhere other than the main block chain. Two common forms of this are “side chains” (secondary block chains) and so-called “Layer 2” (L2) solutions, like Bitcoin Lightning Network and Ethereum Plasma. For more on how to approach data management in Web3, check out this recent post on The New Stack by Shashank Golla from data API company Fauna.

As for how to index and query data on the block chain, this is a relatively new area of development. But as noted above, Debit is working on one solution — The Graph, powered by GraphQL. Among other things, it enables developers to query directly from L1 or L2 chains using GraphQL within the application.

Decentralization: The Web3 Developer’s Quandary

Based on the Web3 stack described by Debit, it’s clear that traditional web programming skills — from JavaScript to Rust — will stand you in good stead in Web3 development. But you’ll also have to learn how to program block chains using smart contracts, and acclimatize to the alien worlds of crypto file storage and off-chain solutions.

From a developer’s point of view, Web3 seems to be in a transition period at the moment, trying to find ways to move away from the reliance on centralized services like Coin base, Open Sea and Alchemy. But doing that is where all the complexity comes in, because true decentralization is really hard to achieve for daps.

I’ll be curious to see how the Web3 stack evolves over 2022, as it searches for ways to live up to its own decentralization hype. In the meantime, do check out Nader Debit’s Web3 developer’s guide if you want to learn more. There’s also a presentation he did last October at the Next.js Conf, in which he explains the stack (that’s where the feature image for this post comes from).

Amazon Web Services (AWS) is a sponsor of The New Stack.