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

------------

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

### 概述

阅读大牛郭宇的文章

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

第四篇笔记见这里：[here](https://blog.jlab.tech/jlab-4)，主要是合约开发的全流程实践。

本文聊前端开发。

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

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

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

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

1. ether.js（或者wagmi封装版，提供稳定hooks），啥是hooks？[这里](https://zh-hans.reactjs.org/docs/hooks-intro.html)

2. scaffold脚手架，多数人推荐[scaffold-eth](https://github.com/scaffold-eth/scaffold-eth)， 来入门开发，你熟悉后，会建立自己的开发模式。[Github](https://github.com/scaffold-eth/scaffold-eth)

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

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](https://github.com/makerdao/multicall.js),放在一次事务中，会节约部分gas。

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

7. UI库大家一般选择：[mui](https://mui.com/zh)，[NextUI](https://nextui.org/),这个我也是普通用户，UI熟悉的同学可以聊下看，各自的优缺点。

下一篇聊客户端开发。

-------