Discovering the Future of the Internet: A Intro to Web3 Technology (Event)

👉 Quick note: This presentation is not meant only for technical people; most of the topics are explained in general terms to give you a broader understanding of how things work. If a topic is more technical, don't worry and continue to the next one.

🌐 What is Web3?

History of the Web

Web 1.0: Read-Only (1990-2004)

During the Web 1.0 era, websites were mainly static and owned by companies. There was very little interaction between users, and individuals rarely produced content.

📽️ Presenter notes: In 1989, at CERN in Geneva, Tim Berners-Lee was busy developing the protocols that would become the World Wide Web. His idea was to create open, decentralized protocols that allowed information sharing from anywhere on Earth.

Web 2.0: Read-Write (2004-now)

The Web 2.0 period began in 2004 with the emergence of social media platforms. Instead of being read-only, the web evolved to be read-write. Companies not only provided content to users but also began to offer platforms to share user-generated content and engage in user-to-user interactions.

📽️ Presenter notes: Web 2.0 also introduced the advertising-driven revenue model. While users could create content, they didn't own it or benefit from its monetization.

Web 3.0: Read-Write-Own

Web3 has become a catch-all term for the vision of a new, better internet. At its core, Web3 uses blockchains, cryptocurrencies, and NFTs to give power back to the users in the form of ownership.

Summary

💡 Note: “Web1 was read-only, Web2 is read-write, Web3 will be read-write-own”

⚡️ What are the benefits?

Example:

In Web 2.0, users create content but do not own it. If I create a video on YouTube, it belongs to Google and I get a share of the revenue.

Here are 5 benefits of using Web3:

1. Ownership: With Web3, you can own your data, identity, and digital assets without needing a middleman.
2. Transparency: Web3 uses blockchain technology, which makes all transactions and data transparent, secure, and tamper-proof.
3. Security: Web3 uses advanced security measures like cryptography and decentralization to protect against hacking and data breaches.
4. Trustless Transactions: Smart contracts in Web3 eliminate the need for third-party intermediaries, allowing for direct and secure transactions between parties.
5. Interoperability: Different blockchains can communicate with each other, making it easy to transfer data and assets across different networks.

⚠️ What are the limitations?

Here are 5 limitations of Web3:

1. Technical barrier to entry: Using Web3 requires a certain level of technical knowledge that may be daunting for some users. Users must comprehend security concerns, understand complex technical documentation, and navigate unintuitive user interfaces.
2. Education: Web3 introduces new paradigms that require learning different mental models than the ones used in Web 2.0. Educational initiatives informing Web2 users of these Web3 paradigms are vital for its success.
3. Interoperability: Different blockchains can communicate with each other, but this process is not yet standardized or easy to use.
4. Scalability: Blockchain technology is still in its early stages, and scalability is a major challenge that needs to be addressed before Web3 can achieve mass adoption.
5. Accessibility: Wallets are not yet standard for browsers, making it difficult for users to interact with Web3 applications.

💡 “Web3 isn't difficult, but it is different”

🕵🏽‍♂️ What problems is Web3 trying to solve?

Web3 is trying to solve several problems, including ownership of data, identity, and digital assets, and the lack of transparency, security, and trustless transactions in Web2. It aims to provide a decentralized, transparent, and secure internet that gives power back to the users in the form of ownership. Additionally, Web3 is trying to address the issues of technical barriers to entry, education, interoperability, scalability, and accessibility.

Practical comparison

🤖 How does this all work?

Blockchain

Blockchain technology is a type of computer system where information is stored in blocks that are linked together. Once information is added to a block, it cannot be changed, making it very secure and difficult to hack or manipulate. Blockchains are often used for financial transactions but can also be used for other types of data storage and sharing.

Blockchain live demo

Live demo starts at 7:36.

Ethereum Smart Contracts

Ethereum smart contracts are self-executing programs that run on the Ethereum blockchain. They are like traditional contracts, but instead of being enforced by legal means, they are enforced by code. Smart contracts can be used for a variety of purposes, such as managing digital assets, executing complex financial transactions, and creating decentralized applications (dApps). Once a smart contract is deployed, it cannot be modified or deleted, making it a secure and reliable way to automate contractual agreements.

👨🏽‍💻 What changes for developers?

Frontend calling API to do some operation

// actual code for calling API
import axios from 'axios'

const axiosClient = axios.create({
  baseURL: `https://www.example.com/api/v1`,
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  }
});

// for list of endpoints will need to use swagger
axiosClient.get('/products')
// or
axiosClient.post('/product', JSON.stringify(data))

• to know what enpoint is at what path, and what are it’s inputs we need to have some kind of api docs (swagger)

Frontend calling Ethereum Smart Contract

import { ethers } from 'ethers'

// setting up external node
const url = 'ADD_YOUR_ETHEREUM_NODE_URL’;
const provider = new ethers.providers.JsonRpcProvider(url);

// setting up contract
const address  = 'CONTRACT_ADDRESS_FROM_REMIX';
const abi = [
    {
        "inputs": [],
        "stateMutability": "nonpayable",
        "type": "constructor"
    },
    {
        "inputs": [],
        "name": "getLatestPrice",
        "outputs": [
            {
                "internalType": "int256",
                "name": "",
                "type": "int256"
            }
        ],
        "stateMutability": "view",
        "type": "function"
    }
];

const contract = new ethers.Contract(address, abi, provider);

contract.getLatestPrice()
	.then((result) => {
	  console.log("$" + result.toNumber() / 100000000);
	});

• after we inicialize contract typescript knows all the functions and parameters from ABI
• we can automate getting ABI (smart contract docs) by address:

curl "<http://api.etherscan.io/api?module=contract&action=getabi&address=0xe7c29cba93ef8017c7824dd0f25923c38d08065c&format=raw>" > Token.json

Solidity Smart Contract example

// SPDX-License-Identifier: MIT
pragma solidity 0.8.8;

import "./PriceConverter.sol";

error NotOwner();

contract FundMe {
    using PriceConverter for uint256;

    address[] public funders;
    mapping(address => uint256) public addressToAmountPaied;

    uint256 public constant MINIMUM_USD = 50 * 1e18;
    address public immutable i_owner;

    constructor() {
        i_owner = msg.sender;
    }

    function pay() public payable {
        require(msg.value.getConversionRate() > MINIMUM_USD, "You've paid less then minimum amount");
        funders.push(msg.sender);
        addressToAmountPaied[msg.sender] += msg.value;
    }

    function withdraw() public onlyOwner {
        for (uint256 funderIndex = 0; funderIndex < funders.length; funderIndex++) {
            address funder = funders[funderIndex];
            addressToAmountPaied[funder] = 0;
        }

        // reset founders array
        funders = new address[](0);

        (bool callSuccess, ) = payable(msg.sender).call{ value: address(this).balance }("");
        require(callSuccess, "Funds where not withdrawen");
    }

    modifier onlyOwner {
        if (msg.sender != i_owner) revert NotOwner();
        _;
    }
}

💡 “This doesn't mean that all services need to be turned into a dapp. These examples are illustrative of the main differences between Web 2 and Web 3 services”

🏛 Web3 architecture

Step by step walkthrough, of migrating casual Web app to decentralized web app architecture

📓 Presentation dictionary

• ABI
  • Application Binary Interface
  • In a Web3 context, an ABI defines how to encode and decode data from a smart contract
• Address (Wallet)
  • crypto address is a unique set of alphanumeric characters that can send and receive cryptocurrency and NFTs on a blockchain
• Blockchain
  • Blockchains consist of “blocks” of data and networks of nodes
  • each block is a collection of transaction information, while each node holds a record of all verified transactions
• Dapp (Decentralized Application)
  • any application built on a blockchain
  • Dapps often use smart contracts to provide functionality automatically
  • Dapps are also known as Web3 applications
• IPFS (Inter Planetary File System)
  • distributed system for storing and accessing files, websites, applications, and data

📹 Recording link

🔗 Used literature

What is Web3 and why is it important? | ethereum.org

Web2 vs Web3 | ethereum.org

Blockchain Demo

The Architecture of a Web 3.0 application

Web3 Dictionary - Moralis Web3