V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
YadongZhang
V2EX  ›  职场话题

Web 3 项目前端 repo 代码疑问

  •  
  •   YadongZhang · 2022-07-06 16:32:24 +08:00 · 4400 次点击
    这是一个创建于 905 天前的主题,其中的信息可能已经有所发展或是发生改变。

    可能是普遍现象:

    • 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.

    楼下有补充吗

    65 条回复    2022-07-14 14:19:04 +08:00
    anguiao
        1
    anguiao  
       2022-07-06 16:36:31 +08:00
    去掉 Web 3 可能也适用。
    按我个人的粗浅认知,起码在前端层面,暂时没发现 Web 3 和现有的开发模式有多大区别。
    YadongZhang
        2
    YadongZhang  
    OP
       2022-07-06 16:37:39 +08:00
    @anguiao #1

    因为我 Web 2 项目接触的不多,所以不敢评价。。。
    233373
        3
    233373  
       2022-07-06 16:37:39 +08:00
    anyscript
    foil2
        4
    foil2  
       2022-07-06 16:39:18 +08:00   ❤️ 2
    @anguiao web2 项目 + ethers.js / web3.js 等于 web3 😂
    zhixiao
        5
    zhixiao  
       2022-07-06 16:39:28 +08:00
    没啥差别,你说的那几个现象大部分是习惯问题

    话说 web3 开发其实跟普通前端开发也没啥差别
    YadongZhang
        6
    YadongZhang  
    OP
       2022-07-06 16:42:31 +08:00
    @233373 #3

    是的,我也愿称之为 anyscript
    YadongZhang
        7
    YadongZhang  
    OP
       2022-07-06 16:43:27 +08:00
    @zhixiao #5

    上面那几个问题可能会影响到开发体验( DX )
    daliusu
        8
    daliusu  
       2022-07-06 16:45:08 +08:00
    聊一下我的认知吧,我觉得你这个跟 web3 没得啥关系

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

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

    default export 这个看写法,内部规定一下就行。dayjs 和 moment 的问题很多就是习惯和第三方库了,一些第三方库用的 moment 还要自己替换掉,替换完了也还有点类型问题,如果真不在乎大小,moment 多省力。
    anguiao
        9
    anguiao  
       2022-07-06 16:49:19 +08:00
    @YadongZhang
    为什么选 moment 和 Vue 2 ,个人感觉是惯性吧,习惯的东西就懒得改了。而且有些其它的第三方库,对它们也是有依赖的。
    至于 Vue 2 和 TS ,首先选项式的写法对 TS 并不是很友好,然后 Vue 2 的周边生态对 TS 的支持也不怎么样。索性破罐子破摔了,any 就 any 吧。
    rbq123456
        10
    rbq123456  
       2022-07-06 16:49:21 +08:00
    1 ,懒,老项目用 moment 也不想切换
    2 ,定制化的时候组件库里的 css 不好改
    3 ,export 的太多,加上不记得名字,只记得一两个字母,直接 default.xx ,编辑器提示后 tab 就行
    4 ,没见过不见 path alias 的项目
    5 ,老项目用 2 ,新项目用 2 也有可能是兼容老旧设备。也不排除有人不会。
    6 ,懒
    Leviathann
        11
    Leviathann  
       2022-07-06 16:49:30 +08:00
    我猜只是纯粹的垒屎山不想动脑
    @daliusu moment 那 mutable 的 api 用起来真的恶心
    Sin
        12
    Sin  
       2022-07-06 16:57:34 +08:00   ❤️ 1
    没啥好说的,能推得动就改,推不动就尽量保持一致
    (然后改完又会有新来的问,能用老牌的库为什么要用阿里的产品,能样式分离为什么要混在一起,能 export default 为什么非要用 named export ,能显式优于隐式为什么非要搞一堆 alias )
    rongchuan
        13
    rongchuan  
       2022-07-06 17:09:43 +08:00
    你列举的问题分几类,一类是 web3 比较重视项目安全性,毕竟直接跟钱打交道,所以不能随意引入第三方依赖,需要安全部门审核,有时候为了方便就会使用现有的库。一类是技术栈选型,react 生态技术栈很杂乱,没有官方标准,这就需要各个开发团队来制定规范,没有规范那就说明 leader 还有工作需要做。一类是代码书写质量问题,可以用 eslint 和 code review 来做代码质量检查
    YadongZhang
        14
    YadongZhang  
    OP
       2022-07-06 19:27:52 +08:00
    可能是我 Web3 项目接触得少,没遇到用 dayjs 了,还要用 moment 依赖的第三方库。
    YadongZhang
        15
    YadongZhang  
    OP
       2022-07-06 19:29:43 +08:00
    @Sin #12

    啊这,怕被新来的问,Code Review 咋办
    YadongZhang
        16
    YadongZhang  
    OP
       2022-07-06 19:31:00 +08:00
    @rongchuan #13

    技术栈选型和代码质量赞同,确实是这两类问题,至于安全性。。。
    rongchuan
        17
    rongchuan  
       2022-07-06 21:08:18 +08:00
    @YadongZhang 安全性反而是最重要的,web3 都是要连钱包的,发生盗币的可能性非常大。几个大一点的交易所都发生过盗币事件,各种原因都有。所以现在都会统计第三方依赖,会有专门部门的同事去审核源码,审核完后会锁对应版本,要升级的话需要再次审核源码,审核会借助第三方工具检测
    其实即使不是 web3 的公司,也有不少大厂是 fork 开源项目来 gitlab,自己维护的,并不会直接用开源。比如前端使用的 webpack 之类的,也都是内部 fork 以后二次封装
    YadongZhang
        18
    YadongZhang  
    OP
       2022-07-06 21:42:09 +08:00
    @rongchuan #17

    安全性是很重要,但是和用 dayjs 还是 moment 有什么关系
    YadongZhang
        19
    YadongZhang  
    OP
       2022-07-06 21:56:17 +08:00
    Web3 连接钱包最常用的是这两个库:

    https://github.com/Web3Modal/web3modal

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


    盗币好像是因为进错网站了,所以会有一些项目进入网站后会出现一个 banner 让检查网址是否正确,比如 pancake ,好像也没多大用处
    YadongZhang
        20
    YadongZhang  
    OP
       2022-07-06 22:01:23 +08:00
    不是 web3 的公司,魔改 stripe 的倒是见过,然后发个 private package 用
    rongchuan
        21
    rongchuan  
       2022-07-07 00:37:09 +08:00
    @YadongZhang 跟这俩库没关系,只是泛指第三方库。举个例子,代码里已经有 moment ,那说明 moment 已经通过了安全审查,出了问题就是安全审查的人的问题。如果没有安全审查,那就是引入 moment 这个库的那个人的问题。如果是你替换了 moment ,引入 dayjs ,而且没有安全审查,那出了问题就是你背锅了。第三方库完全依赖维护人,如果维护人无意或者故意引入 bug ,是很容易造成损失的,而且这种情况并不少见。
    rongchuan
        22
    rongchuan  
       2022-07-07 00:41:38 +08:00
    @YadongZhang 盗币的原因千奇百怪,随便列举都能说很多,比如拦截用户地址栏,会修改用户的转账地址,用户转账就是给他的钱包转,比如一些库有上报的机制,有可能会把你的登陆信息上报给第三方,比如水龙头,一些第三方库会用恶意脚本来刷新...不光是 web3 ,搞金融的公司这一块要求都很高,不是传统前端光展示页面
    rongchuan
        23
    rongchuan  
       2022-07-07 00:42:36 +08:00
    有一些库还有挖矿脚本,而且是不少库,有几个还是知名的库,你的页面里使用了这些库,那你的服务器就免费给他挖矿
    rongchuan
        24
    rongchuan  
       2022-07-07 00:45:02 +08:00
    @YadongZhang 我上家、上上家、还有目前这家都是维护自己的 npm 源,基本只用自己的 npm 库,项目依赖都是脚手架生成,依赖库版本全部锁定,你要引第三方依赖都得审批
    233373
        25
    233373  
       2022-07-07 00:50:42 +08:00
    rongchuan
        26
    rongchuan  
       2022-07-07 00:52:20 +08:00
    @rongchuan 记错了,上上家不是,我还记得在上上家接新需求还得自己从头先弄配置,当时写 vue ,组长不让用 vue-cli ,让自己配 webpack ,记了不少配置。技术选型全看个人喜好。
    rongchuan
        27
    rongchuan  
       2022-07-07 00:53:59 +08:00
    @233373 我们就 fork 了一份这个,给了两种版本,一种 hooks 调用的,一种纯 sdk 。主要是我们一些项目接的 mobx ,一些用的 hooks
    walpurgis
        28
    walpurgis  
       2022-07-07 02:25:03 +08:00
    react 那几条根本无关痛痒吧
    package size 对于绝大部分企业项目来说是最不重要的,moment 相对用的人还是多
    css 方案可以并存混用,怎么方便怎么来,只要团队成员都看得懂
    导入导出无所谓,都是 IDE 自动补全,团队的话弄个规范就行

    我们这也是有新项目 Vue2 的,主要是因为组件库迁不动,而且 Vue2 加上 composition-api 后逻辑复用能力不输 Vue3 的,TS 支持个人体验达到了 Vue3 的 80%了,写 any 是人的问题
    YadongZhang
        29
    YadongZhang  
    OP
       2022-07-07 06:10:59 +08:00
    @rongchuan 安全审查真没接触过,不敢回复了
    YadongZhang
        30
    YadongZhang  
    OP
       2022-07-07 06:11:56 +08:00
    monorepo 里每个 app 用脚手架生成的也见过
    YadongZhang
        31
    YadongZhang  
    OP
       2022-07-07 06:17:03 +08:00
    @walpurgis #26

    您觉得那真的无关痛痒吗

    就不考虑一下性能啥的,而且那几十 kb 真的只是老板该考虑的吗,那都是 money
    YadongZhang
        32
    YadongZhang  
    OP
       2022-07-07 06:18:13 +08:00
    @YadongZhang #30

    当时以为只是方便
    YadongZhang
        33
    YadongZhang  
    OP
       2022-07-07 06:19:51 +08:00
    个人以为新版本的产生必然是带来了性能的提升,新版本足够稳定的话,个人倾向使用新版本的框架
    YadongZhang
        34
    YadongZhang  
    OP
       2022-07-07 07:07:04 +08:00
    @233373 #25 连个钱包上面两个已经很好用了,主要看起来好像有点复杂,UI 还得自己配
    renhou
        35
    renhou  
       2022-07-07 08:31:00 +08:00
    没办法
    1 ,领导不让用
    2 ,别说 CSS-in-JS 了,SASS 领导都不懂
    3 ,领导:你就用 scprit 标签引入一下
    4 ,领导:path alias 是啥
    5 ,同事不会 vue3 ,甚至 vue2 里都用 jq
    6 ,领导&同事:我们这只允许用 JS
    233373
        36
    233373  
       2022-07-07 10:02:11 +08:00
    @YadongZhang 如果你们没有定制化 UI 的需求,用现成的就可以
    wobuhuicode
        37
    wobuhuicode  
       2022-07-07 10:04:27 +08:00
    这个和 web3 不 web3 没什么区别。
    总结了一下 LZ 的这些问题,就是为什么新技术出来了,还要用旧的技术?
    很简单,无论新旧技术,你的老板都看不见。只看到你什么时候能把产品产出并且稳定的运行。用自己熟悉并且网上有足够多解决方案的技术才是最正确的选择。
    SSSensational
        38
    SSSensational  
       2022-07-07 10:17:50 +08:00
    体积 /性能问题无关紧要,因为 dapp 本来就不是什么高频操作的日常应用。楼上说的安全问题在理,dapp 的类型决定了用户关注的只会是安全性问题。你提的那些的问题,主要是因为现阶段写 dapp 的人大多不是正经前端,做 dapp 的前提是能用就行。LZ 切勿陷入程序员思维的死区,你在乎的代码质量 /开发体验 /技术选型 本身不产生价值,在每个操作都涉及到钱的 dapp 面前,讨论这些没有意义。
    YadongZhang
        39
    YadongZhang  
    OP
       2022-07-07 10:26:22 +08:00
    @233373 #36 好的
    @wobuhuicode #37 老板真的没能力考量一下 app 性能 and 体积对公司利润的影响吗
    @SSSensational #38 安全问题和性能问题冲突吗
    xusanduo2019
        40
    xusanduo2019  
       2022-07-07 10:59:31 +08:00
    还是懒吧,项目 run 起来没问题也就没啥动力去做技术迁移了
    rongchuan
        41
    rongchuan  
       2022-07-07 11:07:23 +08:00
    @YadongZhang 我觉得各个项目组情况不一样,如果你们没有那么多条条框框的话,这个反倒是一个好机会。你可以跟组长讲一下你发现的这些问题,然后主动跟他要活,推动一些代码规范的制定,下次绩效评选你妥妥的 375 。不过以老油条的角度来说,最好是你推动规范制定,然后让他们各自去改自己不规范的代码,不要自己去帮他们改,因为一般这种类似的情况改代码容易改出 bug...
    wobuhuicode
        42
    wobuhuicode  
       2022-07-07 11:09:02 +08:00
    @YadongZhang 人家要求的是快速开发,稳定运行,就算你用 JQ 写一套跑起来能达到这个两个要求就够了。哪有那么多考量
    murmur
        43
    murmur  
       2022-07-07 11:09:54 +08:00
    山寨币考虑安全性不是搞笑么,银行全实名制又是风控又是断卡都防不住,山寨币私钥拿走啥都没有,追都追不回来
    rongchuan
        44
    rongchuan  
       2022-07-07 11:16:53 +08:00
    @murmur 那些项目俗称杀猪盘,土狗盘,现在市场里的确不少这种项目,这种是犯罪了,跟安全性也没啥关系...上面说的安全主要是考虑防黑客盗币还有一些极端情况,是技术问题。其实现在这种土狗盘盛行的情况下,像我一般都懒得辨别,我都不投,我目前就存了一堆 usdc 吃 8%的利息
    YadongZhang
        45
    YadongZhang  
    OP
       2022-07-07 11:53:52 +08:00
    @wobuhuicode #42

    所以赚不赚钱跟代码水平没啥关系
    Bingchunmoli
        46
    Bingchunmoli  
       2022-07-07 13:39:40 +08:00
    目前培训机构和市场普遍中低端前端用的是 js+vue2 (甚至可以兼容 IE ),vue3 不熟,ts 都是 any 是常见情况
    wobuhuicode
        47
    wobuhuicode  
       2022-07-07 13:53:30 +08:00
    @YadongZhang 用上新技术就是高代码水平???还是说用上 写 JQ 就不是高水平???只有做到快速开发,稳定运行的代码才是高水平。
    YadongZhang
        48
    YadongZhang  
    OP
       2022-07-07 14:17:29 +08:00
    @wobuhuicode #47

    ???
    Orainsink
        49
    Orainsink  
       2022-07-07 15:56:13 +08:00 via Android
    刚好手里的这个项目就是 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
        50
    Pastsong  
       2022-07-07 16:00:44 +08:00
    前端包多个几十 k 对用户的影响大,还是重构一个稳定长期运行的模块,重构出 bug 在线上炸掉对用户影响大?
    mufeng
        51
    mufeng  
       2022-07-07 16:03:12 +08:00
    @anguiao Vue 2 + Pinia + TypeScript 配合很好
    YadongZhang
        52
    YadongZhang  
    OP
       2022-07-07 16:18:19 +08:00
    @Orainsink #49

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

    提个 PR 会出什么问题,不是还没合并吗,先提 PR 好讨论啊,PoC ?
    YadongZhang
        53
    YadongZhang  
    OP
       2022-07-07 16:20:24 +08:00
    @Pastsong #50

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

    另外几十 kb 是按单个用户计算的,如果用户量足够多,那就不是几十 kb 了
    YadongZhang
        54
    YadongZhang  
    OP
       2022-07-07 16:27:13 +08:00
    named export 和 default export 好像不只是写法不一样,好像和 babel 有啥关系

    某次大厂面试问了,当时面试官怎么说的记不清了,我是小菜鸡不懂 babel 。
    walpurgis
        55
    walpurgis  
       2022-07-07 17:20:24 +08:00
    个人项目我可能会去压榨这几十 KB ,毕竟服务器费用是自己出的
    团队项目在已经大量使用 moment 的前提下,换 dayjs 产生的收益你真的算过吗,节省下来的费用能超过你一天的工资吗
    TomatoYuyuko
        56
    TomatoYuyuko  
       2022-07-07 17:57:31 +08:00
    一个很简单的问题,我用 vanillaJS ,和 vue3 或者 React 比,做出你所说的 web3 项目,对你老板来说有什么差别吗?
    如果是只讨论开发体验那就更简单了,个人开发,想怎么写就怎么写,团队开发,大家想怎么写就怎么写,没有什么标准答案
    bobo2
        57
    bobo2  
       2022-07-07 17:59:40 +08:00
    CSS in JS 的优势在哪,我倒是觉得单独的 scss 或者 less 更易维护
    YadongZhang
        58
    YadongZhang  
    OP
       2022-07-07 18:43:29 +08:00
    不讨论了,人各有志,唉
    pieerepeng
        59
    pieerepeng  
       2022-07-08 01:51:34 +08:00
    一线的项目基本都是 react 的,虽然我们自己用 vue

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

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

    以及,客观的说,大部分 web3 项目没啥迭代的机会,同时就一个前端主力开发,也没啥大团队配合的机会
    Envov
        60
    Envov  
       2022-07-08 23:34:31 +08:00 via iPhone   ❤️ 1
    你的的确更好,但是你要尊重别人的选择
    looking0truth
        61
    looking0truth  
       2022-07-09 10:16:37 +08:00
    单就 moment ,可以去 Github 看看,dayjs 基本算是停止维护了,issue 已经没人处理了,另外,之前宣称的和 Moment 的 API 完全保持一致也没用做到,有许多潜藏的问题。

    其他的就个人风格问题了,比如 CSS-in-JS 我就没搞懂,内容样式分离,然后现在又合在一起为了啥。
    peewee92
        62
    peewee92  
       2022-07-09 22:44:14 +08:00
    @rongchuan 大佬,哪个项目有 8%的利息
    rongchuan
        63
    rongchuan  
       2022-07-10 00:02:16 +08:00
    @peewee92 ftx 一万美金以内有 8%。币安 2000 美金内 10%,usdt 和 busd 加一起可以 4000 美金
    zhwithsweet
        64
    zhwithsweet  
       2022-07-11 16:24:28 +08:00
    我根据 guoyu 老师的推荐撸了个模版 https://github.com/fisand/vite-antd-seed
    hellsnow
        65
    hellsnow  
       2022-07-14 14:19:04 +08:00
    web3.js 呀 我还以为是那个
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2706 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 37ms · UTC 11:43 · PVG 19:43 · LAX 03:43 · JFK 06:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.