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

Web 3 项目前端 repo 代码疑问

  •  
  •   YadongZhang · 211 天前 · 3311 次点击
    这是一个创建于 211 天前的主题,其中的信息可能已经有所发展或是发生改变。

    可能是普遍现象:

    • 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  
       211 天前
    去掉 Web 3 可能也适用。
    按我个人的粗浅认知,起码在前端层面,暂时没发现 Web 3 和现有的开发模式有多大区别。
    YadongZhang
        2
    YadongZhang  
    OP
       211 天前
    @anguiao #1

    因为我 Web 2 项目接触的不多,所以不敢评价。。。
    233373
        3
    233373  
       211 天前
    anyscript
    foil2
        4
    foil2  
       211 天前   ❤️ 2
    @anguiao web2 项目 + ethers.js / web3.js 等于 web3 😂
    zhixiao
        5
    zhixiao  
       211 天前
    没啥差别,你说的那几个现象大部分是习惯问题

    话说 web3 开发其实跟普通前端开发也没啥差别
    YadongZhang
        6
    YadongZhang  
    OP
       211 天前
    @233373 #3

    是的,我也愿称之为 anyscript
    YadongZhang
        7
    YadongZhang  
    OP
       211 天前
    @zhixiao #5

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

    啊这,怕被新来的问,Code Review 咋办
    YadongZhang
        16
    YadongZhang  
    OP
       211 天前
    @rongchuan #13

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

    安全性是很重要,但是和用 dayjs 还是 moment 有什么关系
    YadongZhang
        19
    YadongZhang  
    OP
       211 天前
    Web3 连接钱包最常用的是这两个库:

    https://github.com/Web3Modal/web3modal

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


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

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

    您觉得那真的无关痛痒吗

    就不考虑一下性能啥的,而且那几十 kb 真的只是老板该考虑的吗,那都是 money
    YadongZhang
        32
    YadongZhang  
    OP
       211 天前
    @YadongZhang #30

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

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

    ???
    Orainsink
        49
    Orainsink  
       210 天前 via Android
    刚好手里的这个项目就是 scss 和 [email protected] 混用,而且用 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  
       210 天前
    前端包多个几十 k 对用户的影响大,还是重构一个稳定长期运行的模块,重构出 bug 在线上炸掉对用户影响大?
    mufeng
        51
    mufeng  
       210 天前
    @anguiao Vue 2 + Pinia + TypeScript 配合很好
    YadongZhang
        52
    YadongZhang  
    OP
       210 天前
    @Orainsink #49

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

    提个 PR 会出什么问题,不是还没合并吗,先提 PR 好讨论啊,PoC ?
    YadongZhang
        53
    YadongZhang  
    OP
       210 天前
    @Pastsong #50

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

    另外几十 kb 是按单个用户计算的,如果用户量足够多,那就不是几十 kb 了
    YadongZhang
        54
    YadongZhang  
    OP
       210 天前
    named export 和 default export 好像不只是写法不一样,好像和 babel 有啥关系

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

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

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

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

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