It has never been a better time to be a Web3 developer. There has been a large amount of growth in developer tools. These tools aim to make the lives of Web3 builders more efficient, easier, and more enjoyable.
The truth is that sometimes having many options can be more a curse than a blessing. It is exciting to have new tools to learn and build with. It can also be stressful choosing the right tool to learn and develop with.
This guide is here to make your life easier by finding the right Web3 developer tools. For this guide, we will focus on Ethereum-based tooling.
Table of Contents
Smart Contract Development
Web3 applications need a way to interact with a blockchain and smart contracts. Writing smart contracts is an important piece of the developer toolchain.
This fact can be intimidating for some beginners. Learning a new language in Solidity takes time. There are also high costs you want to avoid if there of any vulnerabilities in the contract code.
Fortunately, there are tools to make developing, testing, and deploying smart contracts more efficient and safe. Truffle has been a popular choice for this for a while. It offers built-in debugging and testing features to ensure
It offers built-in debugging and testing features. This includes a developer’s favorite debugging tool: console.log. You can also write deployment scripts using Truffle. This makes it easier to migrate and upgrade your application over the long term.
Truffle is not without competition. Hardhat and Foundry are the two smart contract developer kits that have seen a lot of growth. Both kits enable developers to write, compile and test their smart contracts. All these tools allow developers to deploy to either a local blockchain or a live network all within a CLI.
Each offers different project structures so switching between them can take some time. The main difference between them is how they handle testing. Hardhat uses JavaScript, Foundry uses Solidity and Truffle supports both. Foundry provides an increase in performance which has led to its growth in the developer community.
JavaScript Libraries
The next step after deploying smart contracts is to find a way to interact with them. For any Web3 application, the choice is between two JavaScript libraries: web3.js or ethers.js. Both libraries provide a similar solution for developers but in different ways. Ethers.js uses a split entity approach. A wallet entity for signing transactions. A provider entity connects to the blockchain by adding a JSON-RPC URL. Web3.js does not offer this separation.
Web3.js’s popularity is down to it being the only JS library developers could use for some time. This has allowed the community to create many resources and learnings from using it. Ethers.js has now become the developer’s choice in newer projects. It is smaller in size and offers more flexibility between wallets and RPC providers. It also parses ENS .eth domains without any extra code.
RPC Node Providers
An important part of completing the above steps is to establish a connection to the Ethereum blockchain. RPC Node providers allow applications to connect and sent messages through them. You only need an API endpoint and API key setup to do this. The popular choices in this category are Alchemy, Infura, and QuickNode.
Each of these providers offers similar services. Budget-friendly developers that are just getting started will like Alchemy’s free tier. You can have a total of 5 deployed apps and 300,000,000 compute units/mo.
A benefit of using Infura is its tight integration with other ConsenSys tools. For example, using the ‘Truffle for VSCode’ Extension enables deployment to Infura directly in the IDE. There are also some private key management tools so you don’t have to worry about exposing sensitive information.
QuickNode offers support for over 19 different chains which is the most of out the three. By their benchmarks, it also has the fastest response times on the market. Like the other providers, they also offer tools around analytics, alerts, and NFTs.
Your budget, your use case, or your tool stack will help you make the best decision between node providers. Another alternative to the RPC providers is using a network like EthWatch. This network allows you to listen to on-chain events in real-time without polling a node or API endpoint. They offer a JS client library you can integrate into the frontend of your application.
Authentication and Identity Providers
After building your application, you probably want users to actually use it. For Web3 applications, this requires users to connect their wallets to your application. Two popular providers for developing the ‘Connect with Wallet’ experience are Wallet Connect and RainbowKit.
You can’t go wrong with either choice. They both offer a good level of customization, work well with popular React hooks of wagmi and have a neat mobile experience. Both also provide an SDK to integrate their flows into your application in a few lines of code.
If you are looking for a different Web3 authentication experience, there is Magic Link. This service provides social and email logins via magic links to onboard users to your application. It is great for onboarding less “crypto savvy” users to your application. It also has integrated user flows for converting fiat and minting NFTs.
React Tooling for dApps
Events occur on-chain that you want to react to in your application. To do this well means using React or NextJS to build your applications. The undisputed leader in this category for React hooks is wagmi.
Wagmi allows you to interact with contracts, connect to RPC providers and integrate wallet providers in one package. The team behind wagmi has also released viem which provides a TypeScript interface like wagmi.
Web3 boilerplates
With all the tools that we explored above, it can be hard to understand how they may all work together and work together well.
Boilerplates simplify the developer experience by grouping tools together. Instead of installing a package one by one, you can install single package including dependencies in one go.
Let’s look at a few of the most popular dApp boilerplates:
Create-Web3-Dapp
Create-Web3-Dapp is a npx tool that allows you to create a Web3 application in just a few minutes.
The toolkit was made by Vitto Rivabella, Elan Halpern, and the team at Alchemy and has, at the time of writing, garnered 753 stars on Github. Not bad considering it was released just a few months ago.
Create-Web3-Dapp includes Next.js, Wagmi Hooks, Ethers.js, Rainbowkit, and Alchemy SDK, providing developers with a comprehensive set of tools and libraries to build production-ready and decentralized applications.
It supports major EVM-based chains such as Ethereum, Polygon, Optimism and Arbitrum. There are also plans to support non-EVM chains in the future.
It also has a “Smart Contracts Backpack” feature. This quickly creates smart contract templates such as ERC20 and ERC721. These contracts come from the OpenZeppelin library so they are audited and production ready.
Scaffold-eth-2
From the amazing group of builders, the BuildGuild, comes scaffold-eth-2. This is a “sequel” to the much-loved scaffold-eth toolkit. This version includes Next.js, RainbowKit, Hardhat, wagmi, and support for Typescript. The toolkit has a “contract hot reload” feature. This connects the frontend to respond to any changes in the smart contract in real-time. This is a great feature to give developers a visual understanding of the relationship between the smart contract and their applications.
The toolkit also provides a collection of custom React hooks that are wrappers around wagmi. These hooks allow developers to perform such actions as reading public variables of a contract or retrieving historical events logs of a contract. This is important information for both developers and users.
Fleek’s Ethereum Boilerplate
When using Next.js, deploying with Vercel is a natural choice for many developers. But what if you wanted to use a decentralized service to deploy your Web3 application? This is where Fleek comes in. Fleek brings together popular decentralized protocols like IPFS, ENS, and Filecoin to create a suite of tools to make it easier for developers to deploy websites and applications without using a centralized service. The team at Fleek has also created an Ethereum boilerplate.
The boilerplate includes Hardhat, Typescript, wagmi, RainbowKit, and Next.js. It also comes with Typechain which creates TypeScript bindings for smart contracts. This helps to avoid receiving annoying type errors when working with contract data such as contracts.Token.address. Another added feature is how deploying to Fleek is more streamlined via the Fleek CLI.
Data transport
Data can be a critical part of your application. If your project depends on real-time data, such as communication across devices or IoT connectivity, Streamr’s SDK will help you leverage the power of data and ensure seamless communication and connectivity across devices.
It allows you to interface with Streamr’s decentralized pub/sub network. This enables you to publish and subscribe to a real-time data stream to display and use the data coming from the stream within your Node.js application. You can also get the historical messages of a stream by using a resend method if your project requires previous data published to your data stream.
Wrapping Up
Winning the hearts and minds of Web3 developers should be the goal of any developer tool. The continued growth of developer activity in this space will bring even more new tools as well as the improvement of existing tools. Looking beyond the hype and excitement of new shiny things can be difficult.
Whatever tool makes you more productive in delivering a great experience for your users is the one you should use. Good luck and keep on building the decentralized future!
Hungry for more? You’ll find plenty of interesting tools in Alchemy’s Web3 developer tools index.
