Skip to main content

Web3 app development

On this page, you will learn what Web3 applications are, how they differ from Web 2.0 apps, and how to get started with Web3 app development on Lisk.

What are Web3 applications?​

Evolution of the Web​

Since the internet was born, there has been constant innovation in how people use the internet to communicate and interact with each other. To describe important steps in this innovation, websites, and apps are generally categorized into different Web "versions":

Web3 (also known as Web 3.0) is the next step in the evolution of the Web, aiming to address the limitations of Web 2.0. Web3 is based on the idea of a decentralized internet, where users are in control over their data.

info

The term "Web3" was coined by Polkadot founder and Ethereum co-founder Gavin Wood in 2014, referring to a decentralized online ecosystem based on the blockchain.

2015 marked the beginning of the Web3 era when Ethereum launched as the world's first programmable blockchain. Web3 applications are decentralized applications (also known as "dApps") that run on a blockchain, allowing users to interact with each other and the blockchain in a trustless way. This puts users in control of their data and privacy, removing the need to trust a central authority.

Web3 apps are built on top of blockchain technology, which allows users greater ownership and control over their data. This provides new features and allows services that are not feasible in the Web2 world. Often, Web3 apps combine other cutting-edge technologies like AI to provide unique and new user experiences.

New types of Web3 apps include:

  • DeFi (Decentralized Finance), for example:
    • DEXs (Decentralized Exchanges)
    • GameFi (Gaming Finance)
    • Staking and yield farming platforms
    • Decentralized crowdfunding and investing platforms
    • Decentralized lending and borrowing
    • Prediction markets
    • Asset / RWA tokenization platforms
  • DAOs (Decentralized Autonomous Organizations)
  • DeSoc (Decentralized Social Media)
  • DeSci (Decentralized Science)
  • DePIN (Decentralized Physical Infrastructure Networks)

Web3 is a promise to bring back the original vision of the internet, where users are in control of their data and privacy, and where the internet is a place for free speech and innovation. However, how blockchain technology is implemented and used in apps can vary greatly, and not all Web3 apps are equally decentralized and trustless.

Further reading​

Getting started with Web3 app development​

Platforms​

To get started with the actual development of a Web3 app, you need to be clear about the right platform(s) to build your Web3 app on. The following sections will give you an overview of the different platforms you can choose from to build your Web3 app on, including further resources and guides to get you started with the app development.

Mobile applications are generally a great way to reach a large audience, as most people have a smartphone and use it to access the internet. Mobile apps can use the integrated features of handheld devices and are typically faster and more user-friendly than websites. This can provide a more immersive experience for users. Last but not least, mobile apps allow users to access your app on the go, which can be a big advantage for many use cases.

Guides​

Onboarding Web2 users to Web3​

A significant challenge for Web3 applications is delivering a user experience that is as seamless as what users expect from Web2 applications.

To onboard Web2 users to Web3, apps need to simplify user interaction so that it feels natural and intuitive to them while still providing the benefits of Web3 in a secure way. To aim for a smooth user experience, and to abstract the complexity of blockchain technology away from the user, it is highly recommended to include "account abstraction" (sometimes also referred to as "smart accounts", "smart wallets" or "smart contract accounts") into your Web3 application.

Account Abstraction and Smart Accounts​

Account abstraction is a concept that introduces an additional layer over the blockchain, which delegates most of the complexity of interacting with the blockchain away from the user to smart contracts. It has the potential to significantly enhance the user experience of Web3 applications, as it allows users to interact with the app in a more user-friendly and secure way. Account abstraction is also sometimes referred to as "smart accounts" or "smart wallets", because it puts most of the logic of handling transactions and user interactions into smart contracts.

This unlocks a range of features that significantly enhance user experience:

  • Signature Abstraction: Users no longer need to manually sign transactions with private keys. Instead, smart contracts handle the signing logic, eliminating the risk of user error and phishing attacks.
  • Enhanced Security: Multi-signature wallets, social recovery mechanisms, and custom access controls can be implemented within the smart contract, mitigating single points of failure and theft risks.
  • Customizable Transactions: Smart contracts can be programmed to include spending limits, time-locked transactions, and dApp-specific controls. This allows to automate transactions and tailoring the user experience to specific needs.
  • Fee Abstraction: Transaction fees can be dynamically managed through smart contracts, enabling features like custom gas tokens and gasless transactions for specific use cases.

On the technical side, account abstraction is implemented by the ERC-4337 standard, which defines a set of interfaces and functions that smart contracts can use to interact with the blockchain on behalf of users.

It comprises the following fundamental components:

  • UserOperation: A structure that describes a transaction to be sent on behalf of a user. To avoid confusion, it is not named “transaction”. Like a transaction, it contains sender, to, calldata, maxFeePerGas, maxPriorityFee, signature, nonce. Unlike a transaction, the use of the signature field is not defined by the protocol but by each account implementation. Also, it contains several other fields, described in detail in ERC-4337.
  • Account Contract: The user's smart account sending a user operation.
  • EntryPoint: A singleton contract to validate and execute bundles of UserOperations. It manages the verification and execution logic for UserOperations, ensuring they are processed correctly.
  • Bundler: Bundlers are contracts that package UserOperations from a mempool and send them to the EntryPoint. Bundling is the process where a node/bundler collects multiple UserOperations and creates a single transaction to submit onchain.
  • Account Factory: When using a wallet for the first time, this contract specifies the creation of the smart contract wallet.
  • Paymaster(optional): a helper contract that agrees to pay for the transaction, instead of the sender itself. Paymasters can cover gas costs for users, sponsor specific transactions, or implement custom fee models, opening doors for novel use cases.
Further reading​

Testing and deployment​

When it comes to testing and deployment of Web3 apps, there are some additional aspects to consider compared to Web2 apps. The intrinsic vulnerabilities of smart contracts, the immutability of blockchain data, and the interactions with a decentralized network, call for specific testing and security measures. Gladly, many tools are already available to help developers ensure the security and reliability of their Web3 apps. The list below provides a selection of popular tools and services used to test Web3 apps:

Smart contract test suites​

Often, smart contract development frameworks come with built-in testing tools that simplify to create comprehensive tests for smart contracts. This includes utilities to simplify writing of the tests, or the ability to spin up a local node for deploying and testing smart contracts in a local development network, i.e. Devnet.

A selection of popular testing environments for smart contracts can be found below:

  • Foundry: Foundry is a smart contract development toolchain. Foundry provides a robust testing framework that allows developers to create comprehensive test suites for their projects using Solidity. The Forge Standard Library provides a set of utilities to simplify testing smart contracts. It also provides a local testnet node for deploying and testing smart contracts, see Anvil.
  • Hardhat: Hardhat is a development environment that facilitates smart contract development. It comes built-in with Hardhat Network, a local Ethereum network node designed for development. Hardhat allows you to deploy your contracts, run your tests, and debug your code, all within the confines of your local machine. Tests are written in JavaScript, using ethers.
  • Remix: Remix is an IDE that helps you write Solidity contracts straight from the browser. It provides powerful features for testing and debugging smart contracts, like the Debugger or the Unit Testing Plugin.
  • Waffle: Waffle is another framework for developing and testing smart contracts. Tests are written in JavaScript / Typescript.
Guides​

Smart contract code analysis​

To ensure the security of smart contracts, it is essential to analyze the code for vulnerabilities. There are several tools available that help developers to analyze their smart contracts for common security issues and vulnerabilities, for example:

  • Slither: Slither is a Solidity static analysis framework that detects common vulnerabilities in smart contracts.
  • Etheno: Etheno is a tool that helps developers write secure smart contracts by providing a set of rules that can be used to check the security of smart contracts.
  • Mythril: Mythril is a security analysis tool for Ethereum smart contracts.

Testnets​

Testnets are public blockchains that are used for testing purposes. They often have the same features as the mainnet, but the tokens on the testnet have no real value - this allows developers to test their smart contracts and Web3 apps in a real-world environment without risking real assets. Before deploying a smart contract to the mainnet, it is highly recommended to test it on a testnet to ensure that it works as expected.

Public testnets​

The following testnets are available for testing smart contracts and Web3 apps on Lisk:

tip

To get free testnet ETH and/or LSK, check out our available faucets.

Virtual TestNets​

Tenderly recently introduced the possibility to spin up Virtual Testnets. Virtual Testnets are a new way to test your Web3 apps, bringing the onchain data of a mainnet and the flexibility of a local environment together.

Some interesting ways to use Virtual Testnets are:

  • Build your dapps with real, up-to-date mainnet data and test its actual behavior with realistic data access.
  • Get an unlimited faucet and stop begging for test ETH.
  • Mint both native and ERC-20 tokens in any amount you need, impersonate accounts, and test complex scenarios uninterruptedly.
  • Fully customize your development infrastructure to fit your unique workflows.
  • Use Virtual TestNets as CI/CD infrastructure.

Virtual Testnets are easy to provision and configure, giving you full control and flexibility over your environments. You can even manipulate the state of your forked chains with custom values, custom chain IDs, and more, making sure they fit your unique requirements.

E2E testing​

End-to-end (E2E) testing is a type of software testing that tests the complete flow of an application from start to finish. This specifically includes testing the frontend of your application, which ensures that the user interface works as expected. To deal with stuff like wallets, and other Web3-specific things, you might want to use specialized Web3 E2E testing tools.

Synpress is an E2E testing library for Web3 dapps. Synpress can be used with two leading E2E testing frameworks out there, i.e., Playwright and Cypress, with support for all of their features.

Performance testing​

Performance testing is essential to ensure that your Web3 app can handle the expected load of users and their interactions. Measure and improve your app's performance, throughput, and resilience under different levels of traffic and transactions.

Some examples of performance testing tools are:

Continuous Integration and Continuous Deployment (CI/CD)​

CI/CD is a set of practices that automate the process of integrating code changes into a shared repository and deploying them to production.

CI/CD setup with Tenderly​

Use Virtual TestNets in CI/CD pipelines to deploy, test, and stage smart contracts in mainnet-like development environments, eliminating the need for local setups. Learn how to use Tenderly Github action plugin to automate your CI/CD pipeline. The plugin will provision a Virtual TestNet for each pull request, allowing you to test your smart contracts in a realistic environment. Moreover, you can stage smart contracts (continuous deployment), enabling your team to keep building with latest versions of smart contracts.

Monitoring​

Monitoring is important to ensure that your Web3 app is running smoothly and to detect and fix issues before they affect your users.

Some popular monitoring tools are:

Tenderly Alerts​

  • Configure an alert to get notifications on transactions and contract events.
  • Use Alerts API to build granular triggering rules and specific monitoring criteria.

Tenderly Web3 actions​

Use Web3 Actions to automate predefined responses, improving security and user experience.

Tenderly developer explorer​

Tenderly's Developer Explorer is a development toolbox designed to help developers effectively manage, debug, and monitor their Lisk projects. Use the Developer Explorer to debug and simulate contracts with the integrated Debugger, gaining insights to quickly identify and resolve issues.

Web2 vs Web3 app development​

Languages​

Concerning frontend app development, there aren't many differences between Web2 and Web3 apps when it comes to programming languages. All languages that are typically used for Web2 app development can also be used for Web3 app development. In the end, Web3 apps can even look and feel exactly like Web2 apps for users, because their frontend is built with the same technologies.

However, the backend of Web3 apps is quite different, as it interacts with the blockchain through smart contracts. Smart contracts are written in Solidity, therefore Web3 developers need to know Solidity to build the smart contracts they require for their app. Luckily, for many use cases, there are already audited smart contracts available(see OpenZeppelin or thirdweb) that can be used, so developers don't need to write all of their smart contracts from scratch.

Tech stack​

As mentioned above, the Web2 and Web3 app frontend development is very similar. Theoretically, you could build a Web3 app with nearly the same tech stack as a Web2 app, like Next.js, Vite, etc. The only thing you need to add is a way for your application to interact with the blockchain, see Data access.

To support developers, many blockchain platforms offer their own SDKs and tools to interact with their blockchain, which can make development easier and more efficient. There are also SDKs for Web3 app development, like thirdweb or Alchemy, which take away most of the complexity of blockchain development and provide a smooth developer experience. thirdweb supports Lisk and many other EVM-compatible blockchains.

Data storage​

In Web2 apps, data is typically stored in a centralized database. In Web3 apps, some data is stored on the blockchain, i.e., a decentralized database. How the data is stored is defined inside of smart contracts. However, it should be noted that onchain data on a public blockchain is visible to everyone and, therefore, not suitable for all types of data. Especially sensitive and private user data should not be stored on the blockchain, except if it is encrypted. In addition, storing large amounts of data onchain is both expensive and slow. Therefore, Web3 apps sometimes use a combination of onchain storage and offchain storage.

Data access​

In Web2 apps, data from the database is accessed through APIs. In Web3 apps, blockchain data is accessed through smart contracts. They usually expose public functions that can be called by the app frontend to read and/or write data from/to the blockchain, similar to a classical API. To interact with the blockchain, there are various libraries and frameworks available, like viem, web3.js, or ethers.js.

Footnotes​

  1. Only supported in PWA-compatible browsers (most Chromium-based browsers should work). ↩