Building a DAPP with Web3.js Solidity and Truffle (Part 1)

Introduction

There’s currently a mass adoption of cryptocurrency and the blockchain industry is quickly gaining traction. As a result of this, companies are looking to hire individuals with skills capable enough to build the next billion-dollar blockchain company.

This article is an introduction to building decentralized applications (dapps) with the currently trending technologies in space. This article assumes that readers intend to learn the basics of building dapps, and as a result does not leave any stone uncovered, as it addresses the core basics of building a dapp.

At the end of the article, readers would be enlightened on what a dapp is, what Web3.js, Solidity, and Truffle are all about, and how to build a dapp with these technologies.

What is DAPP?

Decentralized apps (dapps) are digital applications or programs that exist with their backend code running on the blockchain or peer-to-peer (P2P) network, meaning that data in the context of a dapp is decentralized and free from control by a single authority, in contrast to a standard web or mobile app where backend code is running on centralized servers and information is owned and controlled by a single authority.

Since blockchain - what some refer to as web3, is the driving force behind dapps, the backend consists of a collection of computers, and these thousands of computers that make up dapp network are called nodes. With this decentralized model, it is practically impossible for its database to be tampered with because if one node is altered, all other nodes can easily point out the node that has incorrect information. This helps to establish transparency. This decentralized system also means that data is continuously managed collectively and is consumed and shared simultaneously by all users. The higher the number of participants, the stronger the network becomes.

The rules that guide activities within dapps are formalized by the majority consensus of all network participants, who also receive native network tokens for providing computing power required to keep the network running. Consider a scenario where the account of the president of the United States of America would immediately be deleted on twitter if all tweeps agree that such should be done.

Benefits of dapps

The following are the benefits of using dapps:

• Censorship resistance: There is no single authority to control or restrict access to data in the dapp. Dapps don’t depend on any particular I.P. address.

• Complete data integrity: The application uses a standard cryptographic algorithm to act as a proof of value. With that, application data is immutable and indisputable.

• Trust: Since there is no single authority to control or restrict access to data in the dapp, users have more confidence and trust that their data will not be stolen or compromised.

Drawbacks of dapps

Dapps are still largely experimental and face some challenges too, these include:

• Uneasy to maintain: It's hard for dapps to be maintained because a fix or update requires all peers in the network to update all copies in the network, which can be a tough task.

• Poor user experience: Poor usability is still an issue for a lot of dapp users. This is because the average user might find it challenging to interact with the blockchain in a truly secure fashion.

• Complex to scale: The ecosystem is complex, and scaling is hard. As a result, unlike centralized apps where an MVP is first built, the entire dapp needs to be planned and built - with developers considering the scale from the very beginning.

Web3.js, Solidity, Truffle: what are these?

Web3.js, Solidity, and Truffle are the most common terms associate with Blockchain app development. Why don't we kickstart our journey to becoming aware of these tools used for building apps?

Let's start with Web3.js

With Web3, we are on the verge of the next web breakthrough - decentralized internet. This is possible using the Web3.js library; the JavaScript library for interacting with the Ethereum blockchain. It includes functions to communicate with the Ethereum blockchain via JSON - Remote Procedure Call to read data from smart contracts, similar to using jQuery with a JSON API to read data from a web server.

It is a build-up of 5 modules that have specific functions, and the main class; called Web3, which holds the bulk functionality of the library. The various modules are: web3-eth: To interact with the Ethereum blockchain. web3-shh: To interact with Whisper protocol. web3-bzz: To interact with Swarm - decentralized storage. web3-net: To interact with Ethereum nodes. web3-utils: To provide utility functions in Ethereum dapps.

To use Web3.js in a web project, we get a copy of it using NPM and a public gateway such as Infura RPC URL (to access an Ethereum node). After development, the app can be run from the terminal with Node.js. The popular JavaScript API is mostly used server-side in Node.js applications and Electron-based desktop applications.

Solidity to the moon and back!

Like JavaScript is to web programming, Solidity is to blockchain programming. Since the contract-oriented language was first proposed in 2014, it has been the tool for the job when it comes to creating smart contracts for fungible and nonfungible tokens in the Ethereum ecosystem and other blockchains.

Solidity is a newly developed high-level language that is so similar to languages like C++, Python, and JavaScript. If you understand JavaScript, it can be easy for you to pick up Solidity because it is a language that has been made so easy for providing genuine solutions to real-world issues. One of the key factors behind the execution of Solidity code is the Ethereum Virtual Machine (EVM), which is hosted on Ethereum nodes that are connected to the blockchain; giving it every capability that is needed to build full-blown blockchain applications.

Solidity is much more than a programming language. It is setting the standard for the future of blockchain technology. However, like Ethereum, Solidity is undergoing visionary growth, and the language still deals with frequent updates and modifications.

Oh sweet Truffle!

Truffle is a framework made for building, testing, and deploying dapps on the Ethereum network. It is widely noted as the most popular development tool for blockchain developers, whether they are building on Ethereum, Hyperledger, Quorum, or any other supported platform.

Truffle aims to make the life of a developer easy by abstracting the many complexities of Web3 and Ethereum during blockchain app development, which makes writing dapp codes easier and more predictable and allows for rapid lightweight testing and iteration.

Along with Ganache, a personal blockchain for Ethereum development, and Drizzle, a custom frontend dapp development kit, the Truffle suite of tools is sure to get developers from idea to dapp as comfortably as possible.

Why Web3.js

As a blockchain developer, it’s up to you to determine which library might be best for you - depending on your needs. Before looking at the range of possible solutions, take some time to document your goals.

Although the Truffle framework provides a blockchain developer with the ability to interact with blockchain data, the process to access and evaluate the data isn’t so easy or elegant. In this section we will find out the various great options that are available to allow blockchain developers to easily develop clients that interact with blockchain data, then we’ll have a look at why web3.js is an elegant and easy-to-use library for accessing blockchain data.

Various Ethereum blockchain access libraries include:

• Web3.js: This is the most popular JavaScript library used by blockchain developers to build user clients that interact with the Ethereum blockchain.

• Ethers.js: This is a JavaScript library that can be used as an alternative to web3.js, for building JavaScript frontend and interacting with the Ethereum blockchain and its ecosystem.

• Eth.js: This is a lightweight and easy-to-learn JavaScript library that provides a subset of web3.js functionalities and enables blockchain developers to interact with the Ethereum network and build dapps.

Web3.py: If you’re a Python developer, this would be your go-to library for interacting with the Ethereum blockchain. It’s a python implementation of web3.js and useful when building analytics-related blockchain applications.

Truffle-contract: Used internally by the Truffle framework to interact with blockchain data. It provides great integration if you want to access and evaluate smart contracts with the Truffle framework.

**Keep in mind that there are more other alternatives for accessing blockchain data in other languages like Java, as well.

Why choose web3.js? In a few words:

• Strong and large community
• Use of ENS names
• An official project with a historical standard
• Extensive documentation
• Great maintenance
• LGPLv3 Licensed

Now, it’s time for us to explore these points in more detail. Believe me, you’ll want to read until the end to find out why it’ll be a great choice to use web3.js for your next blockchain project.

Web3.js has a very strong and large community

Among the client libraries for blockchain development, web3.js is the most popular. A lot of decentralized applications have been developed using the library. With over 11,700 stars on GitHub and used by over 51,000 repositories at the time of writing this article, web3.js is a very popular project on GitHub. This also means that there are a lot of people questioning, supporting, and contributing to it. As such, this results in more reliable software.

Use of ENS names

Ethereum Name Service (ENS) has similar goals to DNS, the Internet’s Domain Name Service. Its importance is in mapping human-readable names like ‘tina.eth’ to machine-readable identifiers such as Ethereum addresses, other cryptocurrency addresses, content hashes, and metadata. With web3.js, it’s very easy to integrate ENS into dapps.

Web3.js is an official product with historic standard

Web3.js is a project of the Ethereum Foundation, which is a non-profit that’s dedicated to research and organization of protocol-level development. It is the official Ethereum JavaScript API.

Extensive Documentation

Web3.js has an extensive API reference that is very useful. Whether you are working on a new cutting edge decentralized application or you’re simply ramping up on a new blockchain product, the web3.js documentation has all the information you need to get you up and running towards making your project a smashing success.

Great maintenance

As a developer, it’s ideal to use libraries that are updated frequently, this enhances productivity, improves performance, and removes outdated functions from our software.

Web3.js is entirely LGPLv3 Licensed

The GNU Lesser General Public License (LGPL) is an appealing option for developers looking to balance contributing to the OSS (Open Source Software) community with a desire to have their code incorporated into proprietary software. It’s also attractive, as it protects potential users from expensive lawsuits. In addition, the license is backed by the GNU Project, a well-known and respected organization in the open-source software domain.

Picking a blockchain user-client library for yourself or your team is not a decision to take lightly. Knowing Web3.js is a library that is the industry standard in blockchain development, constantly growing upwards, with a very strong and large community, has the most helpful resources, and has major blockchain projects making use of it, it’s clear to see why Web3.js is an incredible option and a go-to library for interacting with the Ethereum blockchain.

Project Overview

In this section, we will have a look at the project that we will eventually build in part two of this series. It will be a project where I show you step-by-step how to use web3.js to talk to the Ethereum blockchain as we build a dapp using web3.js, solidity, and truffle.

The project we are going to build is a voting application, a very simple one that allows us to hold an election between two candidates. Solidity is the language we will use. We will also write tests against our app and deploy it to the Ethereum blockchain. We will develop a client-side application that interacts with our smart contract on the blockchain, It will have a form that will allow our users to cast votes, and a table for election results that lists each candidate’s id, name, and vote count.

Just before we get going in part two, we can already install the dependencies that we will need to build our dapp. They are:

• Node Package Manager: This allows us to manage and use node packages. We can download it from: node. To check if you have node installed, type the following on your command line. node -v

• Truffle: Truffle will allow us to build dapps on the Ethereum blockchain, and provide a suite of tools to allow us to write smart contracts with Solidity. It also allows us to test our smart contracts and deploy them to the blockchain. We will install it globally with NPM using the command: npm install -g truffle

• Ganache: Ganache allows us to create a personal test blockchain for development. It allows us to have 10 different fake accounts with addresses on our local Ethereum blockchain. We can install it from: ganache

• Metamask: This is a Chrome extension that enables us to interact with the Ethereum blockchain. To install it, let’s search for the metamask chrome plugin in the Google Chrome web store. Most dapps are developed with a web3 provider in mind which is mostly Metamask for desktop browsers.

• Syntax highlighting: This is because most IDE’s don’t provide one out-of-the-box for Solidity. To achieve that, we can use the Solidity plugin by Juan Blanco.

Now that we have our dependencies installed, we can easily get up and running with building our dapp in part two.

Conclusion

In this first part of the series, we have covered, the basics of building a dapp; in the first section. In the second section, we learned what dapps are, along with the benefits and drawbacks that are associated with dapps. We also learned about the several important pieces (let’s call them components) that provide the core of functionalities when building a viable decentralized application, or any kind of application that interacts with blockchain data. The components included an effective way to write code that writes to, and reads from a blockchain node (Web3.js), a test blockchain for development (Ganache), and a testing, building, and deployment framework (Truffle); in section three. Then, we came across various reasons why web3.js is a great option for blockchain developers to use as their user-client component. Finally, we had an overview of a simple decentralized application that we will be building in the second part of this series.

As I mentioned in the beginning, there’s currently a mass adoption of cryptocurrency and the blockchain industry is quickly gaining traction. As such, this is a great time to harness the skills and learn the right technologies needed to make you stand out as a blockchain developer.