đ§ Who the hell is this Web 3.0 of yours?
Crypto is becoming more popular and itâs becoming more and more common to hear âweb3â in conversation.
This piece will talk about practical developer preparation for the transition to Web 3.0.
I want to talk about this topic, as I myself in December 2021 thought about the transition and already 2 months later switched to full-time crypto.
đĄ If youâre a frontrunner, youâre 90% ready to make the switch to Web 3.0 work
What stays the same?
You still need to make user interfaces in the frontend đ
You still need to take care of user-friendly interfaces, user accessibility, and optimizations. All your knowledge of frameworks (React, Vue, Svelte, etc) is still relevant and will be needed in the process. In the end, it all comes down to DOM manipulation. The difference is in how Web 2.0 and Web 3.0 applications handle data and authentication.
Whatâs different?
The major paradigm shift in Web 3.0 occurred in the data and authentication phase of the process.
Authentication.
Instead of having accounts on every site in Web 3.0 for any project, all you have to do is have a crypto-wallet. Your wallet is a repository of data and assets you own that you can use in any dApp.
đĄ A dApp is a Web 3.0 site or app
Very similar authorization interfaces using social networks have migrated to choosing a wallet to connect to on the site. The advantage of this authorization method is that we donât leave our contact address, which is most often passed on to applications when authorizing through social networks. You can keep your crypto-wallet as impersonal as possible, authorize on all platforms, and not get any spam. Also, decentralized applications donât require you to pass any verification and additional KYC (Know Your Client)
Interaction with the server
Instead of making network requests to centralized API servers, you start reading data from the blockchain directly. Typically, smart contracts are used to do this. As a Web 3.0 engineer, you will interact with smart contracts on a daily basis. Make sure you have a good understanding of what a smart contract is, how it works, what the ABI of a smart contract is, etc.
đĄ You can read about smart contracts at binanse, there is an interesting article about ABI at habr
Also, the work with data mutation changes quite a lot. If in Web 2.0 you just send `POST` requests from the user to the backend, in Web 3.0 you need to send a transaction with a smart contract call to the blockchain. The user has to pay a commission for the call (the same gas that goes up to tens of thousands of dollars during high ether load times). So the developer must be careful about calling smart contracts on the frontend. Itâs important to make sure that the right functions are being called, and that the parameters are receiving valid data in the right format. Smart contracts and everything on the blockchain is immutable in nature. Once the data is in the blockchain, it stays there. If you want to change the data you send, it costs money and sometimes itâs impossible, depending on the nature of the smart contract youâre interacting with.
Working with data in Web 3.0 also takes much longer than in Web 2.0. POST requests in Web 2.0 typically take several hundred milliseconds. Smart contract calls and transactions, can take anywhere from a few minutes to infinity.
This is because network nodes must add each transaction to a new block chain. The delay between sending a transaction and adding it to the blockchain depends on the gas fee (i.e., cost) that your user is willing to pay for it. Accordingly, you need to keep in mind the proper processing of requests. Skeletons, lowers, error handling. A transaction in a smart contract can come back after being sent to the blockchain, so you also have to process it and wait for it to be validated in the pool.
Add to all this a huge number of different networks. If your smart contract is in the Ethereum network, the user canât execute it when heâs in Polygon. In the product Iâm working on, we support completely different blockchains and we need to send transactions in many EVM-like networks, but besides that there is support for Solana, which is written in Rust and has completely different smart contracts (in Solana they are called programs)
But donât get frustrated if you donât understand anything about interaction with Solidity, smart contract calls, and block handling. There are many open-source solutions to simplify your Web 3.0 experience:
https://github.com/viaprotocol/web3-wallets
https://github.com/wagmi-dev/wagmi
https://github.com/Web3Modal/web3modal
https://github.com/MoralisWeb3/react-moralis
Moving on to the code đ§đ»
I could go on and on about blockchain, transactions and all that, but for understanding itâs easiest to show the visual difference between Web 2.0 and Web 3.0 workloads đ
- Authorization
Compared to traditional authorization through cookies in Web 2.0, in Web 3.0 you typically ask the user to connect their wallet to the site. While the code to connect the wallet can be boilerplate and confusing, there are many libraries that provide high-level abstractions.
2. Reading data
What do you use to retrieve data in Web 2.0? There arenât really many options, I can only think of `fetch` and `axios`.
In web3, you first create a smart contract instance using the contract address and its ABI. Ethers is one of the most popular libraries for interacting with blockchain. The important thing you have to keep in mind as a frontend engineer is that when you try to read a number from a smart contract (e.g. a balance), the type of value you get will be `BigNumber`, not a number. This means that you have to convert the returned data into a string or a number using the `toString()` method.
3. Writing data
Both reading and writing data to web3 is done through a smart contract function call. As you see, the syntax for writing to a smart contract is no different than that for reading from it.
You need to call the `wait()` method on the received smart contract function call promis to wait for transaction confirmation. The `wait()` method also returns a promis, which is resolved after the transaction has been smynced.
đ Note that we also passed `signer` field to the instance, without it we can only call read methods of the smart contract. The official documentation đ will help to understand more
Guide
And so, to answer the question in the title of this article, letâs summarize what you need to know. If you want to get started in Web 3.0 as a frontend developer, this is a sample guide that you can use as a reference. The guide is inspired by both my personal experience and what Iâve seen others do.
– Learn the basics of blockchain and Ethereum (you can get stuck on this point for a very long time, learn only the essentials)
– Learn about smart contracts.
– Learn about wallets and connecting wallets in Web 3.0 (`provider`, `signer`, various wallet providers)
- Make first frontend project, which simply allows you to connect a wallet and shows the address of the connected wallet (there are a lot of guides on such projects, Iâll attach a lot of sources at the end of the article)
– Check out the open-source projects created for Web 3.0. Find where you can make a Pull Request with some changes. Donât go straight to the roots of working with ISPs, RPCs, and libraries. You can apply your knowledge to writing tests, optimizing the bundle, or writing useful and usable documentation.
– Start looking for work đ At this step of the guide, you have all the basics you need to call yourself a Web 3.0 frontend engineer. I already published a selection of Web 3.0 job sites, try to apply to 8â10 vacancies from there and youâll understand that the market is short of developers and even big projects are ready to take newbies.
đ Right as I was writing this block of paper, I found a couple of articles on âHow I settled into Web 3.0â
Theses.
– You just need a couple of presentations, a pinch of chutzpah and average English (the author is from the CIS) to get a job.
– Even unhyped projects are short of workers. Any initiative is punished with a handful of tokens.
– Despite the title âofficial employmentâ, it is unlikely to be official.
Read it here
A selection of resources to explore
Well, whatâs an article without a huge list of additional articles. Add everything to yourself, schedule time to explore, and build a road map. I havenât fully researched and read all of the resources, but itâs all compiled over ~~6 months~~ *8 months* of Web 3.0 development. Iâll leave out the paid courses because thereâs so much information in the public domain. Save your money for a psychologist or buy your first NFTÂ đ
Enjoy đ Letâs start with courses
– Buildspace.soâââwonât stop recommending these guys, easiest to learn. All courses are free and they have their own job board
– learnweb3.ioâââbeen sitting on their discord for a long time, but never went through their tracks. Seems to be very similar to buildspace.
– https://www.web3.university/â another Bildspace analog I havenât gotten around to
– https://rabbithole.gg/â a place where you get paid for doing Web 3.0 activities and learning protocols
– [https://cryptozombies.io/](https://cryptozombies.io/)âââa classic for solidity basics. *Spoiler alert: at the end youâll learn jQuery
– https://capturetheether.com/âââthe game again, and again about solidity
– https://speedrunethereum.com/](https://speedrunethereum.com/)âââwhatâs a guide without speedruns?
– https://a16z.com/crypto-startup-school/âââ(NOT just for developers)
– https://eth.build/âââ(already gave a link to their playlist at 3 point in the guide)
Roadmaps
– https://vitto.cc/web3-and-solidity-smart-contracts-development-roadmap/
– https://github.com/OffcierCia/DeFi-Developer-Road-Map
– https://web3.smsunarto.com/âââ(NOT for developers only)
Documents
– https://www.openzeppelin.com/contractsâââitâs like BEM in CSS, you canât escape from OpenZeppelin
– https://github.com/ethereum/wiki/wiki/
– https://docs.ethers.io/v5/âââthe most important library for frontend Web 3.0 developers
– https://www.trufflesuite.com/tutorialâ learn how to debug a blockchain
– https://ethereum.org/en/developers/docs/standards/tokens/erc-20/âââERC-20, ERC-721 documentation. Apps, transfers, mint, etc.
– https://wagmi.sh/âââ2 libraries that are nice to read documentation đ
– https://scaffold-eth.github.io/eth-hooks/â 2 libraries that are nice to read documentation đ
All-in-One.
– https://www.useweb3.xyz/âââ(NOT just for developers)
– https://based.builders/âââ(NOT just for developers)
– https://solidity-by-example.org/âââmany different examples of ready-made contracts on Solidity, you can see examples of hacks
– https://cryptomarketpool.com/âââsomething on serious
– https://login.xyz/âââall about EVM wallet authorization
– The Complete Guide to Full Stack Ethereum Development
Thanks for reading. Subscribe to my channel and Welcome to Web 3.0Â đ
New to trading? Try crypto trading bots or copy trading
How frontend dev can upgrade from Web 2.0 to Web 3.0 was originally published in Coinmonks on Medium, where people are continuing the conversation by highlighting and responding to this story.