Foresight Ventures: Crypto-Native DApp Architecture
Original Author: msfew@Foresight Ventures
Original Author: msfew@Foresight Ventures
first level title

0. Web2 App Architecture
When we develop a modern toC application, whether it is Web App, Mobile App or Desktop App, their basic architecture can be summarized by the following three terminals:
From left to right are:
Front-end: Also called client. The front-end of the application is the page that the user sees in the browser, or the App used in the mobile device. The front-end controls the view and display.
Database: As the name suggests, the database is dedicated to storing data. The backend will read or modify the contents of the database.
Why does the software need these three terminals? Why is the front end not directly connected to the database? Why is there a back end in the middle? There are actually many reasons for this:
secondary title
a) Engineering
Developer's perspective: The front end of a modern application does not have the energy to deal with complex data models and state management of views at the same time. From an engineering perspective, it is not good for every engineer to maintain a bloated system with all knowledge and omnipotence. In addition Many other logics do not require the front-end to participate in the display, such as the inventory of the e-commerce platform.
Architectural perspective: each end has its own set of rules and language to describe data. The front end uses human-understandable ideas to build pages, the back end uses object-oriented language to manipulate data, and the database uses relational algebra language to access physical storage . There is no way to specify a set of universal rules to unify the three terminals. At the same time, because each language performs its own duties, the performance emphasis is also different.Hasurab) communicationODataProtocol perspective: Observing the figure, you can see that the two connection methods connecting the three terminals are different. Usually, the front-end and back-end of the toC application communicate using the HTTP protocol, while the back-end and the database have different protocols, such as MySQL and MongoDB has a different protocol. We can pass a thin backend (GraphQL +
) to achieve the effect similar to the front-end direct connection to the database, there is also a protocol such as CouchDB for such communication, but it still does not solve other shortcomings.
Data mapping perspective: the front end processes UI, the back end processes objects, and the database processes data. The connection between the front end and the back end uses the mapping between the UI and the object, and the connection between the back end and the database needs to be mapped using object relationships.
c) Security
Data perspective: Because more and more applications we use are web-based applications at present, if the front-end is directly connected to the database, it is difficult to prevent data leakage and Hacking. In theory, the database can control data visibility through various authentication methods, but another huge significance of the existence of the backend is to ensure that it operates in a trusted environment and in a designed way, and excludes known security question.
secondary title
d) Enlightenment of Web2 application architecture to DApp
From the above three perspectives, we have analyzed why Web2 applications have a three-terminal architecture, and this has also brought us some thoughts on blockchain DApps:
Communication: Corresponds to different consensus mechanisms of the blockchain network. These different mechanisms also make the intercommunication of the blockchain a difficult problem, but there are also interoperability protocols such as Cosmos and Polkadot, which try to link the entire network. But from the perspective of Web2 applications In general, this does not mean it is the best solution. Data mapping can correspond to account-oriented or UTXO design patterns, both of which have their own advantages and disadvantages in terms of performance, privacy, and development complexity.
Security: Corresponding to the decentralization of the blockchain and the idea of Verify, Not Trust. Security is more important in the blockchain field, so verifiable, even completely transparent and open methods are required for data processing and data Visibility is adjusted to achieve transparent and permissionless DeFi, open and proprietary NFT, and the most important composability of DApp.

first level title
Web3 DApp Architecture
Most Web3 DApps follow the following architecture:
Simple applications (pure on-chain data and uncomplicated interactions), for example: Uniswap and purely on-chain NFT projects.
Frontend is no different from Web2 App.
Blockchain as a database.
Most Web3 DApps follow the following architecture:
secondary titlea) Web3 DApp refinement components:
More specifically, the workflow of a complete Web3 DApp involves
more components
Frontend: browser, wallet, page.
Front-end and back-end communication: node Provider, index protocol.
Back-end database communication: node Provider, storage network gateway.

Database: Smart Contract State and Decentralized Storage Network.
secondary titleb) How does Web3 DApp have no backend?,The existence of Turing-complete smart contracts on the blockchain network,

Make blockchain the best serverless platform
Or it can be regarded as the World Computer of Trustware. The data and back-end logic of the application can be implemented in the smart contract.
Compared with serverless functions, smart contracts are better, and they also create better architectures and patterns than Web2 applications:
Payment method: Serverless functions are usually paid by developers, while most of the interaction costs of smart contracts are paid by users, and users will willingly pay for space on the chain.
Execution environment: Serverless functions have a very flexible execution environment, while the execution environment of smart contracts has few choices, but it is very lightweight.
Deployment environment: Serverless functions are deployed on a centralized cloud service platform, while smart contracts are deployed on a decentralized and permissionless decentralized network. In addition, the operating costs of the network are also transferred from the centralized platform to the miners, and the economy The system will be more autonomous.
However, for a truly complete application, it is impossible to achieve complete functions only through the smart contract as the backend, so other components such as the Keeper network or the oracle machine are required.
2. Web3 Crypto-native DApp ArchitectureIn fact, the complex application of Web2 is far more than the three terminals we have outlined before, and requires a lot of modularization, middle layers and horizontal expansion..

architecture split
secondary title

a) Frontend ⇒ Open Source + Self-hosted Frontend
For the development of Web3 front-end, I think there are two major trends:web3-reactandCenter.devChoice of framework: Among the two front-end frameworks React and Vue, React occupies a dominant position in Web3, mainly because of the accumulation of ecology and various components, such asand. But I personally feel that the dominance of the React project is always in the hands of Meta,Open Source License ChangesIt has also caused controversy many times, so if you have the opportunity to use the Vue framework with some
rely as little as possibleFor front-end development, it is still better than React.Front-end Hosting: The front-end is DApp hacked (malicious hijacking or script injection) and censor (both in the source code of Uniswap and Flashbots)OFAC's Blacklist; ) of the hardest hit area. Yearn Finance very earlyEncourage users to host the front end of the DApp themselvesTrustless.fiHost the front end on a persistent storage network like ArweaveIt can also ensure that the front end of each version will not be deleted and is permanently accessible;,The concept of a front-end Marketplace is also proposed, allowing users to choose from multiple community-hosted front-ends, which can also ensure neutrality and "front-end diversity"; other blockchain browsers such as Etherscan are actually consideredokcontractUsers can interact directly through it, or there are also dedicated applications for contract generation front-ends, such ascodeisspeechandtheshake; Recently Tornado has been censored, and there are many communities (such as

and) in the frontend that hosts it spontaneously.,Front end has censorship resistance

Greatly improve the overall security and decentralization of DApp.
secondary title
b) Backend ⇒ ZKP + Smart Contract
The evolution process of App architecture will be like this:
Web2 application: frontend ⇒ backend ⇒ database

Web3 Simple Application: Frontend ⇒ Smart Contract
Web3 Complex Application: Frontend ⇒ ZKP ⇒ Smart Contract
Although the smart contract makes the entire application decentralized, it is a double-edged sword to use a smart contract on the open network to process the logic of the application. The data and code are made public, which ensures transparency, checkability and composability, but It also completely exposes privacy and security risks, and the cost of space and calculation on the chain is very high.
ZKP will become the RSA of the Web3 era, eliminating the shortcomings of application communication security and decentralization, and truly realizing trusted and trustless DApps.
The addition of ZKP as an intermediate layer and communication method between the front and back ends has once again played its two advantages very well:
Privacy: In Web2 applications, privacy has always been the default option, but the nature of the blockchain network allows DApps to always have virtual "privacy". As an intermediate layer, ZKP can process sensitive data off-chain to solve this problem.
Expansion: The space on the chain is limited, so many complex algorithms in Web2 applications cannot be implemented. ZKP can execute the algorithm off the chain and verify it on the chain while ensuring the credibility of the calculation.
Computational Feasibility: The types of ZKP calculations are limited, and not all calculations can be solved by ZKP.
Optimization: When the complexity of the operation increases, the calculation time and space will increase significantly, which requires a lot of software and hardware optimization. At the same time, in many cases, the throughput can only be significantly improved, and the overhead of the overall Proving is difficult to reduce.
secondary title
c) Database ⇒ decentralized node service
We have previously described how DApp uses blockchain as the backend and database. To connect DApp to the blockchain network, node services are required.
Currently, DApps are commonly used in centralized NaaS, such as Alchemy and Infura. In my vision, there are three better directions in the future:
Multi-center NaaS, using multiple centralized NaaS as an alternative (similar to Chainlink + Uniswap oracle combination). This is a more feasible and reliable solution, which can guarantee anti-censorship and uptime.

Self-hosted NaaS. The ultimate solution, not only can ensure the trustworthiness of the "database" connection and the privacy and anti-censorship of various data, but also increase the degree of decentralization of the network. With the self-hosted front end, the entire DApp will be extremely decentralized change.
secondary titleTornado.cashd) Crypto-native DApp instance
recently sanctioned
(especially BossBen) is a very Crypto-native DApp, which meets many of our definitions:
The front end uses the Vue framework of NuxtJS instead of the commonly used React framework.Fully implemented using ZK circuits and smart contracts in the front-end code, without any server-side code..
The code is completely open source,
Hosted in IPFSTornado.cashI believe there will be more applications in the future to
3. Web3 Infra
This is the most perfect decentralized Web3 application architecture in my mind.

first level titleThe above is just a simplified version of the architecture. The following is a more specific architecture of an actual DeFi application::
It contains several other than node services
Supplementary infrastructure
Indexer: The Graph on the left. There is no way to easily query the data on the chain, so the indexer is needed to assemble the contract-related data.
Oracle: Chainlink in the lower right corner. The chain needs to get data such as contracts or prices outside the network, so it needs to feed prices on the chain (Uniswap TWAP) or off-chain oracle (Chainlink).

Keeper: Keep3r Network in the lower right corner. The smart contract itself does not have the ability to automatically trigger the execution of tasks, so an external trigger is required for assistance.
These infrastructures are crucial in the construction of a DApp, and we will introduce the problems and innovation opportunities of Oracle and Indexer in detail in future articles.
About Foresight Ventures
About Foresight Ventures
Foresight Ventures bets on the innovation of cryptocurrency in the next few decades. It manages multiple funds: VC fund, secondary active management fund, multi-strategy FOF, special purpose S fund "Foresight Secondary Fund l", with a total asset management scale of more than 4 One hundred million U.S. dollars. Foresight Ventures adheres to the concept of "Unique, Independent, Aggressive, Long-term" and provides extensive support for projects through strong ecological forces. Its team comes from senior personnel from top financial and technology companies including Sequoia China, CICC, Google, Bitmain, etc.
Website: https://www.foresightventures.com/
Twitter: https://twitter.com/ForesightVen
Medium: https://medium.com/@foresightventures-zh
Substack: https://foresightventures.substack.com
Discord: https://discord.com/invite/jYtyfxfB
Linktree: https://linktr.ee/foresightventures
Related Links
0:
https://learnblockchain.cn/article/4338
https://www.zhihu.com/question/457087098
0a:
https://www.zhihu.com/question/457087098/answer/1864992254
https://www.zhihu.com/question/457087098/answer/1863665807
0b:https://www.zhihu.com/question/457087098/answer/1911173154
0c:
https://www.zhihu.com/question/457087098/answer/1864258142
https://www.zhihu.com/question/457087098/answer/1910852580
1:
https://medium.com/iearn/self-hosting-web3-services-299306b706ee
1a:
https://twitter.com/suhailkakar/status/1555894207570513920
1b:
https://www.informit.com/articles/article.aspx?p=3006828
2:
https://mp.weixin.qq.com/s/1h6yqCWyzYLM8WPGlGdtVA
2a:
https://twitter.com/ChainLinkGod/status/1562125152506195969
https://github.com/Uniswap/web3-react
https://www.codemag.com/article/1701041/Legal-Notes-What’s-the-Deal-with-ReactJS’s-Licensing-Scheme
https://twitter.com/paulmillr/status/1558578060940791809
https://github.com/Nemusonaneko/projects-with-restrictions/
https://medium.com/iearn/self-hosting-web3-services-299306b706ee
https://twitter.com/samecwilliams/status/1561127191106158592
https://twitter.com/forgivenever/status/1556820240993882112
https://okcontract.com/whitelist
https://twitter.com/lickitungxbt/status/1558477975292715016
https://twitter.com/DotTheShake/status/1557703404574707717
https://twitter.com/mallowsxyz/status/1560655467613143040
2b:
https://twitter.com/LeopoldSayous/status/1515982366635966466
2c:
https://ethereum.org/en/developers/docs/nodes-and-clients/nodes-as-a-service/
2d:
https://mp.weixin.qq.com/s/USa7y6IZRjYXa8mWK4t2Lg
https://ipfs.io/ipfs/QmTFnDJbfZLbopwjowmwNE9LFvK599sxhktAArQUvH7Tex
3:
https://www.preethikasireddy.com/post/the-architecture-of-a-web-3-0-application
https://mp.weixin.qq.com/s/ifaVkhdgmh41zxDKVE68Kw
https://www.usv.com/writing/2018/10/the-myth-of-the-infrastructure-phase/


