Frontend developers need to know web3.js
“We build systems like the Wright brothers built the airplanes; build the whole thing, push it off a cliff, let it crash and start all over again.”
— R.M Graham
Well, not exactly the same, but it’s true. See, you can have a good app that does incredible things, but if it only works from the command line, then you will lose your audience.
You need a user interface (UI) for your app. It doesn’t matter if it is a mobile or browser app, you still need a UI. Looking at the current blockchain applications you and I will surely agree that we still lack some good UIs. And I don’t mean that we lack gorgeous UIs, I meant that we lack UIs, full stop.
Like many others, I’ve always worked on the backend. I always managed to connect all the parts of an application, but my frontends were bad enough to be considered worthless. Sometimes I would build almost pure HTML frontends. That’s why we need frontend developers.
Is it that bad?
We are now seeing some reusable components show up which are speeding up the frontend development. Of those, there are two packages that I want to mention. Even for frontend developers that are already comfortable with their craft. They are rimble-ui and decentraland-ui.
decentraland-ui is part of the decentraland project. They are releasing some interesting components that can be reused in your react dapp.
On the other hand, rimble-ui is a project from ConsenSys aiming to improve the frontend development and avoid ugly frontends leading to bad user experiences.
Besides these, there are some other interesting packages such as dappartus. Also, new wallets, such as fortmatic and portis that are improving the user experience as well.
Get to know web3.js
Before getting started, you must know that your frontend will connect to one of the network nodes. If you don’t know what I mean, please, have a read about blockchain and learn the basics. It’s kinda like a network of computers.
Now, you must have ganache app running. By default, in your ganache app, you have 10 accounts with 100 ETH each. In the first place you need to connect to the network. Using web3.js (version 1.2.0, please) it is as simple as the following
You are now connected to a node running on your localhost on port 8545, ready to start the integration. As you can see in the documentation (https://web3js.readthedocs.io/en/v1.2.1/) there are many actions that you can do. As a simple test, try getting the current balance of a given account by executing the following
Note: do not forget to change ‘account-address’ by any account address from the ganache app.
Sending some ETH from one account to another is as simple as this:
You might get confused with the toWei method. I understand. In ethereum, everything happens at a wei level. Wei is the lowest fraction of ether. That’s why the method receives the value 1, which is the amount we want to convert to wei, and ether, the scale. So, 1 ether will be 1000000000000000000 wei.
To better understand the scales, have a look here https://etherconverter.online/. The truth is, if you are not the blockchain developer on the team, don’t worry, someone will be around to help.
Executing ethereum methods always follows the pattern above. It is as simple as calling methods from another package that does something.
But ethereum is much more than those simple transactions. By far the most exciting feature of Ethereum for a developer is smart contracts. Let’s see what you need to know to interact with them.
Web3.js interacting with smart contracts
Let me introduce you to a new concept, ABI (Application Binary Interface). An ABI is only a JSON array with a contract specification. Let’s consider the contract below:
With only two methods, the ABI for this contract is as simple as
Now, why is the ABI so important? You need it because otherwise, web3.js would not know the contract methods.
And where does the ABI come from? It’s generated when the code is successfully compiled. But having the ABI is not enough, you need to have the contract deployed somewhere.
At TechHQ we have some boilerplates. You can use this one, which has the SimpleContract that I’m using here. Clone the repository, install the dependencies and then run npm run start:ganache:dev. In another terminal window, run npm run deploy:ganache.
A new folder (build) will be generated, containing the contracts ABI’s within. Those JSON files are actually truffle artifacts, as we will see later.
With this, you are ready to start interacting with your contracts. Use the code below and update the values of the variables
You are still doing nothing very useful but now you are connected and have a contract instance, simpleContract. From now on, you need to look at simpleContract as if it was a class on which you can call methods. The web3.js documentation to interact with contracts can be found here https://web3js.readthedocs.io/en/v1.2.0/web3-eth-contract.html
Before calling any methods or sending transactions, it is worth mentioning that there are two methods that can be used. In each interaction with smart contracts, we will use send or call. The call method is calling a method and is allowed to get some information back. While send actually sends a transaction that the user needs to sign, allowing to change data.
An example of a call would be
And an example of send would be
Remember to change your-account-address to your actual account. If you are using the TechHQ template, the main account address is 0xe8a5e64E6EBb88F7DdCE7C91723e4d92b73B8FFc.
For developers this isn’t a great development experience. Every time the contract or the address changes you need to update the code. The good news is that we already have a tool that simplifies a lot.
Use truffle-contract to help
Install @truffle/contract, import it on your code and import the JSON file from the build folder
Then get an instance
Done. Just interact with it like
And yes, even the method calls are different. Then if it is much easier, why did I explain everything above? Well, @truffle/contract uses web3.js underneath. It is simplifying a lot, but still uses web3.js and it’s better if you understand how these things work under the hood.
Why do we need metamask?
At this point, you know how to interact with smart contracts and some do other basic actions. Great, but there was one missing point. At the beginning of the article, I said that you, as a developer need a local network, to develop and test. But what about when you go live? Will you have a local node of the main-net? Will your client want to have one? And, how safe is that?
There’s already many alternatives, but metamask is still the most used (and simple, yet annoying) at the moment. Metamask is a browser extension that connects to any network, without the need of a local node. So for example, a user can connect to mainnet or any of the testnets without having a local node.
And you, as a frontend developer, need to know that there’s only little change on the web3.js call. Metamask injects a variable into the window browser object. The variable is named ethereum. So, when using metamask, instead of setting the IP address, you should have
This is the same as shown above, but using window.ethereum instead of an IP.
You will also need to allow metamask to connect to that network, otherwise, you can’t perform any action. This was built for security reasons. After the line above, use
And you are good to go with metamask.
Conclusion
Welcome to the web3 world, my friend. This has been such an amazing time but we need more frontend developers. Now more than ever if we want to achieve mainstream adoption. As you saw it isn’t complicated, it’s just some regular magic of the kind you surely do every single day.
This basic intro is enough to get you started as a frontend developer in most blockchain projects. Please learn the basics and join a blockchain hackathon, people will love you. I would choose you for my team without a thought.
If you want to know more, please feel free to contact me.
Special thanks to Alberto Cañada for reviewing. As well as TechHQ.
