Introduction to Web3 Development

Introduction to Web3 Development

An explanation of how everything fits together.

·

4 min read

When I first began my journey into Web3 Development, the most confusing concept to grasp was how to utilize my existing Web Development knowledge and apply it to Web 3 Development. There are plenty of tutorials out there but what I realized was not many go into depth on how all the different moving parts fit together.

In this series of tutorials, my aim is to guide those aspiring to enter the Web3 space by taking you through building a simple application from beginning to end while focusing on how everything fits together. Once you have this knowledge, you'll be able to break down all the technologies used and then focus on building up your skill set in each to become confident to succeed in this exciting new space.

With that being said, let's dive into an overview of the technologies we'll be using throughout this series to build your very own Distributed App (DApp). First let's explain the architecture of a Web 3 App and how it differs from your tradition "Web 2.0" app.

A typical Web 2.0 app will consist of a backend, database and frontend.

Backend

Backend code will handle the business logic of the app. This includes user login/logout, new user signup, fetching data from the database and storing data to the database. Typically this code will be written in Node.JS, Python or Java.

Frontend

The frontend is basically the client facing User Interface (UI) which lays out what the app looks like and what occurs when a user interacts with the website. The frontend will usually talk to a backend which in turn talks to a database to store/retrieve information. This code is typically written in Javascript, HTML and CSS. Javascript frameworks like React, Vue and Angular are also popular today.

Database

The database stores all the essential data for the Web App that needs to be retained. This data will differ based on the app in question but typically includes user profile settings, login information etc.

Untitled-2021-11-29-0949.png

Web 3 App architecture

The architecture of a Web 3 app differs slightly from that of a Web 2 app in that there is no centralized Web Server responsible for handling the backend logic. The backend logic of a Web 3 App is stored in a smart contract which lives on the blockchain. The blockchain acts as a decentralized state machine that is maintained by anonymous nodes on the internet. They ensure the state of the data on the blockchain remains synced and define rules on how those states can transition.

In very simple terms, we replace our backend and database with a collection of smart contracts with which we interact, reading and writing data to them as we would in a Web 2 App with a backend and database.

Untitled-2021-11-29-0950.png

How do we communicate with the Smart Contract via our Frontend?

This is where Web 2.0 meets Web 3. So we know that our frontend in a Web 3 App communicates with a Smart Contract hosted on the blockchain, but how do we read and write data to it?

Depending on the programming language you're using, there are a few libraries that make this easy. In Javascript, there are two popular libraries called Ethersjs and Web3js. They provide you with all the tools you'll need to make function calls to your smart contract to execute the instructions you want to perform. These libraries will require a 'provider' to connect to the blockchain. There are many popular providers such as Infura, Alchemy and Quicknode, to name a few.

When you compile your contract, an ABI file is produced similar to an API, and it will be a file that outlines which functions are available to be called and which variables you can read/write. The libraries mentioned above will use this ABI to know what can be done with the contract.

This is a very high overview and if you're feeling overwhelmed, don't worry. I'll be explaining each step of the process in the following tutorials as we build a complete app from scratch.

Untitled-2021-11-29-0951.png

Finishing Up

I hope this has given you a really brief overview of the difference in Architectures between Web2 and Web3 apps. As we go through the series, you'll hopefully have a much better understanding of how to build a Web 3 app.