(Part 5/18 updated) Introduction to Web3.js 1.2 (Latest version) – Beginners Tutorial

When you develop an Ethereum Dapp, once you have the frontend and the smart contract, you need to connect them together. This is not easy. Fortunately, Web3 is here to save you! Wait… not so fast… Actually, it’s not that easy to learn how to use Web3:

  • Many Web3 tutorials use outdated syntax and code examples don’t work..
  • Or perhaps, you really didn’t understand this weird “abi” and “provider” thing..
  • Or perhaps that Web3 breaks EVERY time you update it..
  • And I am not even talking of connecting to wallets like Metamask

What if you could learn a simple and easy way to setup Web3 in your Dapp? What if you knew the exact steps to communicate with your smart contract? What if you could use a stable version of Web3 that work well and does not break between updates?

After you read this tutorial, you will learn all that 🙂 So stay focused.

By the way: I will publish this tutorial in several steps. Today is step 1. Each step will be published at 2 days interval.

  1. What is Web3.js?
  2. Setup project
  3. Install Web3
  4. Web3 versions
  5. Web3 providers
  6. Connect Web3 to Ethereum blockchain – Todo
  7. Connect Web3 to smart contract – Todo
  8. Reading smart contract data with Web3 – Todo
  9. Writing smart contract data with Web3 (transactions) – Todo
  10. Sending raw transactions with Web3 – Todo
  11. Listening to smart contract events with Web3 – Todo
  12. Listening to blockchain events with Web3 – Todo
  13. Running Web3 in backend vs frontend
  14. Connecting Web3 to Metamask wallet
  15. Dealing with numbers with Web3 – Todo
  16. Unit conversion with Web3 – Todo
  17. Other Web3 features – Todo
  18. Alternatives to Web3 – Todo

What is Web3.js?

Web3 is a Javascript Library to communicate with an Ethereum node. It offers an easy way to use the API of Ethereum. Ethereum has many APIs, but the most important ones for Dapp developers are eth_sendTransaction and eth_call. These 2 APIs allow you to interact with smart contracts. Web3.js is especially useful for these 2 APIs.

Web3.js

With these 2 APIs, you can specify:

  • which smart contract to call
  • which function to call
  • which arguments to provide to the functions
  • how many ether to send

In the REST API world, people would generally create a new endpoint for each function. But in the case of Ethereum, it’s impossible, because they are way too many smart contracts and new ones keep getting created. So we need a single endpoint to “multiplex” all the calls to many, many smart contracts and functions:

Web3.js and Ethereum

If you are interested in the technical details of the Ethereum API, it’s a JSON RPC interface, which means that it has a unique HTTP endpoint that receive a JSON payload. After this payload is parsed, Ethereum can know which API is targeted. Example:

// Request
curl -X POST --data '{"jsonrpc":"2.0","method":"eth_call","params":[{...}],"id":1}'

// Result
{
  "id":1,
  "jsonrpc": "2.0",
  "result": "0x"
}

You can find all APIs here.

Using these APIs directly is a bit too low level and requires lot of work. Dapp Developers should use Web3 instead. That’s what we will do in this tutorial.

Oh and by the way, Web3 is an “Isomorphic” Javascript library (YES! I managed to use this word in an article. I feel so smart now!). In other words, it means that it can be used both on the frontend and backend (NodeJS).

In the next section, we are going to setup our project and start the coding!

Setup project

NOTE: it’s not strictly necessary to follow this part. You can skip it if you don’t want to code as you follow the tutorial. You can just look at the code examples and adapt them for your project.

In order to use Web3, we need a smart contract to play with, and a blockchain to run it.

For the smart contract, we will use the smart contract of the DAI stablecoin, an ERC20 token. And for the blockchain, we will use Ganache, a local Ethereum blockchain. And for deploying the smart contract to the blockchain, we will use Truffle, a popular framework for smart contract.

Just to be clear: This is NOT a tutorial about truffle, Ganache, ERC20 token or Solidity. You don’t need to understand any of these to follow the tutorial. But we do need to interact with a smart contract, so I prepared a project so that we have something to play with.

Before that, we need to install these tools. They and are all written in NodeJS, and can be installed with npm, the package manager of npm. Follow these steps:

  • Install NodeJS and npm (they are bundled together) by going to the website of NodeJS and using the LTS installer. You can check that you have at least Node v10 with node -v in your terminal
  • Install Truffle globally with npm install -g in your terminal. It will also install Ganache
  • Clone the project folder to your computer (screencast/17-intro-web3/start). To get access to the git repo, create a FREE account on EatTheBlocks pro.

If you are curious, the smart contract is the DAI ERC20 token contracts/Dai.sol.

Next, let’s install Web3, the missing link to the blockchain!

Install Web3

Now that we have our project setup, it’s time to add Web3.

Web3 is an open-source library, and its code is available on Github. You could just copy and paste the source from the Github repo of Web3, but that’s a bad practice.

Like for the other dependencies, we can install it with npm. Web3 is actually already installed inside the project we setup just before. So you don’t need to do anything. You can see it by checking the dependencies section of package.json.

But if you need to install Web3 yourself in another project you can do it with:

npm install web3

In the next section, we are going to talk about Web3 versions (Yes, that’s a BIG deal!).

Web3 versions

It used to be the BIGGEST frustration about Web3. It’s important to understand this.

Old stable versions of Web3 were on the 0.2.x branch. Then, when work started on the 1.x branch, the first versions were labeled “beta” versions. However, time went by, and… no stable 1.x version ever came out… The “beta” version numbers kept increasing for more than a year, going all the way up to beta-55!

From a version to the next one, you were lucky if your Dapp didn’t break…

Some projects, like Drizzle, stopped at Web3 1.0-beta35, the latest “stable” beta version, and it was ok-ish, but they didn’t get the latest features of Web3.

Fortunately, Web3 FINALLY released a stable version in mid-2019: Web3 1.2.0. ALLELUYA BROTHERS! (and sisters!). That’s what you should be using. And if you like to live dangerously and want the bleeding edge of the development, you can use Web3-beta55 and above. Not recommended unless you develop on Web3 itself.

Up next, we will finally start the coding and learn how to setup Web3!

Web3 providers

Before you can use Web3, you need to connect it to an Ethereum node. And for this connection, you need a Web3 provider.

Without a provider, Web3 is like an empty shell that has no way of communicating with the blockchain:

Web3.js no provider

Give it a provider, and tada! The link with the blockchain can be established!

Web3 provider

Providers can use different transports, like HTTP or Websocket. In general, providers use HTTP transports, but for some Ethereum APIs like events, Websocket transport is better.

You won’t have to create your own providers from scratch. You will use providers that either:

  • were injected in your frontend (more on that in the next section)
  • or you will create providers using some helper functions, provided by Web3 itself.

Next we will create a provider and connect it to Web3.

Leave a Reply

Your email address will not be published. Required fields are marked *