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
下一篇聊客户端开发。