The primary distinction between web2 and web3' frontend vs backend concepts is that we will be interacting with smart contracts in the background, and rest leveraging the same technologies.
Frontend technologies
Frontend is the interface used to create web pages and applications so that users can interact with them. Popular frontend web technologies are HTML, CSS, and JavaScript which are used in web2 can be used in web3 as well.
HTML: Hypertext Markup Language uses components, tags, and attributes, which enables web users to design and organize sections, paragraphs, and links in the web pages and online applications. Learn HTML here: w3schools html course
CSS: The content of the page is structured using HTML, and it is styled using CSS. The page can be styled in terms of layouts, colours, fonts, and styles with the help of CSS. We can create scalable and maintainable styling with CSS. Learn CSS here: w3schools css course
JavaScript: JavaScript is a dynamic scripting language that browsers understand. JavaScript enables interactions between web pages. The behavior of the websites can be programmed. Javascript is the most important frontend technology to learn rest are frameworks and libraries. Modern popular frontend libraries and frameworks are AngularJs (maintained by google), ReactJs (maintained by facebook) and VueJs. Learn Javascript here: Udemy, Scrimba React, Scrimba javascript
“What are smart contracts? A smart contract is a self-executing program that is recorded on a blockchain and executes automatically when predefined criteria are satisfied. As with any contract, a smart contract specifies the conditions of an agreement that are directly encoded in lines of code.”
Backend technologies
The software that cannot (necessarily) be accessed directly by the user is referred to as the backend. It is the server-side of the software which is responsible for data storage, analysis, and seamless application performance. They receive requests from clients, processes them and sends appropriate data back. It also includes the database which stores all the data for the application. Popular languages python, java, javascript, etc. Things to get familiar with in backend:
Node.js: Developers can create backend (server-side) JavaScript programs using the Node.js JavaScript runtime. Among the essential modules are the File System module, which reads and modifies files, and HTTP, which performs the role of a server. Learn Node.js here: w3schools Node.js course
APIs: It is an interface that communicates directly or indirectly with a blockchain node or client network. A nice example of a blockchain API would be an interface between a Bitcoin exchange and a user application that collects its data. Simple integration explained here: How to integrate apis
Database: Any information-storing data structure can be considered a database. At its foundation, blockchain technology is nothing more than a ledger for storing transaction information. Thus, blockchains can be regarded as databases. They basically store all the client and user data.
Additional reading on web3 frontend, backend, database here: web3 architecture layers explained
References:
learnweb3.io. (n.d.). LearnWeb3 DAO | Become a Web3 Developer for Free. [online] Available at: https://learnweb3.io/courses [Accessed 21 Oct. 2022].
MongoDB. (n.d.). Blockchain Database: A Comprehensive Guide. [online] Available at: https://www.mongodb.com/databases/blockchain-database.
Sharma, T.K. (n.d.). What is a Blockchain API? How can you integrate in your website? [online] Available at: https://www.blockchain-council.org/blockchain/what-is-a-blockchain-api-how-can-you-integrate-in-your-website/.
Shevchuk, V. (2022). Top Web3 Architecture Layers Explained: Frontend, Backend, and Data. [online] Medium. Available at: https://itnext.io/top-3-web-3-0-architecture-layers-explained-frontend-backend-and-data-e10200f7fc76.
www.coinbase.com. (n.d.). Smart contracts allow developers to build apps that take advantage of blockchain security, reliability, and accessibility. [online] Available at: https://www.coinbase.com/learn/crypto-basics/what-is-a-smart-contract.
