Web 3.0 is such a concept that remains vague to non-technical people, although it has been known for about 20 years. All we know about it is just decentralized applications or security, but what exactly are they? This article will give you an explanation of web 3.0 architecture, breaking it down from layer to layer.<h2>From Web 2.0 to Web 3.0 architecture</h2>Since web 3.0 is the next level of web 2.0 - where all the data is centralized and controlled by giants like Facebook, Amazon, etc., we will dig into its structure first to know why web 3.0 is revolutionary.<img src="https://cdn.builder.news/news/11ecd5bbcc30a212a8e6023f659fee92.jpg" alt="Compare web 3.0 architecture vs web 2.0" title="web-3.0-architecture-vs-web-2.0" width="640" height="360">First, web 2.0 requires a constantly updated database to store essential data, such as users, content, reaction and so on. The database may be easily used by corporations for advertising and controlling user content, which may lead to data leaks.The second layer is the backend. Backend code (written in such coding languages as Node.js, Java, or Python) must define the platform’s logic. For example, what happens when users click a button, when a new user signs up and publishes new posts/articles?The third layer is front-end code (typically written in JavaScript, HTML, and CSS) that must define the platform’s UI logic. For instance, what does the site look like, and what happens when a user interacts with each element on the page?This is a good high-level summary of how most Web 2.0 applications work today. Long story short, frontend is the layer that the user directly interacts with, which will then deliver data to backend, then talk to the database. The code is hosted on centralized servers and sent to users via an internet browser.But as mentioned, this structure has limitations and users are controlled by big sharks. That’s why blockchain technology has unlocked a new direction for the architecture of Web 3.0 applications with huge changes.<h2>Web 3.0 architecture: Layers in detail</h2><h3>Backend in Web 3.0 architecture</h3>Decentralization is the key of web 3.0. By this difference, a centralized database or server is no longer needed while you can utilize blockchain instead. In web 3.0 architecture, the blockchain will act as a “state machine” — maintaining the program state and stability through validating the predefined rules. The state machine is spread between all the participants of a blockchain network and validation is archived through the consensus about program stability.<img src="https://cdn.builder.news/news/11ecd67fe7ec18b8a8e6023f659fee92.jpg" alt="Backend in Web 3.0 architecture" title="Backend in Web 3.0 architecture" width="640" height="427" class="lykafe1">The backend logic is implemented via smart contracts that will be later deployed to shared state machines (blockchain network). So backend resides in a peer-to-peer network that everyone can contribute by matching some criteria (ex. owning and locking cryptocurrency in order to vote the changes or make a proposal to the program). But how the front end works then?<h3>Frontend in Web 3.0 architecture</h3>The main frontend architecture in the case of Web 3.0 is focused on communication with smart contracts (decentralized programs). That’s the difference from the Web 2.0 frontend-backend communication.The state of the program is carried in every node in the blockchain network, and if you want to communicate with the smart contract, you have to communicate with one of the nodes, which could be:<ul><li>Third-party providers, such as Alchemy, Infura, and Quicknode, etc.</li><li>Your own node by running the state machine on your own;</li></ul>Launching the blockchain infrastructure is quite challenging, especially when you would like to scale up to add more nodes. There are times when a user provides will be handy, the downside is it creates a centralized dependency component.All providers are implementing JSON-RPC specifications to communicate with the blockchain networks. RPC, or Remote Procedure Call — is a request-response protocol that defines the rules to allow the client to send the message to the remote machine to execute the function and retrieve the response. In such a communication, the program runs as it is located on the client's machine, meaning the client doesn't know about the remote machine. All the communication is going through HTTP or Web Sockets.When providers are connected to the blockchain, the client is able to get information about the state of the blockchain. But how do clients write to the blockchain network? All the write request transactions need to be signed with the client's private key. Each transaction will cost a client a gas fee is a cryptocurrency that will go to appreciate other nodes (miners) which verify the transactions.Such provider as Metamask, is acting like a transaction signer and provider. It stores the private key in the browser and signs when the client makes a transaction request, it also connects to the blockchain network.<h3>Data storage in Web 3.0 architecture</h3><img src="https://cdn.builder.news/news/11ecd67fe7ec2095a8e6023f659fee92.jpg" alt="Web 3.0 architecture data storage" title="Web 3.0 architecture data storage" width="640" height="427" class="lykafe2">In web 3.0 architecture, the data is no longer centralized, it’s all yours. However, storing data in blockchain could be relatively costly for gas fees. It is recommended to use a non blockchain solution such as peer-to-peer storage — IPFS or Swarm - which is more reasonable.<ul><li>IPFS: this is a peer-to-peer file system protocol, which allows you to store data across a network of machines. Without native support from popular browsers, IPFS uses private or public gateways to connect to the network.</li><li>Swarm: it is similar to IPFS, with the only difference being that the system sustains through the smart contracts in the Ethereum blockchain network.</li></ul>In order to make your frontend be decentralized as well, you may use the same peer-to-peer storage solutions. And finally for simplifying querying the data stored in blockchain or peer-to-peer network: The Graph. It converts GraphQL queries into smart contract events and peer-to-peer gateways.ConclusionThis is just a simple analysis of web 3.0 architecture. Understanding the surface of web 3.0 application architecture will help you access this world in an easier way, although the following journey is full of challenges. But don’t worry because we will come back with the working flow of web 3.0 in the next articles!Follow our channels and subscribe not to miss any intriguing daily insights!

Is web 3.0 architecture still unclear to you? Let us make it simple for you in this article!

Web 3.0 architecture: Initial layers to enter the decentralized world

<h2>Web 2.0からWeb 3.0アーキテクチャへ</h2>Web 3.0は、すべてのデータがFacebookやAmazonなどの巨大企業によって集中管理されているWeb 2.0の次の段階であるため、まずその構造を掘り下げて、Web 3.0がなぜ革命的であるかを理解します。&nbsp;<img src="https://cdn.builder.news/news/11ecd5bbcc30a212a8e6023f659fee92.jpg" alt="Web 3.0 アーキテクチャと Web 2.0 の比較" title="web-3.0-アーキテクチャーvs- web-2.0" width="640" height="360"> まず、Web 2.0では、ユーザー、コンテンツ、リアクションなどの重要なデータを格納するために、データベースが常に更新される必要があります。データベースは、企業が広告やユーザーコンテンツの管理に容易に使用できるため、データ漏洩が発生する可能性があります。2つ目のレイヤーはバックエンドです。バックエンドコード（Node.js、Java、Pythonなどのコーディング言語で記述される）は、プラットフォームのロジックを定義する必要があります。例えば、ユーザーがボタンをクリックしたときや、新しいユーザーが登録して新しい投稿/記事を公開したときに何が起こるのでしょうか？3つ目のレイヤーは、フロントエンドコード（通常、JavaScript、HTML、CSSで記述される）で、プラットフォームのUIロジックを定義する必要があります。例えば、サイトの見た目はどのようになっているのか、ユーザーがページ上の各要素と対話したときに何が起こるのでしょうか？これは、現在のほとんどのWeb 2.0アプリケーションの動作方法に関する良い概要です。端的に言えば、フロントエンドはユーザーが直接対話する層であり、バックエンドにデータを送信し、データベースと通信します。コードは集中化されたサーバーにホストされ、インターネットブラウザを介してユーザーに送信されます。しかし、前述のように、この構造には制約があり、ユーザーは大企業によって管理されています。そのため、ブロックチェーン技術がWeb 3.0アプリケーションのアーキテクチャに新たな方向性を解き放ちました。<h2>Web 3.0アーキテクチャ：詳細なレイヤー</h2><h3>Web 3.0アーキテクチャのバックエンド</h3>分散化がWeb 3.0の鍵です。この違いにより、中央集中型のデータベースやサーバーは不要になり、代わりにブロックチェーンを利用できます。Web 3.0アーキテクチャでは、ブロックチェーンが「状態マシン」として機能し、プログラムの状態と安定性を、定義済みのルールを検証することで維持します。状態マシンは、ブロックチェーンネットワークのすべての参加者間で分散され、プログラムの安定性についての合意を通じて検証が行われます。<img src="https://cdn.builder.news/news/11ecd67fe7ec18b8a8e6023f659fee92.jpg" alt=" Web 3.0 アーキテクチャのバックエンド" title="web-3.0-アーキテクチャーvs- web-2.0">バックエンドロジックは、スマートコントラクトを介して実装され、後で共有状態マシン（ブロックチェーンネットワーク）にデプロイされます。バックエンドは、いくつかの基準（例：変更に投票したり、プログラムへの提案を行うために暗号通貨を所有・ロックする）に一致することで、誰もが貢献できるピアツーピアネットワークに存在します。では、フロントエンドはどのように動作するのでしょうか？<h3>Web 3.0アーキテクチャのフロントエンド</h3>Web 3.0のフロントエンドアーキテクチャの主な焦点は、スマートコントラクト（分散型プログラム）との通信にあります。これは、Web 2.0のフロントエンド-バックエンド通信との違いです。プログラムの状態は、ブロックチェーンネットワーク内のすべてのノードに運ばれスマートコントラクトと通信する場合は、以下のいずれかのノードと通信する必要があります。<ul><li>サードパーティプロバイダー（Alchemy、Infura、Quicknodeなど）。</li><li>状態マシンを自分で実行して独自のノードを作成します。</li></ul>ブロックチェーンインフラストラクチャを立ち上げることは、特にノードを追加してスケールアップしたい場合はかなりの課題です。ユーザープロバイダーが便利な場合もありますが、その欠点は中央集中型の依存コンポーネントが作成されることです。すべてのプロバイダーは、ブロックチェーンネットワークとの通信にJSON-RPC仕様を実装しています。RPC（Remote Procedure Call）は、クライアントがリモートマシンにメッセージを送信して機能を実行し、レスポンスを取得するためのルールを定義するリクエスト-レスポンスプロトコルです。このような通信では、プログラムはクライアントのマシン上にあるかのように実行されます。つまり、クライアントはリモートマシンについて知りません。すべての通信はHTTPまたはWebソケットを介して行われます。プロバイダーがブロックチェーンに接続されると、クライアントはブロックチェーンの状態に関する情報を取得できます。しかし、クライアントはどのようにしてブロックチェーンネットワークに書き込みますか？すべての書き込みリクエストトランザクションは、クライアントの秘密鍵で署名する必要があります。各トランザクションには、他のノード（マイナー）に対するガス料がかかります。これは暗号通貨として扱われます。Metamaskなどのプロバイダーは、トランザクション署名者兼プロバイダーとして機能します。ブラウザに秘密鍵を保存し、クライアントがトランザクションリクエストを行うと署名します。また、ブロックチェーンネットワークに接続します。<h3>Web 3.0アーキテクチャでのデータストレージ</h3>Web 3.0アーキテクチャでは、データはもはや集中化されず、すべて自分のものです。ただし、ブロックチェーンにデータを保存すると、ガス料がかなりかかることがあります。そのため、ピアツーピアストレージ（IPFSやSwarm）のような非ブロックチェーンソリューションを使用することが推奨されます。これはもっと合理的です。<ul><li>IPFS：これは、ネットワーク上の複数のマシンにデータを保存できるピアツーピアファイルシステムプロトコルです。人気のあるブラウザからのネイティブサポートがないため、IPFSはプライベートまたはパブリックゲートウェイを使用してネットワークに接続します。</li><li>Swarm：IPFSに似ていますが、違いは、システムがEthereumブロックチェーンネットワーク内のスマートコントラクトを通じて維持されることです。</li></ul>フロントエンドを分散化するためにも、同じピアツーピアストレージソリューションを使用できます。そして最後に、ブロックチェーンやピアツーピアネットワークに保存されたデータのクエリを簡略化するために、The Graphを使用します。これは、GraphQLクエリをスマートコントラクトイベントおよびピアツーピアゲートウェイに変換します。<h2>結論</h2>これは、Web 3.0アーキテクチャの簡単な分析です。Web 3.0アプリケーションアーキテクチャの概要を理解することで、この世界にもっと簡単にアクセスできますが、その後の旅は困難に満ちています。しかし、次の記事でWeb 3.0のワーキングフローに戻ってくるので、心配しないでください！<div class="pr-block-special">免責事項 この記事は、参考としてのみ使用されることを意図しています。提供されるそのような情報は、投資または取引戦略が特定の名前に適しているというアドバイスまたは推奨を構成するものではありません。</div>

Web 3.0アーキテクチャはまだ理解できないですか？ この記事で簡単に説明しましょう！