What is the difference between WebWeb root end? -1

Hello! This is @jio_jake.
This post is a Korean translation of what I wrote in paragraph.xyz. You can get the fastest updates by subscribing to our publication

---

Image created with [Dall-E-3]

hello! My name is @jio_jake. I am currently working as a front-end developer at @Yooldo_Games, a blockchain gaming platform.

I joined the team last year with very little knowledge of Web3, so I joined the team without being familiar with the ecosystem or Web3 development. About a year and a half have passed since then, and I started a tech blog to share the insights and development tips I gained and contribute to the ecosystem.
What I can tell newbies in crypto development like me last year is that compared to the uncertainty and direction of the market situation, blockchain development is surprisingly clear and cool. I will periodically share the insights and tips I have gained through the blog, so I would appreciate it if you could subscribe.

What do front-end developers usually do?

---

Before we get into it, according to my personal experience, there is no big difference between Web3 front-end developers and Web2 front-end developers. There may be a slight difference in the technology stack, but the development environment is not significantly different. It would be more accurate to refer to the differences in business sectors rather than distinct technologies.

From my past experience, the essential qualifications for a frontend developer are as follows:

• UX (User Experience). Tracking user activity in our service is a really important clue for front-end developers.
• Javascript. The recent growth of the Javascript ecosystem is truly remarkable. Most things can be done with Javascript.
• Frameworks such as React. I don’t think it is an essential skill, but I think it is close to essential if you are a developer who wants to join a company.
• Collaboration and soft skills. A front-end developer is literally a job at the end. Sometimes we need to align all team members’ understanding of the product task.
• Problem solving ability. If you know the team business well and know the internal technology architecture well, you must be able to apply it.

Front-end engineers are always focused on improving user experience. If business terms that are difficult to understand at once are explained in a user-friendly way, or the churn rate is high or the process is complicated when drawing a user journey map, we focus on improving it. However, in the Web3 environment, there are slightly different things that front-end developers need to pay attention to when approaching a user-friendly approach.

UX in Web3 dapp

---

The very first time I joined the current team, there was a time of onboarding for current projects. What was a bit interesting was that there were a lot of words here and there in the product that corresponded to Web3 jargon or proper nouns (business language) that we had defined.
Nevertheless, over 30,000 users (I think it would be better to say fans) were gathered in our community and talking. I was curious about how on earth they gathered users. Surprisingly, the answer is simple.
It was the closed group culture of Web3 users.

Let’s talk about it in more detail. Below is a brief version of Web2 user's journey map.

1. Users discover our service by chance. It enters through various channels such as social media advertising, viral marketing, and word of mouth.
2. A new user is joining the service.
3. The service carefully considers users. A device is installed to prevent the bounce rate, and it identifies interests and shows recommended products.
4. Users who suit their tastes become loyal to the service. The number of loyal customers has increased by one.

This is a very honest journey map of a typical Web3 service.

First, it is a flow that presupposes that there is already a large community and community builders within it.

1. The user first heard of our service in Closed Group. It is said that they have partnered with a very famous large blockchain (chain, wallet). The KOL (Key Opinion Leader) strongly recommended the project.
2. Users have decided to trust our service. Because there is a big, trustworthy company next to this project.
3. The user decides to spend some ETH for events, etc. Of course, you can also connect your wallet to our service.
4. The cycle repeats. Wow! We have become a project with hype!

Users have the characteristic of not being hesitant to spend a little money. As a front-end developer, the interesting part is that users learn to use the service on their own. This doesn't happen often in Web2. There are so many competing products that you just have to leave. Therefore, we do not need to provide users with tutorials on very simple wallet integration, etc. You know this much, right? There are some parts that can be overlooked with this thought.

So what should we focus more on?

Personal Conclusion: Correlation between Squeezing and Product

The answer to the above question varies from team to team. I am currently working in blockchain gaming. We make really cool games in-house and get them from outside. It's not because it's the company I work for, but I think there aren't many blockchain gaming companies that are as serious about games as we are.

---

Troublepunk, a battle royale game you can enjoy on PC

RPD, a mobile defense game you can enjoy on Android

We are now living in the era of dopamine. So, there is a tendency to easily get tired of long-form content. I think the game is long form.

Dizens and prospective Dizens want to use their time efficiently. So, through user analysis, we prepare very quick and short interactions separate from the game. For example, tasks such as daily check-in or selling limited edition NFTs. These tasks are very convenient and easy to interact with. Simply connect your wallet and press a button.

Let's take another example: What if I was the FE of the paragraph?

Let me give you a clearer example. If I were a developer of paragraph, how could I improve the UX?

---

This is my first time signing up for paragraph.

Hmm.. I just connected the wallet, but it says an unknown error has occurred.

This error appears to occur when connecting to a chain that is not supported by the project. This happened because my MetaMask chain setting was Linea. So I changed it to the Ethereum mainnet.

After pressing the back button and changing to the Ethereum mainnet...

You can finally sign up!

It is quite inconvenient to have to press the button on the top left of the User Journey screen and select a network. Most Web3 users are well aware of this because it is not uncommon, but there is definitely room for improvement.

I place these invisible tasks in the background without user interaction. It's a simple example, but continuing to think about this kind of thinking is one of the ways to improve UX as a Web3 front-end engineer. Here are some tips for quick and easy interaction.

paragraph The team appears to be using web3-modal for wallet integration. The code below is what I wrote under this assumption.

const SignInButton = () => {
  const { open: openWeb3Modal } = useWeb3Modal();
  const { address, isConnecting } = useAccount();
  const chainId = useChainId();
  const { switchChainAsync } = useSwitchChain();

  const handleOnclick = async () => {
    // check current user wallet chain is supportive or not
     if (!supportedChains.has(chainId)) {
       await switchChainAsync({ chainId: mainnet.id });
     }
     openWeb3Modal();
  }
  return (
    <button onclick="{handleOnclick}">
     {isConnecting ? 'Awaiting Confirmation' : 'Signin'}
    </button>
  )
}

Web3-modal is a service built using Walletconnect, Viem, and Wagmi. So you can receive support for powerful hooks and utility functions. Using these elements in the right place can greatly improve the user experience.
There is one last detail. Sometimes, some mischievous users do various things when wallet interactions occur. One of them is changing the chain right before sending a transaction. And proudly found the bug! I post it on the Discord community, Twitter, etc. So, it is important to always check the current environment when interacting with a wallet. Like below:

• Is the user’s wallet address the same as registered off-chain?
• Are users connecting to chains we support? The more facts you need to check, the better. There are more tips in terms of improving the UX of smart contract interactions, and I will come back soon and share some tips with you.

finish

---

As I mentioned at the beginning of the article, I don't see Web3 frontend development as fundamentally different from Web2 frontend work. In fact, Web3 from a technical perspective is much sharper and clearer than the ambiguous and always-changing market situation.
It's hard to deny that Web3 services are sometimes not very user-friendly. Because it is essential to have the function of wallet and on-chain interaction. However, if you are a frontend developer, there are things to worry about. We must analyze the target users of our service and try to understand the needs of core users. You can optimize UX by drawing a user journey map and reducing inconvenient points.

Today, I briefly shared the UX regarding wallet connection. There are still many points where Web3 can improve UX, and there are many things I would like to share.

If you liked the article, please subscribe and share. Thank you for reading this long article. See you in the next post.

The above is the detailed content of What is the difference between WebWeb root end? -1. For more information, please follow other related articles on the PHP Chinese website!