Frontend developers need to know web3.js

Bernardo Vieira
Oct 17, 2019 · 6 min read

“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?

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

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

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

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?

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

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.

The Startup

Medium's largest active publication, followed by +752K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store