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

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

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

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

    前提是我们有一个 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!

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

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

    dva 的代码这么丑吗?
        55
    lonelygo   33 天前
    下午面试前端,问:你怎么看前端圈子没事干就写个框架出来的现象?
        56
    ruanyu1   33 天前
    @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。因为我们项目目前的情况无法做到这一点,而我们又无法重写整个项目,再者,我觉得没必要去牺牲这一部分的灵活性来换取所谓的模块化。
        57
    ruanyu1   33 天前
    准确的说是模块化和灵活性的一个 tradeoff @shadeofgod
        58
    thelderfrog   33 天前 via iPad
        59
    ruanyu1   33 天前
    @ByZHkc3 @gxm44 @xichengh @IsaacYoung @rmlzy
    dvajs 和 rematch 都有了解过,但是并没有满足我们的需求:
    1. type-safe
    2. less boilerplate
    3. lightweight, 易整合,能和现有项目共存,然后平滑迁移
    4. 模块化

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

    顶尖的开源项目不是每个人想写都能写出来,前端的开发者愿意在自己熟悉的领域思考和动手,并且分享出来,我想大多数人希望看到的是他人的肯定或者质疑。V2EX:“请尽量让自己的回复能够对别人有帮助”
        61
    dartabe   33 天前
    前端到底要怎么学 我懵逼了 求指引 光 html css 加上点普通 js 都能缠斗很久
        62
    yjfengwen   33 天前   ♥ 1
    一年前项目组也遇到了相关问题,当时针对 redux 这块封装了个工具 https://github.com/gcfeng/nmodel,用下来也还可以。
        63
    no1xsyzy   33 天前
    @cnnblike 与其说有利于开发,不如说有利于维护(可读性)
    显式类型或者有类型注记容易维护是个两千多年前孔子和苏格拉底时代就已经确定的知识。
    隐式无注记类型容易做原型玩具也是同时确定的知识。
        64
    undeflife   33 天前
    redux 初用起来有点累 但是配合 react 的 hoc 代码真的很清晰干净
    jQuery 也不是不能用,onedrive 的上的 office 文件的预览用的 jQuery 1.7,编辑模式下 jQuery 2.2
        65
    userdhf   33 天前
    vQuery 大法好
    框架就干框架的事
    细节一律 jq
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2051 人在线   最高记录 5043   ·   Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 25ms · UTC 16:11 · PVG 00:11 · LAX 09:11 · JFK 12:11
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1