Introduction

Web3 is booming and there is no stopping that. It is not new but now is the time it is reaching to masses. This is the next big thing in web development. The job opportunities in the field of web3 are increasing day by day. There is high demand for blockchain developers, Web3 developers, and other jobs associated with web3. There are many jobs and opportunities in web3 and it will rise in the future.

To ace web3, the base for web3 has to be solid. For a beginner starting in the web3 development space, it can be hard to understand certain terms and concepts.

So today, we are going to look into the different concepts of web3 that will form the base for further learning in the domain. These topics are based on my struggle when I first started in the web3 space. It will help you to create a base for the topics, from there the sky is the limit. So let’s get started.

Prerequisite

Before diving deep into the web3 world, I assume you have worked on at least one web development project and have knowledge about the following

• Frontend(HTML, CSS, JAVASCRIPT)
• One Javascript Framework like React, Vuejs, etc.
• Little of Backend(If you don't know, you can learn in the web3 journey)

These skills are essential to understanding Web3 and being able to create a project around it. Web3 will be an extension of your web development knowledge. So before starting the Web3, you need to have prior knowledge of web development.

What are Web2 and Web3?

Let’s just understand the meaning of these two terms Web2 and Web3.

Web2

Web2 is the second revolution of the internet. It refers to the period in which the number of the content creator on the web has increased. Previously, Web1 was mostly end-user-oriented. It was for consuming the information.

Web2 started with the rise of social media which let the end-user create content on the internet. This leads to the popularity of the content creator on the internet and eventually becoming a celebrity. During this period the content creator and consumer both grow together.

Web2 is also known for the centralization of the data. Big companies mostly control the data of the entire world. One company owns multiple companies to acquire different data from multiple sources. This become one of the problems for the web2 and led to the new revolution of the internet.

Web3

Web3 is considered the next revolution of the internet. Web3 is the decentralization of data through blockchain-based applications and the use of the token for economics. The term "Web3" was coined in 2014 by Ethereum co-founder Gavin Wood. It is only gaining popularity recently due to so many resources and platforms available to develop the blockchain-based application.

Developers has mixed feeling about web3. Some considered it a trend that won’t last long. The experts in the field do consider the next big thing in webspace. I do believe in Web3 due to following reasons:

• Community is building in recent times for learning and developing
• There are startup ideas revolving around web3
• Companies are building tools that help the development process
• There are grants available for web3 projects

I highly recommend web developers to try out the web3 at least for once. Both Web2 and Web3 will co-exist with each other in the future. Let’s move forward to understand web3 better.

Blockchain

Blockchain is a non-modifiable ledger system that records the transaction and it is shared across the node i.e, the computer participating in the network.

The blockchain was popularized by a person (or group of people) using the presumed pseudonymous name Satoshi Nakamoto in 2008. Blockchain solved the problem of decentralization of data in Web2. As the data is shared across the different nodes, there is no one particular person or organization having all the data.

Web3 applications are based on the blockchain concept. Bitcoin is a use case of blockchain. It works as a ledger system for payment but blockchain can be used for any data transaction. There is various network based on blockchain such as Ethereum, Polygon, Solona, Avalanche, and other.

dApp

Dapp or Decentalized application are those application that uses smart contract, which are deployed on a blockchain netwrok for its functioning.

Dapp(Decentralized application) is the same application as a web application with the only extension of smart contracts. You can divide the Dapp into the following parts:

Frontend

This is as it is in web development. You need to have your front end developed with HTML, CSS, and JavaScript. You can use any framework such as React, NextJS, or anything else.

Backend

You can use the backend to interact with the smart contract deployed on the network. You can implement this in your frontend too, but separating the frontend and backend will help you manage the app easily.

Smart Contract

Smart Contract will be deployed on the blockchain network. Our application will interact with it for the functioning of the application.

NFT Marketplace is an example of dApp. That’s pretty much the basic format required for the development of a dApp.

Smart Contract

Let’s discuss the smart contract in detail.

Smart contracts are computer programs that are non-modifiable once deployed, and automatically executed when the criteria defined in it meet.

In simple words, smart contracts are computer programs written in a programming language. These are non-changeable i.e, can’t make changes once deployed. This contract has functions in it, which can be called and executed when required. It can be automatically executed if defined in a certain way. Smart Contracts form the backbone of dApp.

These contracts are deployed on blockchain-based networks. There are test networks, which are used during the development stage to verify the working of the application.

Gas Fee

Once the smart contract is deployed, the execution of the smart contract needs gas fees. Smart Contracts are executed in a Virtual Machine. Ethereum manages the smart contract with the Ethereum Virtual Machine (EVM). These gas fees are paid in terms of cryptocurrencies. Ethereum uses Ether.

This gas fee depends on the complexity of the smart contract. More complex smart contracts require more gas fees. This is implemented to prevent numerous smart contracts and complex smart contracts from being executed on the Virtual Machine. A complex smart contract can overload the system.

Solidity

A smart contract can be written in various programming languages such as Rust, Yul, and JavaScript. One programming language that is recommended and made for the purpose is Solidity. It is an object-oriented programming language. It is influenced by C++, Python, and JavaScript.

Hello World in Solidity

Let’s do a Hello World in Solidity and have a basic knowledge of the syntax.
The extension for a solidity file is .sol. At the top of every solidity file, we define the license of the code. It is not mandatory but recommended, without it, the compiler will give you a warning. We comment down the license.

If you don’t want to define the license of the code or it is not open-source, you can use UNLICENSED. Otherwise, you can use a variety of licenses for your code such as MIT, Apache-2.0, or GPL-2.0. You can find more on it here.

// SPDX-License-Identifier: MIT

After defining the license of the code, we define the compiler version of the solidity to use. It starts with the keyword pragma. It is used to enable a certain feature of the compiler. After this, we have solidity then the version of the compiler. Currently, the latest version of solidity available is 0.8.13. You can always use the relational operator to define the version.

pragma solidity >=0.7.0 <0.9.0;

After this, we have to define the contract with the keyword contract followed by the name of the contract. After that, we have curly brackets. Within those, we define the code for the contract.

contract helloworld{
  // CODE
}

Within the contract, we define the data type for storing the value. As the Hello World! is the string we proceed with the keyword string. There is various data type such as boolean, integers, address, string, etc. After string, we can define the visibility quantifiers. There are four of these, that is, external, internal, public, and private. You can know it better here. We are going to use the public.

Now define the name of the variable and assign the value to it.

string public myString = "Hello World!";

All together, the code will look like this:

// SPDX-License-Identifier: MIT
pragma solidity >=0.7.0 <0.9.0;
contract hello{
    string public myString = "Hello World!";
}

Learning solidity and mastering it will help you in your career. Solidity for Web3 is like JavaScript for Web Development. In the future, there will be high demand for solidity developers for creating and managing smart contracts.

Crypto Wallet

A cryptocurrency wallet is a Web-based account or software in a mobile device that allows people to buy, sell, and trade cryptocurrency coins and tokens.
-PCMag

Crypto wallets store the public/private key of your account. These wallets are essential for browsing dApps. The wallet can be in the form of a hard wallet such as a USB stick or an application format such as Metamask.

A Crypto wallet will be used for:

• holding digital assets such as tokens, currencies, and NFTs
• sending and receiving the digital assets
• browsing the dApps
• interacting with the smart contracts

Some examples of Crypto Wallets are:

• MetaMask
• CoinBase
• Electrum

I use Metamask wallet as a chrome extension during the development of dApps. It’s easy to install and create an account. Most of the dApps have support for MetaMask which makes browsing apps simple.

For Development, you can easily add different networks including the local environment created using the Ganache or other applications. I recommend you to use it.

Interaction between Smart Contract and Environment

Our development environment consisting of frontend and backend needs to interact with smart contracts. To establish a connection with the smart contract we need SDK and libraries. These SDKs will also manage the account with the crypto wallet.

There are various libraries for such purposes. A few prominent ones are:

• Ether.js
• Web.js

Third Web

Thirdweb is here to help you to increase the deployment period of dApps by providing them with tools and SDKs. Thirdweb has various smart contracts such as ERC- Token, NFTs, NFT Marketplace, Voting, and others. You can directly deploy them from their website. They will help you in creating, deploying, managing, and interacting with the smart contract. Now, they have quite good documentation that helps you understand their tools.

They have SDKs and libraries such as buttons for connecting dApp to the wallet. They provide libraries that help you to establish a connection between the dApp and the smart contract.

Local Blockchain Development Environment

During the development of dApp, it's not recommended to deploy smart contracts directly to the mainnet. You can use testnet too but it depends on the connection and availability of gas fees and tokens for the testnet. One solution is to use a local blockchain network that will work as the mainnet but will be available locally.

Ganache is one such application that provides you with a local blockchain network. It has both terminal and GUI-based applications. If have used the GUI version and it’s awesome for development. It's quick and has 10 accounts created already. You can deploy and interact with the smart contract easily.

Conclusion

When I started in web3. I was very confused with all the above terminology and concept. This makes me hard to understand certain topics. This blog post will serve beginners understand the term and concepts that are frequently used in the web3 space.

The journey in Web3 might be complicated sometimes. Understanding some complex concepts and tools can be hard but when you have a solid base, you will emerge victoriously. I have explained all the topics in a basic format. You can learn more about the above topics in deep through different articles and courses based on a particular topic. If you want to deep dive into the web3 after this article you can refer to my Github repository awesome-web3.0 for free resources. Here is the link:

If you feel something is missing, feel free to comment down, and I will edit the article. I hope the article has helped you in understand web3 clearly. Thanks for reading the blog post.