Web 3 项目前端 repo 代码疑问

[YadongZhang]

可能是普遍现象：

• React 技术栈：

  • 能用 dayjs 为啥代码里普遍使用 moment：个人关注点是 package size （ https://npmtrends.com/dayjs-vs-moment.
  • 有 CSS-in-JS 了为啥还要用 SASS （引申出前端两大 UI 库，后者 bug 太多了 (指 UI 库）.
  • 为啥要用 default export 不用 named export.
  • 为啥不加一下 path alias.

• Vue 技术栈

  • 有 Vue3 为啥还要 Vue2.

  见过 Vue2 写的项目 TS 代码里都是 any.

楼下有补充吗

[anguiao]

去掉 Web 3 可能也适用。
按我个人的粗浅认知，起码在前端层面，暂时没发现 Web 3 和现有的开发模式有多大区别。

[YadongZhang]

@anguiao #1

因为我 Web 2 项目接触的不多，所以不敢评价。。。

[233373]

anyscript

[foil2]

@anguiao web2 项目 + ethers.js / web3.js 等于 web3 😂

[zhixiao]

没啥差别，你说的那几个现象大部分是习惯问题

话说 web3 开发其实跟普通前端开发也没啥差别

[YadongZhang]

@233373 #3

是的，我也愿称之为 anyscript

[YadongZhang]

@zhixiao #5

上面那几个问题可能会影响到开发体验（ DX ）

[daliusu]

聊一下我的认知吧，我觉得你这个跟 web3 没得啥关系

有 Vue3 为啥还要 Vue2.
这个问题我前几天面一个国企也碰到了，他们明明是一家新创的部门，但是技术就是 vue2 ，我们还简单讨论了一阵 vue2 的一些问题（比如 vue2 很多逻辑无法抽离，options 写法太容易把逻辑混杂一起），为什么不直接 vue3+ts ，但是他认为只要你组件抽离做的好就没有这些问题。后来出来我才反应过来，根本原因就是这个前端负责人自己玩不透 vue3 又不太愿意去接触，因为 vue3 明明也能兼容 vue2 的 options 。

path alias 这个我觉得根本无所谓，ts 下都是自动导入，只要别混着一会绝对路径一会相对路径，我觉得都没啥问题

default export 这个看写法，内部规定一下就行。dayjs 和 moment 的问题很多就是习惯和第三方库了，一些第三方库用的 moment 还要自己替换掉，替换完了也还有点类型问题，如果真不在乎大小，moment 多省力。

[anguiao]

@YadongZhang
为什么选 moment 和 Vue 2 ，个人感觉是惯性吧，习惯的东西就懒得改了。而且有些其它的第三方库，对它们也是有依赖的。
至于 Vue 2 和 TS ，首先选项式的写法对 TS 并不是很友好，然后 Vue 2 的周边生态对 TS 的支持也不怎么样。索性破罐子破摔了，any 就 any 吧。

[rbq123456]

1 ，懒，老项目用 moment 也不想切换
2 ，定制化的时候组件库里的 css 不好改
3 ，export 的太多，加上不记得名字，只记得一两个字母，直接 default.xx ，编辑器提示后 tab 就行
4 ，没见过不见 path alias 的项目
5 ，老项目用 2 ，新项目用 2 也有可能是兼容老旧设备。也不排除有人不会。
6 ，懒

[Leviathann]

我猜只是纯粹的垒屎山不想动脑
@daliusu moment 那 mutable 的 api 用起来真的恶心

[Sin]

没啥好说的，能推得动就改，推不动就尽量保持一致
（然后改完又会有新来的问，能用老牌的库为什么要用阿里的产品，能样式分离为什么要混在一起，能 export default 为什么非要用 named export ，能显式优于隐式为什么非要搞一堆 alias ）

[rongchuan]

你列举的问题分几类，一类是 web3 比较重视项目安全性，毕竟直接跟钱打交道，所以不能随意引入第三方依赖，需要安全部门审核，有时候为了方便就会使用现有的库。一类是技术栈选型，react 生态技术栈很杂乱，没有官方标准，这就需要各个开发团队来制定规范，没有规范那就说明 leader 还有工作需要做。一类是代码书写质量问题，可以用 eslint 和 code review 来做代码质量检查

[YadongZhang]

可能是我 Web3 项目接触得少，没遇到用 dayjs 了，还要用 moment 依赖的第三方库。

[YadongZhang]

@Sin #12

啊这，怕被新来的问，Code Review 咋办

[YadongZhang]

@rongchuan #13

技术栈选型和代码质量赞同，确实是这两类问题，至于安全性。。。

[rongchuan]

@YadongZhang 安全性反而是最重要的，web3 都是要连钱包的，发生盗币的可能性非常大。几个大一点的交易所都发生过盗币事件，各种原因都有。所以现在都会统计第三方依赖，会有专门部门的同事去审核源码，审核完后会锁对应版本，要升级的话需要再次审核源码，审核会借助第三方工具检测
其实即使不是 web3 的公司，也有不少大厂是 fork 开源项目来 gitlab,自己维护的，并不会直接用开源。比如前端使用的 webpack 之类的，也都是内部 fork 以后二次封装

[YadongZhang]

@rongchuan #17

安全性是很重要，但是和用 dayjs 还是 moment 有什么关系

[YadongZhang]

Web3 连接钱包最常用的是这两个库：

https://github.com/Web3Modal/web3modal

https://github.com/rainbow-me/rainbowkit


盗币好像是因为进错网站了，所以会有一些项目进入网站后会出现一个 banner 让检查网址是否正确，比如 pancake ，好像也没多大用处

[YadongZhang]

不是 web3 的公司，魔改 stripe 的倒是见过，然后发个 private package 用

[rongchuan]

@YadongZhang 跟这俩库没关系，只是泛指第三方库。举个例子，代码里已经有 moment ，那说明 moment 已经通过了安全审查，出了问题就是安全审查的人的问题。如果没有安全审查，那就是引入 moment 这个库的那个人的问题。如果是你替换了 moment ，引入 dayjs ，而且没有安全审查，那出了问题就是你背锅了。第三方库完全依赖维护人，如果维护人无意或者故意引入 bug ，是很容易造成损失的，而且这种情况并不少见。

[rongchuan]

@YadongZhang 盗币的原因千奇百怪，随便列举都能说很多，比如拦截用户地址栏，会修改用户的转账地址，用户转账就是给他的钱包转，比如一些库有上报的机制，有可能会把你的登陆信息上报给第三方，比如水龙头，一些第三方库会用恶意脚本来刷新...不光是 web3 ，搞金融的公司这一块要求都很高，不是传统前端光展示页面

[rongchuan]

有一些库还有挖矿脚本，而且是不少库，有几个还是知名的库，你的页面里使用了这些库，那你的服务器就免费给他挖矿

[rongchuan]

@YadongZhang 我上家、上上家、还有目前这家都是维护自己的 npm 源，基本只用自己的 npm 库，项目依赖都是脚手架生成，依赖库版本全部锁定，你要引第三方依赖都得审批

[233373]

@YadongZhang 如果用 react ，推荐 https://github.com/NoahZinsmeister/web3-react

[rongchuan]

@rongchuan 记错了，上上家不是，我还记得在上上家接新需求还得自己从头先弄配置，当时写 vue ，组长不让用 vue-cli ，让自己配 webpack ，记了不少配置。技术选型全看个人喜好。

[rongchuan]

@233373 我们就 fork 了一份这个，给了两种版本，一种 hooks 调用的，一种纯 sdk 。主要是我们一些项目接的 mobx ，一些用的 hooks

[walpurgis]

react 那几条根本无关痛痒吧
package size 对于绝大部分企业项目来说是最不重要的，moment 相对用的人还是多
css 方案可以并存混用，怎么方便怎么来，只要团队成员都看得懂
导入导出无所谓，都是 IDE 自动补全，团队的话弄个规范就行

我们这也是有新项目 Vue2 的，主要是因为组件库迁不动，而且 Vue2 加上 composition-api 后逻辑复用能力不输 Vue3 的，TS 支持个人体验达到了 Vue3 的 80%了，写 any 是人的问题

[YadongZhang]

@rongchuan 安全审查真没接触过，不敢回复了

[YadongZhang]

monorepo 里每个 app 用脚手架生成的也见过

[YadongZhang]

@walpurgis #26

您觉得那真的无关痛痒吗

就不考虑一下性能啥的，而且那几十 kb 真的只是老板该考虑的吗，那都是 money

[YadongZhang]

@YadongZhang #30

当时以为只是方便

[YadongZhang]

个人以为新版本的产生必然是带来了性能的提升，新版本足够稳定的话，个人倾向使用新版本的框架

[YadongZhang]

@233373 #25 连个钱包上面两个已经很好用了，主要看起来好像有点复杂，UI 还得自己配

[renhou]

没办法
1 ，领导不让用
2 ，别说 CSS-in-JS 了，SASS 领导都不懂
3 ，领导：你就用 scprit 标签引入一下
4 ，领导：path alias 是啥
5 ，同事不会 vue3 ，甚至 vue2 里都用 jq
6 ，领导＆同事：我们这只允许用 JS

[233373]

@YadongZhang 如果你们没有定制化 UI 的需求，用现成的就可以

[wobuhuicode]

这个和 web3 不 web3 没什么区别。
总结了一下 LZ 的这些问题，就是为什么新技术出来了，还要用旧的技术？
很简单，无论新旧技术，你的老板都看不见。只看到你什么时候能把产品产出并且稳定的运行。用自己熟悉并且网上有足够多解决方案的技术才是最正确的选择。

[SSSensational]

体积 /性能问题无关紧要，因为 dapp 本来就不是什么高频操作的日常应用。楼上说的安全问题在理，dapp 的类型决定了用户关注的只会是安全性问题。你提的那些的问题，主要是因为现阶段写 dapp 的人大多不是正经前端，做 dapp 的前提是能用就行。LZ 切勿陷入程序员思维的死区，你在乎的代码质量 /开发体验 /技术选型 本身不产生价值，在每个操作都涉及到钱的 dapp 面前，讨论这些没有意义。

[YadongZhang]

@233373 #36 好的
@wobuhuicode #37 老板真的没能力考量一下 app 性能 and 体积对公司利润的影响吗
@SSSensational #38 安全问题和性能问题冲突吗

[xusanduo2019]

还是懒吧，项目 run 起来没问题也就没啥动力去做技术迁移了

[rongchuan]

@YadongZhang 我觉得各个项目组情况不一样，如果你们没有那么多条条框框的话，这个反倒是一个好机会。你可以跟组长讲一下你发现的这些问题，然后主动跟他要活，推动一些代码规范的制定，下次绩效评选你妥妥的 375 。不过以老油条的角度来说，最好是你推动规范制定，然后让他们各自去改自己不规范的代码，不要自己去帮他们改，因为一般这种类似的情况改代码容易改出 bug...

[wobuhuicode]

@YadongZhang 人家要求的是快速开发，稳定运行，就算你用 JQ 写一套跑起来能达到这个两个要求就够了。哪有那么多考量

[murmur]

山寨币考虑安全性不是搞笑么，银行全实名制又是风控又是断卡都防不住，山寨币私钥拿走啥都没有，追都追不回来

[rongchuan]

@murmur 那些项目俗称杀猪盘，土狗盘，现在市场里的确不少这种项目，这种是犯罪了，跟安全性也没啥关系...上面说的安全主要是考虑防黑客盗币还有一些极端情况，是技术问题。其实现在这种土狗盘盛行的情况下，像我一般都懒得辨别，我都不投，我目前就存了一堆 usdc 吃 8%的利息

[YadongZhang]

@wobuhuicode #42

所以赚不赚钱跟代码水平没啥关系

[Bingchunmoli]

目前培训机构和市场普遍中低端前端用的是 js+vue2 （甚至可以兼容 IE ），vue3 不熟，ts 都是 any 是常见情况

[wobuhuicode]

@YadongZhang 用上新技术就是高代码水平？？？还是说用上 写 JQ 就不是高水平？？？只有做到快速开发，稳定运行的代码才是高水平。

[YadongZhang]

@wobuhuicode #47

？？？

[Orainsink]

刚好手里的这个项目就是 scss 和 css-in@-js 混用，而且用 momentjs ，并且默认和具名导出混用的。不过这是个 monorepo 项目。
1.从安全性考虑，引入的第三方插件必须过安全审查，如果已经用了 momentjs ，那么换 dayjs 的话需要有审查的人负责。如果需要改代码，需要有新的测试覆盖。
2.css 那个大部分是项目维护时间太长导致的遗留问题。同样的问题，从 scss 迁移到 css-in-js 不是小工程，需要人推动工作并且回归测试。但就算不改，对最后打包出来的代码也没什么影响。
3.eslint 设置了 default export 导出的 warning ，新写的代码需要避免这个，但是老代码没必要动。选哪个导出方式对项目的影响几乎为 0 ，重要的是你们的意见能达成一致。
4.路径别名并不是必须的。
5.全 any 是人的问题。但是禁 any 更没必要。在不需要类型判断的地方用 any 可以减少开发时间，也减少 tsc 等待时间。
6.Vue3 和 Vue2 的差别还是大，可能只是你的同事不想学 Vue3

其实项目技术栈的选择和 Tech lead 个人偏好有很大关系，你只能提意见，怎么选还是一起开会做决定。不要自作主张提 PR 该这些东西，出了问题你负责不说，还会给同事留下刺头的印象

[Pastsong]

前端包多个几十 k 对用户的影响大，还是重构一个稳定长期运行的模块，重构出 bug 在线上炸掉对用户影响大？

[mufeng]

@anguiao Vue 2 + Pinia + TypeScript 配合很好

[YadongZhang]

@Orainsink #49

scss 迁移 css-in-js 做过，大工程，需要 QA 对着 Figma 测试

提个 PR 会出什么问题，不是还没合并吗，先提 PR 好讨论啊，PoC ？

[YadongZhang]

@Pastsong #50

这么说没有重构做出来的 v2 版本？

另外几十 kb 是按单个用户计算的，如果用户量足够多，那就不是几十 kb 了

[YadongZhang]

named export 和 default export 好像不只是写法不一样，好像和 babel 有啥关系

某次大厂面试问了，当时面试官怎么说的记不清了，我是小菜鸡不懂 babel 。

[walpurgis]

个人项目我可能会去压榨这几十 KB ，毕竟服务器费用是自己出的
团队项目在已经大量使用 moment 的前提下，换 dayjs 产生的收益你真的算过吗，节省下来的费用能超过你一天的工资吗

[TomatoYuyuko]

一个很简单的问题，我用 vanillaJS ，和 vue3 或者 React 比，做出你所说的 web3 项目，对你老板来说有什么差别吗？
如果是只讨论开发体验那就更简单了，个人开发，想怎么写就怎么写，团队开发，大家想怎么写就怎么写，没有什么标准答案

[bobo2]

CSS in JS 的优势在哪，我倒是觉得单独的 scss 或者 less 更易维护

[YadongZhang]

不讨论了，人各有志，唉

[pieerepeng]

一线的项目基本都是 react 的，虽然我们自己用 vue

感觉开发者们关注的是实现后的视觉 /交互效果，DAU 能上个万就是成功项目了，package size 差一点真不太重要。

同时，可能很多实际工程师不是专业的前端（比如我），不太关心例如“default export 不用 named export”这样的问题，path alias 我其实是不喜欢用的，但有时候前端配了，我也会用，就是这么随遇而安

以及，客观的说，大部分 web3 项目没啥迭代的机会，同时就一个前端主力开发，也没啥大团队配合的机会

[Envov]

你的的确更好，但是你要尊重别人的选择

[looking0truth]

单就 moment ，可以去 Github 看看，dayjs 基本算是停止维护了，issue 已经没人处理了，另外，之前宣称的和 Moment 的 API 完全保持一致也没用做到，有许多潜藏的问题。

其他的就个人风格问题了，比如 CSS-in-JS 我就没搞懂，内容样式分离，然后现在又合在一起为了啥。

[peewee92]

@rongchuan 大佬，哪个项目有 8%的利息

[rongchuan]

@peewee92 ftx 一万美金以内有 8%。币安 2000 美金内 10%，usdt 和 busd 加一起可以 4000 美金

[zhwithsweet]

我根据 guoyu 老师的推荐撸了个模版 https://github.com/fisand/vite-antd-seed

[hellsnow]

web3.js 呀 我还以为是那个