jLab：郭宇的Web3开发最佳实践阅读笔记-5

---

jLab：郭宇的最佳实践阅读笔记-5

概述

阅读大牛郭宇的文章

https://guoyu.mirror.xyz/RD-xkpoxasAU7x5MIJmiCX4gll3Cs0pAd5iM258S1Ek

第四篇笔记见这里：here，主要是合约开发的全流程实践。

本文聊前端开发。

首先大家要明白，Web版本的DApp，是阶段性的，这和移动、便捷的应用发展趋势相悖。

另外原因是移动版本技术方案太过复杂，体验并不好，包括Android的软件安全，也会造成助记词被内存偷窥等等原因。当然，上文提到了钱包托管服务，不过这样又回到了中心化服务的老路，和Web3趋势不相符。

因此，当下，我们主流技术栈，一个DApp依然选择Web前端技术栈：JavaScript，React.js/Vue.js 。

偏好不同，选择不同，但同时也要注意兼顾开发效率，因此：

1. ether.js（或者wagmi封装版，提供稳定hooks），啥是hooks？这里

2. scaffold脚手架，多数人推荐scaffold-eth， 来入门开发，你熟悉后，会建立自己的开发模式。Github

3. 郭宇原话：对于没有任何偏好的读者，我推荐你使用 React + Next.js 来初始化新项目，Next.js 使用 React 作为基础视图框架，并提供了丰富的工作流，简单的路由系统，好用的 SSR 与 FaaS 支持，当然，它也是一个非常好用 site builder 工具，Next. 这里补充一点，Next.jx是一个基于React库的开发框架，整合了简单路由、应用部署、SSR、SSG等等，应该说更好用些。扩展阅读：对比。

4. 合约交互：本质是使用js的xhr发送请求到signer或者relay来和链上合约交互。这个过程：

   1>打开网页后，默认只能调用view类别的方法获取返回值，例如获取ens，获取余额等？。

   2>点击连接钱包，connector进行通信，获取链接状态，授权连接后，可以通过connector获取默认连接网络，以及发送请求让用户更改网络。

   3>在和合约page交互后，提交交易给relay，然后监听交易的event，等候通知。

   4>签名后也可以仅仅通过connector发布一些加密后的数据交互。

5. Relay network例如Infura等，需要申请一个key（有免费限量的访问服务，足够个人使用），这里要和大家讨论下：Provider是不同的提供者，例如metamask的inject web3或者relay的js对象，而connctor是一个在此之上的抽象概念，是建立链接后的对象，大家理解是? 如果多个合约ABI的写操作，有 Multicall.js,放在一次事务中，会节约部分gas。

6. 事实上，我们使用很多前端依赖：前面提到的wagmi,还有更复杂的useDApp,不过这个我个人了解不多。登录可以使用SIWE，EIP4361的实现。多语言郭宇推荐：如果你的 Next.js DApp 计划提供多语言版本和检测，我推荐你使用 i18next 与 react-i18next 与 i18next-browser-languagedetector

7. UI库大家一般选择：mui，NextUI,这个我也是普通用户，UI熟悉的同学可以聊下看，各自的优缺点。

下一篇聊客户端开发。

---