Written by Victor Jonah ✏️
With the recent rise of decentralized applications, or DApps, frameworks created specifically to ease DApp development have become more common.
Like frameworks for frontend developers, DApp frameworks are pieces of code written to build software, which helps make building applications for blockchain easier. While using a framework is not necessary, it does help develop software better and faster.
In this article, we will compare a few popular frameworks that are generally used by blockchain engineers and look at their benefits, disadvantages, and networks, including:
But, before we get into this, let’s discuss the types of DApps are available.
What are DApps?
Decentralized applications (DApps) provide a new way to interact with web applications.
You may have heard that “blockchain is the future” or “the future is decentralized;” this mentality permeates through the quick releases of new blockchain-based technologies, meaning developers can access reliable frameworks.
The DApps that are based on blockchain technology run on a peer-to-peer (P2P) network of several computers or servers, rather than a traditional central server. These applications are built on the concept of smart contracts and the consensus process or mechanism.
This means when an application is decentralized, it is first created with underlying blockchain technology pushed to a preferred blockchain network.
Remember that a blockchain network is a collection of several thousands of computers identified as nodes or servers, each owned by a person. Each node, server, and computer then becomes a distributed database, meaning every other server has a copy of the same data.
With all this in mind, a few benefits of building a DApp is that they do not have any downtime because they do not have a central server.
They are also not prone to cyber-attacks and cannot be shut down because there is no central server and all the servers are distributed. If one distributed server is attacked, others become aware.
It is also open source, making it transparent and open to developers.
In summary, a DApp does not bank on a traditional central server or service provider like Google Cloud, Heroku, or Digital Ocean. Rather, its deployment to the blockchain makes it transparent with no central location to store data and no third-party control.
Types of DApps
The different types of DApps available are often seen through the different sectors of blockchain technology solutions a DApp is built to solve. For example, the first-ever DApp built was on the Ethereum blockchain.
Similarly, the main reason Bitcoin was built was to remove the financial middleman (that is, the bank) from the process of currency transfers. With Bitcoin, money transfers can be P2P without using a bank.
Like Bitcoin, there are many other sectors where DApps play a deliberate role.
Decentralized finance (DeFi)
Decentralized finance, or DeFi, is a term given to financial services that use decentralized money like Bitcoin or Ethereum to perform operations.
Traditionally, we have financial services that operate using a central authority, like banks and governments, including financial services such as providing loans, savings plans, and insurance.
However, many saw having a central authority perform these financial operations as risky because of fraud, corruption, and mismanagement. This gave birth to DeFi.
Building a DeFi application requires choosing the platform (this includes Ethereum, Solana, Binance Smart contracts, and many more). DeFi’s main focus is to remove the middleman while offering transparency and decentralization.
DeFi apps are used in decentralized exchange, insurance, and loan services, with apps like Pancackeswap and 1inch.
Decentralized autonomous organization (DAO)
A decentralized autonomous organization, or DAO, is an organization that operates fully through code/smart contracts. These organizations operate on the rules given to them and then operate solely on those terms.
So, a DAO can run a company without the help of human activity, with the decentralized board creating rules for the DAO to run on, meaning there is no need for repetitive board meetings.
A possible example of a DAO is a driverless taxi company. In this example, we could have a DAO Lyft or DAO Uber that operates entirely on a collection of smart contracts deployed on any blockchain.
This would streamline operations like where to send profits, like how MakerDao operates, when and where to send the taxis, when to refuel the cars, and more.
Merchandise management
A merchandise management DApp is most often associated with supply chain processes and systems. The traditional supply chain does not provide insight or transparency to products, meaning we don’t always know what a product is truly made of or where it comes from.
With blockchain in the supply chain, however, product traceability is available; you can trace where products come from because data stored in the blockchain is decentralized. An example of this is GX Blocks.
Comparing DApp frameworks
Let’s now look at the most common frameworks for building DApps.
Hardhat
Hardhat is a framework for building smart contracts that offers a development environment for professionals. This development environment lets users compile, run tests, check smart contracts for mistakes or debugging, and deploy decentralized applications.
Hardhat installation
To install Hardhat, ensure you have Node.js installed on your computer. Then, initialize a project with npm init -y
and run the following command below:
$ npm install -D hardhat
If installed properly, execute Hardhat with this command:
$ npx hardhat
888 888 888 888 888
888 888 888 888 888
888 888 888 888 888
8888888888 8888b. 888d888 .d88888 88888b. 8888b. 888888
888 888 "88b 888P" d88" 888 888 "88b "88b 888
888 888 .d888888 888 888 888 888 888 .d888888 888
888 888 888 888 888 Y88b 888 888 888 888 888 Y88b.
888 888 "Y888888 888 "Y88888 888 888 "Y888888 "Y888
Welcome to Hardhat v2.0.8
? What do you want to do? …
❯ Create a sample project
Create an empty hardhat.config.js
Quit
npx
comes with Node.js when installed and helps execute executables installed on your local environment.
To ensure Hardhat executes in your project, run the command again:
$ npx hardhat
Hardhat version 2.0.8
Usage: hardhat [GLOBAL OPTIONS] <TASK> [TASK OPTIONS]
GLOBAL OPTIONS:
--config A Hardhat config file.
--emoji Use emoji in messages.
--help Shows this message, or a task's help if its name is provided
--max-memory The maximum amount of memory that Hardhat can use.
--network The network to connect to.
--show-stack-traces Show stack traces.
--tsconfig A TypeScript config file.
--verbose Enables Hardhat verbose logging
--version Shows hardhat's version.
AVAILABLE TASKS:
accounts Prints the list of accounts
check Check whatever you need
clean Clears the cache and deletes all artifacts
compile Compiles the entire project, building all artifacts
console Opens a hardhat console
flatten Flattens and prints contracts and their dependencies
help Prints this message
node Starts a JSON-RPC server on top of Hardhat Network
run Runs a user-defined script after compiling the project
test Runs mocha tests
To get help for a specific task run:
npx hardhat help [task]
This same command also checks the available tasks Hardhart offers. Hardhat also offers an ecosystem of plugins, meaning there are more libraries you must install when working with Hardhat, including the following:
npm install --save-dev @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers
This includes:
-
hardhat-waffle
, a plugin to test your smart contracts -
hardhat-ethers
, which allows you interact with your smart contract from the frontend -
chai
, a Node.js testing library
The Hardhat network
Remember that smart contracts cannot deploy to a central server like a traditional application; rather, they must deploy to the Ethereum blockchain network that requires spending ETH currency.
Because the Ethereum network is the server, ensure you test your smart contract before deploying to the Ethereum network, also called the mainnet. To test, we need a local blockchain, which Hardhat offers to us with Hardhat Network.
To begin this network, run the following command:
$ npx hardhat node
Started HTTP and WebSocket JSON-RPC server at http://127.0.0.1:8545/
Accounts
========
Account #0: 0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266 (10000 ETH)
Private Key: 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80
Account #1: 0x70997970c51812dc3a010c7d01b50e0d17dc79c8 (10000 ETH)
Private Key: 0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d
...
In your project folder, you should see Greeter.sol
in the contracts folder:
//SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.0;
import "hardhat/console.sol";
contract Greeter {
string private greeting;
constructor(string memory _greeting) {
console.log("Deploying a Greeter with greeting:", _greeting);
greeting = _greeting;
}
function greet() public view returns (string memory) {
return greeting;
}
function setGreeting(string memory _greeting) public {
console.log("Changing greeting from '%s' to '%s'", greeting, _greeting);
greeting = _greeting;
}
}
To compile this, run the following:
npx hardhat compile
Hardhat benefits
A few of the most common benefits of using Hardhat as your DApp framework include the following. Remember, these are the most common, you might have a personalized benefit, too:
First, Hardhat is under active maintenance because it is one of the most used frameworks for building decentralized applications.
This can be attributed to its open source format with large community support thanks to over 17k users on GitHub and an active Discord community with 4.6k members at the time of posting this article. It is continuously under development and growing quickly.
And, with its technology based in JavaScript and TypeScript, it’s easy for JavaScript developers to pick up.
Hardhat disadvantages
One main disadvantage of Hardhat is that it is clearly for professionals and not beginners since its documentation is fairly brief on how to get started. Beginners building DApps might need to try other frameworks like Truffle before looking into Hardhat.
Truffle
Truffle is another framework for building decentralized applications on the Ethereum blockchain. It is the most popular and one of the pioneer frameworks. It offers the aid of compilation, deployment, and testing.
Most other frameworks followed Truffle’s path, and if you are someone new in DApp development, you will most likely encounter Truffle due to its beginner-friendly setup.
It can also be used for other earned value management-compatible (EVM) blockchains like Binance Smart Chain, Hyperledger, Polygon, and more. It also supports the Solidity and Vyper languages.
And, if you are familiar with Node.js, it is an edge because Truffle is written in JavaScript.
Truffle installation
You must have Node.js installed on your PC to begin. Installation is easy, you just run this command in your project:
$ npm install -g truffle
Next, initialize Truffle in your project:
$ truffle init
If successful, this is what you should see below:
Starting init...
================
> Copying project files to /Users/macbookpro/Desktop/Projects/dapp-truffle
Init successful, sweet!
Try our scaffold commands to get started:
$ truffle create contract YourContractName # scaffold a contract
$ truffle create test YourTestName # scaffold a test
http://trufflesuite.com/docs
The project structure is as follows:
$ dapp-truffle ls -1
contracts
migrations
test
truffle-config.js
The Truffle network
Truffle offers a development network to run and test DApps without needing to deploy to the mainnet and serves as a local development blockchain for testing.
In the truffle-config.js
file, the network object comes with development and advance network configurations:
networks: {
development: {
host: "127.0.0.1",
port: 8545,
network_id: "*", // match any network
websockets: true
},
live: {
host: "178.25.19.88", // Random IP for example purposes (do not use)
port: 80,
network_id: 1, // Ethereum public network
}
}
The development configuration is the default network where you run the following command:
$ truffle migrate --network
To compile your smart contracts, use the command below:
truffle compile
Truffle benefits
Due to its popularity and widespread usage, Truffle has wide support from its users, with over 35k GitHub users at the time of posting.
And, like Hardhat, maintenance is continuous to provide active support, and Truffle supports local blockchain, testnet, and deploys to the mainnet easily.
Truffle disadvantages
Debugging in Truffle is not as easy as Hardhat because Truffle requires you to create events and throw them into a log, making you look for that event. Whereas in Hardhat, you have a console.log
prompting messages on the terminal, making you debug faster.
Embark
Embark is another framework for the EVM blockchain that is regarded as a full-stack framework. This means the framework offers the solution of building an entire decentralized application’s frontend and backend simultaneously.
Embark watches for changes in your Solidity smart contracts and frontend (HTML and JavaScript) code, and redeploys them to the blockchain network.
Embark installation
Before installing Embark, ensure you have Node.js installed on your computer. Also, Embark requires you to have the following installed as well:
- The Ethereum Client that provides a blockchain network to test our application
- IPFS that helps store files in a decentralized manner
While these are optional, it is still recommended to install them.
Installing Embark is pretty straightforward:
$ npm -g install embark
To begin working with Embark, we must first run the following command:
$ embark demo
$ cd embark_demo
This creates a scaffold application with all required folders to work with. With that in sight, you run the application to spin up the Ethereum and IPFS nodes. Remember, Embark watches for changes in your code so it redeploys:
$ embark run
The Embark network
Remember we must still connect to a blockchain network so we can test it through interacting; Embark can work with clients such as Geth or Parity.
In the config/blockchain.js
file, you can configure the blockchain you want. The below code is a sample from Embark’s documentation:
module.exports = {
default: {
enabled: true,
client: "geth"
},
development: {
clientConfig: {
miningMode: 'dev'
}
},
testnet: {
endpoint: "https://external-node.com",
accounts: [
{
mnemonic: "12 word mnemonic"
}
]
}
}
Embark’s benefits
Embark has slightly more stars from the GitHub community than Hardhat, coming in at about 3.4k stars. It also comes with a UI dashboard that gives a survey of the processes Embark is working on for those interested in deploying to the web rather than a console.
And, as stated previously, it’s a framework that helps build full-stack solutions, which other frameworks mentioned in this article cannot do.
Embark disadvantages
From my observation when trying to run Embark, I ran into some errors while installing. After that, there were warnings on my terminal when I checked the currently installed version.
Also, the project looks stale because there have been no contributions to it for 14 months at the time of writing this article.
Brownie
Brownie is a framework that builds applications for the EVM but is Python-based, meaning it supports the programming language Vyper, a Python smart contract language. Brownie also supports Solidity.
Unlike other frameworks mentioned in this article, Brownie’s test language is Python using hypothesis.
Overall, Brownie handles deployment, testing, and debugging. Deployment is easy when deploying to the local or testnet blockchain.
Brownie also supports a mainnet fork, which takes a live snapshot of the current blockchain if you want to communicate with certain smart contracts that are not available on the local or testnet blockchain.
Brownie installation
Installation can be done via pipx
or pip
, but pipx
is the recommended way by Brownie.
Install pipx
if you don’t have it:
python3 -m pip install --user pipx
python3 -m pipx ensurepath
Then, install Brownie:
pipx install eth-brownie
The Brownie network
Brownie offers development and live environments that allow testing. These environments can be configured on the terminal using a few commands.
To view existing networks, use the following:
$ brownie networks list
Brownie - Python development framework for Ethereum
The following networks are declared:
Ethereum
├─Mainnet (Infura): mainnet
├─Ropsten (Infura): ropsten
├─Rinkeby (Infura): rinkeby
├─Goerli (Infura): goerli
└─Kovan (Infura): kovan
Ethereum Classic
├─Mainnet: etc
└─Kotti: kotti
Development
├─Ganache-CLI: development
└─Ganache-CLI (Mainnet Fork): mainnet-fork
To add a new network, add the following command:
$ brownie networks add \[environment\] [id] host=\[host\] [KEY=VALUE, ...]
Brownie benefits
Brownie has a built-in console for project interaction, which other frameworks do not offer. For example, adding a network through the console lets you run a command to add a network quickly rather than writing it in your codebase.
It is also superior to others since it fully supports Solidity and Vyper, which are two different smart contract languages.
And, with its interactive mode when running tests, if a test fails, it stops and shows in the console, alerting the user.
Brownie disadvantages
Because Brownie is a Python-based framework, JavaScript devs will not be able to easily use the framework.
OpenZeppelin
OpenZepplin is a toolkit with plugins that help build smart contracts faster. For example, it has major standard tokens like ERC-20 and ERC-721 implementations and more.
To use any of the smart contracts in OpenZeppelin, you must import them into your own smart contract. Note that OpenZeppelin is actually distributed as an npm package, meaning you must install Node.js first.
OpenZeppelin installation
To install OpenZeppelin, use the following command:
$ npm install @openzeppelin/cli
To set up an OpenZeppelin project, use the following:
$ npx openzeppelin init
With an example smart contract from OpenZeppelin’s documentation written below, we must compile the following code:
// contracts/Counter.sol
pragma solidity ^0.5.0;
contract Counter {
uint256 public value;
function increase() public {
value++;
}
}
To compile, run the following:
$ oz compile
You can use openzeppelin compile
or oz compile
, but oz
is just a short command to pick.
The OpenZeppelin network
Deploying our smart contract is just as easy as compiling them; OpenZeppelin uses Ganache as a network for development where you can have a local blockchain. You should install Ganache if you do not have it yet:
$ npm install ganache-cli
To start a new process, run the following:
$ npx ganache-cli --deterministic
Then, deploy the smart contracts:
$ npx oz deploy
✓ Compiled contracts with solc 0.5.9 (commit.e560f70d)
? Choose the kind of deployment: upgradeable
? Pick a network: development
? Pick a contract to instantiate: Counter
✓ Added contract Counter
✓ Contract Counter deployed
? Call a function to initialize the instance after creating it?: No
✓ Setting everything up to create contract instances
✓ Instance created at 0xCfEB869F69431e42cdB54A4F4f105C19C080A601
OpenZeppelin benefits
OpenZeppelin has many implemented functionalities, like creating an ERC-20. Because this is already available within OpenZeppelin, you do not need to reinvent the wheel, saving time when developing.
It also has thorough documentation, helping you understand what OpenZeppelin offers. Most of its contract functionalities are upgradeable, meaning you can modify the plugins yourself.
OpenZeppelin disadvantages
OpenZeppelin provides upgradeable contracts, but the downside is that there's an admin role to handle implementation, which can impose security risks.
How to choose the right framework for your DApp project
The best way to choose the right framework for a project is to understand what you want to build and what necessary toolkit you need. Perhaps you want something that is Python-based, which definitely points to the Brownie framework as your only option.
Another aspect to consider when choosing a framework is understanding its community and support for that selected framework. What if there is a major bug? Could you and your team fix it? Or is the community strong enough to help fix it?
Conclusion
With the recent rise in the development of DApps, more tools have spun up to help build applications faster. The most common and most used are Hardhat and Truffle, but this is not limited to all developers.
If you have a project in mind, skim through each framework’s documentation to see which suits you best. Note that these frameworks are constantly undergoing maintenance and might need your support as well since they are open source in Web3.
LogRocket: Full visibility into your web apps
LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
Top comments (0)