V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ruanyu1
V2EX  ›  程序员

我知道我们前端圈很有意思,一天一个框架,但是...

  •  
  •   ruanyu1 ·
    ruanyl · 2019-05-21 06:15:17 +08:00 · 11779 次点击
    这是一个创建于 1774 天前的主题,其中的信息可能已经有所发展或是发生改变。

    但是我又写了一个,因为是真的没找到合适的。

    前提是我们有一个 10w+行代码的 react 前端项目,并且还在不断膨胀。

    在过去的几年,我们一直使用的是 pure redux 的方案,顶多加一个 reducer map 和 redux-saga。 但是项目发展到今天,主要有以下痛点和需求:

    • 小伙伴们写 redux 的 boilerplate 写到怀疑人生,迫切需要降低这方面的工作量。并且过多的 boilerplate,在重构的时候真的是噩梦

    • 因为我们的项目代码量已经挺大了,全部用新框架重写是不可能的,所以这个框架必须足够轻量级,能够和现有代码共存,然后平滑迁移。

    • 必须是‘ strong ’ typed,TS 对于代码量比较大的项目,是真的好用。

    • 虽然有“模块”的概念,但是模块间的相互交叉,没有非常清晰的边界,导致其实模块很难被复用 /或者 code-splitting。这种结果是目前这种 setup 下很难避免的。

    • 团队有不同经验的组员,在不同的国家。代码质量非常依赖 code review 和约定的 convention。code review 会消耗很多的时间,大家都不太乐意干。


    基于以上的这些需求,于是便有了:

    Reapex: https://github.com/ruanyl/reapex

    相较于 pure react:

    1. 极大的减少了 boilerplate
    2. 模块动态加载
    3. 支持 plugin,一些基础模块可以写成 plugin,方便在不同的项目复用
    4. 通过框架来统一编码风格,适当的降低了 code review 的工作量

    目前已经和我们的代码库整合,小伙伴们脸上又洋溢出了笑容 :) 欢迎讨论 /赐教,如果你觉得项目对你有帮助,please give it a star!

    66 条回复    2020-05-10 01:19:24 +08:00
    xuanbg
        1
    xuanbg  
       2019-05-21 07:08:16 +08:00   ❤️ 1
    贵圈真乱。。。各种框架,各种组件库,各种工具包乱用,各种坑乱踩。。。一塌糊涂
    leonme
        2
    leonme  
       2019-05-21 07:13:23 +08:00 via Android
    请发在推广,谢谢
    cnnblike
        3
    cnnblike  
       2019-05-21 07:25:10 +08:00
    TypeScript 已经是标配了,各种地方都有 TypeScript,事实证明,强类型+强制标注,确实是有利于开发的
    uxstone
        4
    uxstone  
       2019-05-21 07:31:35 +08:00   ❤️ 11
    需要一个强有力的框架来一统浆糊
    df4VW
        5
    df4VW  
       2019-05-21 07:32:37 +08:00
    api 和 hook 差不多啊
    fyibmsd
        6
    fyibmsd  
       2019-05-21 08:23:19 +08:00 via iPhone
    贵圈真乱
    masker
        7
    masker  
       2019-05-21 08:24:55 +08:00 via Android
    贵圈真乱
    Perry
        8
    Perry  
       2019-05-21 08:28:22 +08:00
    有点东西的
    不知道楼主怎么评价 redux-actions
    lepig
        9
    lepig  
       2019-05-21 09:02:19 +08:00
    踏入前端真是脑细胞以 10 倍的速度被消耗
    StephenHe
        10
    StephenHe  
       2019-05-21 09:15:33 +08:00
    贵圈真乱
    attackonFourier
        11
    attackonFourier  
       2019-05-21 09:21:43 +08:00
    umi 了解一下
    xuhaoyangx
        12
    xuhaoyangx  
       2019-05-21 09:24:54 +08:00
    以前觉得 ssh 的配置以及够烦了.......
    gouflv
        13
    gouflv  
       2019-05-21 09:26:10 +08:00 via Android
    redux 可以算是毒瘤了吧
    hoyixi
        14
    hoyixi  
       2019-05-21 09:30:31 +08:00
    现在的圈子就是各种时髦,各种挖坑,996 累死累活把坑挖好了,发现以后大部分活机器干,原来 3 个人的活现在 1 个人干,然后自己被裁了~ 哦耶
    whypool
        15
    whypool  
       2019-05-21 09:41:29 +08:00
    用 jq 屁事没有
    betulac
        16
    betulac  
       2019-05-21 09:48:46 +08:00
    某大型互联网项目架构总结:全部模块化,把模块做小,所有模块平级,统一接口,这样可以解决 90%的问题
    ianva
        17
    ianva  
       2019-05-21 09:55:29 +08:00
    早转 GraphQL + Apollo 早超生
    Luoheqp
        18
    Luoheqp  
       2019-05-21 10:00:30 +08:00 via Android
    @gouflv 为何 redux 算是毒瘤?萌新求问
    uxstone
        19
    uxstone  
       2019-05-21 10:39:46 +08:00
    @betulac 模块平级是指只做一个层级吗?
    lijsh
        20
    lijsh  
       2019-05-21 10:46:31 +08:00
    写 react 应该向前看,无脑推这个 https://github.com/jamiebuilds/unstated-next

    代码非常精简,就封装了一下 hooks 和 context,加一些最佳实践。
    betulac
        21
    betulac  
       2019-05-21 11:17:47 +08:00
    @uxstone 是的,在逻辑层面上平级.比如一个模块可以嵌在其他模块,也可以调用其他模块
    version
        22
    version  
       2019-05-21 11:31:27 +08:00
    如今的年代.等 github 有 1 万关注我才去看看研究..剩下的还是自己搭配了.靠谱的了.
    .redux-saga 其实也不好拆分的..mobx 方式或者 vuex 的写法更加方便
    banricho
        23
    banricho  
       2019-05-21 11:33:56 +08:00
    redux 就是一坨,再怎么改也是没救的
    unstated 还行
    ByZHkc3
        24
    ByZHkc3  
       2019-05-21 11:34:57 +08:00
    dva 了解下
    Huelse
        25
    Huelse  
       2019-05-21 11:38:02 +08:00
    贵圈真乱
    zthxxx
        26
    zthxxx  
       2019-05-21 11:40:53 +08:00
    一眼看贵 Hub 名字以为是阮一峰。。。
    l1nyanm1ng
        27
    l1nyanm1ng  
       2019-05-21 11:51:22 +08:00
    贵圈真乱
    buhi
        28
    buhi  
       2019-05-21 11:54:18 +08:00
    跟风丢一下自己的状态管理库(lunzi), 完全强类型, 用惯了 rxjs 和 typescript 的话,用起来很顺手
    https://github.com/buhichan/rehooker
    ZhaoMiing
        29
    ZhaoMiing  
       2019-05-21 11:54:25 +08:00
    就看了这一个贴又学了好几个贵圈新名词
    zhw2590582
        30
    zhw2590582  
       2019-05-21 12:25:48 +08:00 via iPhone
    我只用 jq
    ShaoMing
        31
    ShaoMing  
       2019-05-21 12:27:37 +08:00 via Android
    贵圈真乱
    SingeeKing
        32
    SingeeKing  
       2019-05-21 12:28:15 +08:00
    @leonme #2 推广是值的商业项目,这种非盈利的开源发在分享创造正好
    betulac
        33
    betulac  
       2019-05-21 14:30:22 +08:00
    @banricho 我也觉得 redux 死是时间问题
    gxm44
        34
    gxm44  
       2019-05-21 15:09:30 +08:00
    dva 了解下
    puilu
        35
    puilu  
       2019-05-21 15:17:59 +08:00
    jquery 的时候真是省心。
    dodo2012
        36
    dodo2012  
       2019-05-21 15:21:11 +08:00
    真心不喜欢 redux,感觉多写好多代码,mobx 方式还好,所以,选 vue 吧
    miniwade514
        37
    miniwade514  
       2019-05-21 15:34:43 +08:00
    能不能大概画一个架构图?帮助大家理解用这个框架之后到底会改变什么
    hellojinjie
        38
    hellojinjie  
       2019-05-21 15:34:44 +08:00 via Android
    好怀念 jquery 的时代
    vus520
        39
    vus520  
       2019-05-21 15:37:24 +08:00
    贵圈真乱
    shintendo
        40
    shintendo  
       2019-05-21 16:20:50 +08:00
    上面怀念 jQuery 的,好像 jQuery 现在不能用了一样……
    其实怀念的是用 jQuery 就能 hold 住的业务复杂度吧
    KuroNekoFan
        41
    KuroNekoFan  
       2019-05-21 17:46:53 +08:00
    看过很多人说讨厌 redux 的繁杂的,有点好奇,以我自己使用 react-redux 的体验来看,如果不遵循 cookbook 里面的 boilerplate,只使用 connect 和 dispatch,体验挺好的啊...
    luoway
        42
    luoway  
       2019-05-21 18:30:26 +08:00
    轻量级意味着高自由度,楼主的情况更应该往重量级框架迁,否则一个项目里杂揉三四个轻量级框架,只会越来越糟
    ruanyu1
        43
    ruanyu1  
    OP
       2019-05-21 18:54:40 +08:00
    @SingeeKing 你说的有道理,我看看这么移动节点,找来找去没找到怎么操作
    russian
        44
    russian  
       2019-05-21 19:24:04 +08:00   ❤️ 1
    总比机器学习圈要好。
    这个圈里充斥了一堆代码写的很差的。。。真的是只懂机器学习算法的,然后写出来的 python 代码连调包都丑的一逼。然后不断有 bug,一直要改。
    rmlzy
        45
    rmlzy  
       2019-05-21 19:27:45 +08:00
    贵圈真乱
    rmlzy
        46
    rmlzy  
       2019-05-21 19:28:20 +08:00
    xichengh
        47
    xichengh  
       2019-05-21 19:30:38 +08:00
    dva 好用
    IsaacYoung
        48
    IsaacYoung  
       2019-05-21 20:12:23 +08:00
    dva 下 一 题
    rrfeng
        49
    rrfeng  
       2019-05-21 20:18:01 +08:00
    跟风提一下 Angular (
    shadeofgod
        50
    shadeofgod  
       2019-05-21 20:29:28 +08:00
    大概看了一下,例子只有一个 counter,你们是怎么处理 side effects 呢?
    shadeofgod
        51
    shadeofgod  
       2019-05-21 20:34:57 +08:00   ❤️ 1
    用不用 ts 和 redux 没什么关系吧,那是工程化的问题,和用什么框架无关。
    我们是个大概四十万行 js 代码的 electron app,以前是用的 dva,不过因为 dva namespace 和 action/reducer 一对一映射这两个糟糕的设计早就不用了,大到一定程度的话还是上数据库好。。。
    cjh1095358798
        52
    cjh1095358798  
       2019-05-21 20:48:03 +08:00
    厉害厉害,入圈感受,简直框架多到眼花缭乱。。
    mritd
        53
    mritd  
       2019-05-21 21:00:50 +08:00 via iPhone
    前段圈=娱乐圈
    paloalto
        54
    paloalto  
       2019-05-22 00:49:24 +08:00
    export default connect(({ products }) => ({
    products,
    }))(Products);

    dva 的代码这么丑吗?
    lonelygo
        55
    lonelygo  
       2019-05-22 01:19:03 +08:00
    下午面试前端,问:你怎么看前端圈子没事干就写个框架出来的现象?
    ruanyu1
        56
    ruanyu1  
    OP
       2019-05-22 04:54:17 +08:00
    @shadeofgod 是的,用不用 ts 和 redux 没有关系,其实我想说的是,我没有找到一个我需要的并且是 strong typed 的 lib 来使用,我们需要从 action 到 state 都是 type-safe 的。所以才基于目前开发所遇到的问题和经验,做了一个小的总结。

    effects 的处理在这里有例子: https://github.com/ReapexJS/reapex-example/blob/master/src/GithubSeacher.tsx

    namespace 和 action/reducer 绑定,其实我觉得是“框架”层面制定的规则,是 dva 有意为之,这样能强制使用者在编码的时候去思考模块的边界。降低模块之间的耦合,增加代码的复用性和可维护性。

    但是我并没有选择这样,`mutations()`和`effects()`都能接受其它 namespace 的 action。因为我们项目目前的情况无法做到这一点,而我们又无法重写整个项目,再者,我觉得没必要去牺牲这一部分的灵活性来换取所谓的模块化。
    ruanyu1
        57
    ruanyu1  
    OP
       2019-05-22 04:58:02 +08:00
    准确的说是模块化和灵活性的一个 tradeoff @shadeofgod
    thelderfrog
        58
    thelderfrog  
       2019-05-22 05:08:37 +08:00 via iPad
    ruanyu1
        59
    ruanyu1  
    OP
       2019-05-22 05:19:25 +08:00
    @ByZHkc3 @gxm44 @xichengh @IsaacYoung @rmlzy
    dvajs 和 rematch 都有了解过,但是并没有满足我们的需求:
    1. type-safe
    2. less boilerplate
    3. lightweight, 易整合,能和现有项目共存,然后平滑迁移
    4. 模块化

    dvajs 和 rematch 都很好,但是都或多或少的无法满足部分需求。
    ruanyu1
        60
    ruanyu1  
    OP
       2019-05-22 05:54:21 +08:00
    对于说“贵圈真乱”的,其实我觉得前端圈并不是乱。而是前端的开发者多,技术栈相对开放,所以就有很多造轮子的空间。不过我不觉得这有什么不好的。同样的整天写业务代码和 CURD,也不是全都好。

    顶尖的开源项目不是每个人想写都能写出来,前端的开发者愿意在自己熟悉的领域思考和动手,并且分享出来,我想大多数人希望看到的是他人的肯定或者质疑。V2EX:“请尽量让自己的回复能够对别人有帮助”
    dartabe
        61
    dartabe  
       2019-05-22 06:29:15 +08:00
    前端到底要怎么学 我懵逼了 求指引 光 html css 加上点普通 js 都能缠斗很久
    yjfengwen
        62
    yjfengwen  
       2019-05-22 09:39:07 +08:00   ❤️ 1
    一年前项目组也遇到了相关问题,当时针对 redux 这块封装了个工具 https://github.com/gcfeng/nmodel,用下来也还可以。
    no1xsyzy
        63
    no1xsyzy  
       2019-05-22 10:14:22 +08:00
    @cnnblike 与其说有利于开发,不如说有利于维护(可读性)
    显式类型或者有类型注记容易维护是个两千多年前孔子和苏格拉底时代就已经确定的知识。
    隐式无注记类型容易做原型玩具也是同时确定的知识。
    undeflife
        64
    undeflife  
       2019-05-22 10:24:06 +08:00
    redux 初用起来有点累 但是配合 react 的 hoc 代码真的很清晰干净
    jQuery 也不是不能用,onedrive 的上的 office 文件的预览用的 jQuery 1.7,编辑模式下 jQuery 2.2
    userdhf
        65
    userdhf  
       2019-05-22 10:28:29 +08:00
    vQuery 大法好
    框架就干框架的事
    细节一律 jq
    cnscorpions
        66
    cnscorpions  
       2020-05-10 01:19:24 +08:00
    redux 还好吧,状态管理稳,隔壁 angular 的 service + rxjs 还不知道怎么跟踪状态
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5223 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 07:23 · PVG 15:23 · LAX 00:23 · JFK 03:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.