jLab：郭宇的Web3开发最佳实践阅读笔记-5
jLab：郭宇的最佳实践阅读笔记-5
概述
阅读大牛郭宇的文章
guoyu.mirror.xyz/RD-xkpoxasAU7x5MIJmiCX4gll..
第四篇笔记见这里：here，主要是合约开发的全流程实践。
本文聊前端开发。
首先大家要明白，Web版本的DApp，是阶段性的，这和移动、便捷的应用发展趋势相悖。
另外原因是移动版本技术方案太过复杂，体验并不好，包括Android的软件安全，也会造成助记词被内存偷窥等等原因。当然，上文提到了钱包托管服务，不过这样又回到了中心化服务的老路，和Web3趋势不相符。
因此，当下，我们主流技术栈，一个DApp依然选择Web前端技术栈：JavaScript，React.js/Vue.js 。
偏好不同，选择不同，但同时也要注意兼顾开发效率，因此：
ether.js（或者wagmi封装版，提供稳定hooks），啥是hooks？这里
scaffold脚手架，多数人推荐scaffold-eth， 来入门开发，你熟悉后，会建立自己的开发模式。Github
郭宇原话：对于没有任何偏好的读者，我推荐你使用 React + Next.js 来初始化新项目，Next.js 使用 React 作为基础视图框架，并提供了丰富的工作流，简单的路由系统，好用的 SSR 与 FaaS 支持，当然，它也是一个非常好用 site builder 工具，Next. 这里补充一点，Next.jx是一个基于React库的开发框架，整合了简单路由、应用部署、SSR、SSG等等，应该说更好用些。扩展阅读：对比。
合约交互：本质是使用js的xhr发送请求到signer或者relay来和链上合约交互。这个过程：
1>打开网页后，默认只能调用
view类别的方法获取返回值，例如获取ens，获取余额等？。2>点击连接钱包，
connector进行通信，获取链接状态，授权连接后，可以通过connector获取默认连接网络，以及发送请求让用户更改网络。3>在和合约page交互后，提交交易给relay，然后监听交易的event，等候通知。
4>签名后也可以仅仅通过connector发布一些加密后的数据交互。
Relay network例如Infura等，需要申请一个key（有免费限量的访问服务，足够个人使用），这里要和大家讨论下：Provider是不同的提供者，例如metamask的inject web3或者relay的js对象，而connctor是一个在此之上的抽象概念，是建立链接后的对象，大家理解是? 如果多个合约ABI的写操作，有 Multicall.js,放在一次事务中，会节约部分gas。
事实上，我们使用很多前端依赖：前面提到的wagmi,还有更复杂的useDApp,不过这个我个人了解不多。登录可以使用SIWE，EIP4361的实现。多语言郭宇推荐：如果你的 Next.js DApp 计划提供多语言版本和检测，我推荐你使用
i18next与react-i18next与i18next-browser-languagedetector
下一篇聊客户端开发。