In web3, after building our smart contracts frontend integration is required to make them interact with users like in web2.

To develop a web application that can interact with a smart contract, we need 2 things about that smart contract:

• Address: When the smart contract is deployed to a blockchain, bytecode (binary data) is stored on the blockchain and an address is allocated to this contract. With this address, the smart contract stored in the blockchain can be accessed.
• ABI (application binary interface)

When smart contracts we build in Solidity or Vyper are compiled, they give bytecode (binary data) and ABI (application binary interface) files as output.

Bytecode is the format of our contract that can be understood by EVM. Smart contracts are stored in EVM in bytecode format.

The ABI file can be thought of as a file describing how to communicate with the bytecode stored in the EVM. Web3.js and ethers.js libraries read the ABI file and understand how to communicate with the smart contract, so Web3.js library or ethers.js library acts as a bridge between contract and web2 languages.

By making use of the ABI file and various libraries, front-end applications or client programs can be written to enable the users to use the contracts easily.

The most frequently used libraries to develop front-end applications for Solidity smart contracts are ethers.js and Web3.js libraries.

Ethereum network is made up of nodes like other chains, which each contain a copy of the blockchain. These nodes only speak a language called JSON-RPC, which isn’t very human-readable. By using Web3.js or Ether.js libraries you can interact with a convenient and easily readable JavaScript interface, instead of JSON-RPC. They are both great libraries that allow developers to interact with the Ethereum blockchain and you to interact with a local or remote ethereum node using HTTP, IPC or WebSocket.

Modules of web3.js and ether.js libraries

Modules are often used to store functions inside them independently of other components. It increases the readability of the code by separating the pieces of code from each other. For those who are familiar with python or java, you might be familiar with “Classes”, which are analogous to JavaScript modules.

Per web3.js official documentation four modules modules that contain functionality for the ethereum ecosystem:

• web3-eth is for the ethereum blockchain and smart contracts.
• web3-shh is for the whisper protocol, to communicate p2p and broadcast.
• web3-bzz is for the swarm protocol, the decentralized file storage.
• web3-utils contains useful helper functions for Dapp developers.

Similar to web3.js, ethers.js has four modules which make up the API.

• Ethers.provider allows you to abstract a connection to the Ethereum blockchain.
• Ethers.contract is for the deployment and interaction with smart contracts.
• Ethers.utils provides utility functions for formatting data and processing user inputs.
• Ethers.wallets provides some functionality that is different than the other modules we have discussed up to this point.

Using these modules we can integrate our smart contracts to a regular frontend which builded using Html, css or JavaScript(Also JavaScript backgrounded frontend programming languages like).

Resources:

https://medium.com/coinmonks/solidity-and-web3-js-141115b0f8c5 

https://blog.infura.io/post/ethereum-javascript-libraries-web3-js-vs-ethers-js-part-i 

https://itnext.io/top-3-web-3-0-architecture-layers-explained-frontend-backend-and-data-e10200f7fc76 

https://betterprogramming.pub/everything-you-need-to-know-about-fullstack-web3-94c0f1b18019 

https://www.youtube.com/watch?v=HcOWNxL3Iy0&t=91s

https://www.youtube.com/watch?v=F_l4HycnHAI