Web3.js(how the smart contract connected to the front end)
web3.js is the main javascript library for interacting with the etherum block chain. When we work on the etherum block chain we mainly create the contract we deploy it on the etherum block chain platform and after deploy it we can easily interact it's function if their no error in our code. This is the one way through which we can interact with our smart contract but when we thing about the other way such as when the particular user want to interact you smart contract through our website or the front-end that the another user created. So here is the web3.js library came into the picture.

web3.js mainly connect your smart contract with the etherum node to interact with the smart contract easily.
so how can the web3 do that it mainly used the JSON RPC for that here RPC stands for the remote procedure call protocol.This protocol help to the front-end to interact with the smart contract.If you are aware about the
web development then the RPC is the like of API that is useful to interact with our website here the client requests for the particular services to the server then sever working on that request all this happen in the network of it's working and then the server give the response towards that client.

In the above image we can easily understand the working of the RPC in the image client request to the server then server working on it that working is taken place in the network and it give response back to the client.

what happen in it client make the call to the procedural protocol then server work on that call till client wait for the server to response as soon as the server working on the call and give response back to the client after this client start working on the another call/request.

The client make the local procedure call if client want to add two value 3 and 4. Then client stub packed it in the box and send to the network routines of the local kernel of operating system. The box which contain the parameters of 3 and 4 for adding send to the remote kernel of the operating system and that parameters send to the server stub for processing on it.Then server stub open the box which transfer from the client stub to the server for adding two value .Then server working on it and in the reverse procedure it pass to the client again and then client again start on the next call.
Like this way the RPC mainly work.