Victor Jonah I am a Software Developer with over three years of experience working with JavaScript and its frameworks. I currently work as a remote software developer for a tech agency.

Top 5 decentralized app development frameworks

11 min read 3184

Top 5 Decentralized App Development Frameworks

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.

We made a custom demo for .
No really. Click here to check it out.

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

Truffle Suite - Truffle Suite

Sign up today to be a member of the Truffle mailing list. You'll be added to our low volume mailing list which we'll use to communicate future changes, development ideas and allow you to shape Truffle's development.

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:

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.

: 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.

.
Victor Jonah I am a Software Developer with over three years of experience working with JavaScript and its frameworks. I currently work as a remote software developer for a tech agency.

Leave a Reply