Skip to content

Instantly share code, notes, and snippets.

@yashovardhan
Last active February 2, 2022 22:57
Show Gist options
  • Save yashovardhan/fb85e2827644472e6ce8707e75a77963 to your computer and use it in GitHub Desktop.
Save yashovardhan/fb85e2827644472e6ce8707e75a77963 to your computer and use it in GitHub Desktop.

If you’re a beginner like me in the Web3 space, the initial inertia of understanding things might be overwhelming for you. To be honest, when I started up, I was bewildered about what to study and whatnot. Some people say this blockchain is better others say another. If you Google around looking for a Web3 tech stack, you’ll find everyone telling you a different explanation of what it is in their perspective and why their particular product is the best out there to start developing over it. A typical marketing blog is what I find always, I’d say.

So when I started writing this blog, my focus was just one thing - let’s transition our knowledge from the Web2 space to Web3 space and know which technologies support what. Once that is figured out, it will become far easier to choose and start our developer journey into it.

But first, we need to understand what we mean by Web3 - the thing people say might change the internet as we see it.

What is Web3?

One of my friends mentioned recently to me that Web3 is just another fancy name for the blockchain ecosystem. To be honest, he’s partially correct, at the same time wrong on a whole different level. Although the foundation of Web3 is centred around blockchain, when you start developing over it, you’ll realise that blockchain is just a part of it. To draw a comparison, a blockchain in a Web3 app might be similar to how a database might be for a typical web app you might develop (Web2).

So if we try to define Web3, we can say that it is the concept that aids the development of fully decentralised applications. Yes - the same decentralised internet we heard from Richard in Silicon Valley! But to build this, we do not have a compression engine platform like what he had built. Instead, we have a range of protocols and platforms that enable this development system. These protocols are a set of rules that govern how your application works, while multiple platforms facilitate the creation of your application.

Okay, fine, but why do we need decentralised applications in the first place?

The most significant benefit of creating a decentralised application is Ownership and Identity. Ownership of data, content, literally everything with your self-identity - a concept that got blurred with the coming of age of these top institutions like Google and Facebook.

Another significant benefit people talk about is composability, which is one of the central pillars of Web3. Every single software company out there right now is focused on collecting user data, which is their single biggest asset and differentiates them from one another. Not the product, but the data they hold. Companies competing with each other, with similar UI/UX and slightly different business logic are valuable independently because of the “data” they have aggregated. This is what Web3 is actually going to disrupt, making every application composable by sharing & consuming their data between different applications. This is the most exciting and interesting aspect of Web3. Making the web truly composable!

But that’s not all; with the high amount of trust and reliability these applications bring in, the possibilities are endless; we haven’t even imagined what the future might look like with decentralised applications being omnipresent. I feel Web3 might bring the same revolution that open source brought into the developer ecosystem.

Understanding the Web3 architecture

Now that we have defined Web3, we need to understand how these protocols and platforms work together to help us build these decentralised applications.

When we imagine a general web app, we envision an architecture constituting the follows:

web2 architecture

Although I’ve not depicted things like caches, queues etc., a general over the top architecture looks like this.

For a Web3 app, The frontend will remain the same, but some exciting changes start to happen in the backend side of things. Let’s see how that works:

web3 architecture

If we draw a comparison between Web2 and Web3, the Blockchain Server is doing the heavy lifting and managing our data, which is decentralised into a network of blockchains. Since it is expensive to store directly on the chain, we have some off-chain File Storage and a P2P Database facilitating the storage of data. Finally, to build a secure layer, we have a proper Wallet & Signer based Authentication interacting via an API layer directly to the node server.

Please note that this is just an over the top depiction of the architecture. In reality, we have much more complex applications and need architectural params from both Web2 and Web3.

The Web3 Tech Stack

In the previous section, we learned what a Web3 architecture generally looks like. Now, let’s deep dive into each of these components to understand the tech stack a bit better.

So let’s start from the bottom:

Blockchain

If I talk about selecting a blockchain to build upon, it is one of the most challenging tasks one need to decide on. It is like choosing your programming language. Every single one of them works; a few are better in specific cases and others for other use cases.

Although, I might recommend starting with Ethereum Virtual Machine (EVM) with Solidity. This is because of the massively present developer community around it. EVM acts as the virtual machine, which is the bedrock of Ethereum’s entire operating structure. Ethereum brought in the concept of smart contracts and is the most used blockchain out there. Solidity is the language used to make smart contracts. It is very similar to JavaScript in syntax, which might be helpful if you’re a Web2 developer. Under the hood, Solidity is compiled into low-level instructions called opcodes for the EVM to interpret.

When you’ve learnt this, it will be easier to understand the concepts of other blockchains (like Solana), sidechains (like Polygon), Ethereum layer 2s (like Immutable-X) etc.

Blockchain Node Server

As for deploying any application, you need a server; a blockchain node does a similar job for blockchains. A blockchain node is an open-source, cross-platform runtime that allows developers to create various services. A P2P (Peer to Peer) protocol allows nodes to communicate within the network and transfer information about transactions and new blocks. You can self run blockchain nodes or get a Node service provider like Quicknode, Moralis, Infura etc. that offer APIs to create automated flows.

For starting up with Ethereum development, I’d highly recommend checking out the Remix IDE - it is the best place for a beginner to learn Solidity and Ethereum concepts. For setting up your own development environment within your machine, I might recommend checking out this blog. In all, you will be needing tools like MetaMask, Truffle, Ganache, Solc for setting up your own local blockchain development environment,

P2P Database

The first question that anybody would ask here is: Why do we need a database when we’re using blockchain in the first place? Additionally will it not hinder our idea of a decentralised application?

Well, as a simple answer to that, storing data on a blockchain is slow and expensive. We need an additional database so that we can access data off-chain making sure that we’re not accessing the chain again and again. To have that decentralisation part of it, we use peer to peer or P2P databases that store and host all of the data in streams to eliminate centralised database servers, blockchains, or local storage. Think about how your torrents get downloaded!

The Ceramic network is the most common decentralised database provider out there, as I know of personally.

File Storage

Like every other application, we need a dedicated file storage system as well (similar to Amazon S3 for Web2 applications). Databases essentially are tabular data, while file storage is actually that folder based data you need to store your large media files. IPFS is the most common p2p file system protocol out there having huge community support around it as well.

Authentication in Web3

Authentication in my honest opinion is one of the most important aspects of Web3. Without the ability to log in users into the blockchain, one cannot access their wallets and the concept of Web3 fails at the point itself.

If we look at traditional login methods in the Web2 world, we have a simple form like structure where the user details are stored in a database and cross-checked for verification. Additionally, services like Google, Facebook offer OAuth where they share some key details to the app directly, making the process seamless for the end-users. Although this approach is convenient, it is totally against the fundamental concept of a decentralised application.

In Web3, we do not have the user’s personal data, but actually, we have wallets, wherein cryptographic signatures are used to prove ownership of those wallet addresses. As a developer, it is highly necessary to know how to access and interact with a user’s wallet and address.

The interesting aspect of owning a blockchain wallet is that once a user loses their public and private keys to the wallet address, no one can recover it for them. There are plenty of stories of crypto millionaires who have lost it all by storing their private key in a hard drive that was lost. Many projects have tried different ways to go around this and help users recover that key. For example, MetaMask uses the concept of 12 word Mnemonic Phrases, which goes through a BIP39 Algorithm to generate the array of unique Account addresses, public and private keys for you, stored in your MetaMask account. But then again, remembering 12 randomly generated words in proper order for each of the wallet account groups a user owns is a difficult task.

While trying to figure out a solution to a bad UX like this, I encountered a project called Web3Auth. It is one of the most popular solutions for bridging the gap between the Web2 and Web3 worlds for new users. It is a simple auth infrastructure that gives those OAuth capabilities to Web3 applications, which I think can be a huge thing for a project onboarding process. I would definitely recommend checking it out.

Implementing the Frontend

To be honest, a lot of developers might not know but the frontend technologies for Web3 and Web2 are actually the same. The only difference comes in is where you need to reimagine the UX of the application because the authentication, processing in the blockchain and general flow of the application are slightly different from general Web2 applications.

I would recommend going on with React & Next.js since I feel that most developers out there are using this right now in the Web3 world. I might be biased but almost every other project is currently featuring a React integration.

For the client-side backend, things get a bit different. Here’s is where you need to understand how to interact with the blockchain you’ve created. Libraries like web3.js facilitate this and you need to have a proper understanding of how they work and interact with the blockchain (through their built-in providers) to have your app function properly.

Conclusion

In all, I believe Web3 comes with a very interesting opportunity for new developers out there to try out something different and break away from the traditional aspects of software development. At the same time, drawing this comparison and understanding where to start from is extremely necessary for anyone looking to build decentralised applications, since there always will be a combination of both in the world. Web3 is definitely here to stay, but this does not mean that the concepts of Web2 are dead. Learning the new tech stack while understanding their key usage and characteristics is the only way a developer can make their mark in this new industry.

I hope this blog might have helped you understand some of the key aspects of how a Web3 app is put together. Please do let me know if I’ve missed or messed up something up because I’m still a beginner trying out different stuff in this new world :)

Cheers!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment