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

关于 js 的声明式 UI,我有一个大胆的想法

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

    接触了不少声明式 UI 的框架,Flutter 封装好的 widget 数量多,但是自己封装要写很多模版 state 代码,嵌套也不好看; Swift UI 好看易用,modifier 很强大,但又缺少一些灵活性; React 写起来很舒服,但是又带来了许多额外的概念,jsx 的语法还需要额外编译,都不能尽善尽美。 于是我写了一个小 demo,试图将这几个框架的优点结合起来,暂时将其命名为 Mox 。 先上一段代码:

    const app = State((state) => () => {
      const times = state(0);
      return Flex(
        Div(times.value), 
        Div("click me")
          .on("click",times.setValue(o=>o+1))
        .flexFlow("column")
    });
    
    new Mox().Render("app", app);
    

    (缝合怪石锤了) 大致的想法就是通过函数参数组合子组件,通过 modifier(.styles()、.on()等)组合样式、props 和事件,再搭配几个高级组件如 State 、Element 等获取响应式变量和 dom 元素。不得不说 js 实在是太灵活了,本来打算用 TS 写的,写着写着就停不下来了。 因为目前只是 demo,所以没有考虑 render 的性能和父子组件通信的问题,reRender 函数直接就整个全部重新渲染了😂

    现在看起来代码还很凌乱,因为可用的 modifier 还只有几个,等到抽成组件之后应该会好很多。

    这样写的优势就在于整个项目只需要写 js 就行了,引入一个 scrip 文件就可以直接开始模块式开发,也不需要记多余的概念,modifier 都是几个 css 属性和 html 属性,最大的好处是可以直接展示和控制 css,直观的看出一个组件的作用,坏处可能是没有编辑器支持容易写错属性名称吧。

    各位 V 友们有啥看法呢?放上 github 链接: https://github.com/Mox-js/Mox-js 目前这个 demo 连玩具都算不上,如果反响不好就全当练习虚拟 DOM 吧,又要去看 react 源码了...

    16 条回复    2021-03-18 10:45:35 +08:00
    taowen
        1
    taowen   95 天前
    wheelg
        2
    wheelg   95 天前 via iPhone
    @taowen 是的,因为这里目前只是 demo,具体点重新渲染算法还没有写,暂时当作只有一颗树
    gowk
        3
    gowk   95 天前
    另一个 Mithril.js ?
    SuperMild
        4
    SuperMild   95 天前
    借楼宣传一下我的小框架
    一个很像 Mithril.js 的前端框架
    /t/758276
    agagega
        5
    agagega   95 天前 via iPhone
    这不是 SwiftUI in JS 吗😂
    namelosw
        6
    namelosw   95 天前   ❤️ 1
    > React 写起来很舒服,但是又带来了许多额外的概念,jsx 的语法还需要额外编译,都不能尽善尽美。
    > 于是我写了一个小 demo,试图将这几个框架的优点结合起来

    你这个其实早就有差不多的了…

    React 和类 React 的社区有些人一直是不用 JSX 的. 有的人直接用 createElement, 有的人抽了个叫 h('p'), 也有的人做成 html`<p></p>`, 这种一般叫 hyperscript.

    参考:

    https://github.com/hyperhype/hyperscript

    https://github.com/developit/htm
    wheelg
        7
    wheelg   95 天前 via iPhone
    @namelosw 嗯,我了解过 hyperscript,也考虑过是不是基于 react 开发会更好,但是这样的话就没法没法用上修饰符了
    imkerberos
        8
    imkerberos   95 天前
    今天被逼着写 VUE , CSS 布局都写吐了.... 想着如果有声明式的 UI 多好. 支持楼主好好做!
    gouflv
        9
    gouflv   95 天前 via iPhone
    可读性真的还是 jsx 好点,还有就是把样式函数化会显得耦合太多
    jiyinyiyong
        10
    jiyinyiyong   95 天前
    > reRender 函数直接就整个全部重新渲染了

    没有增量更新方案, 那就是纯 Demo 了, 都没法玩啊.

    这种写法, 属性多的话性能问题就需要担心了, React 那样至少一个调用完成, 多了也不会有明显的性能问题.
    ```
    Div("click me")
    .on("click",times.setValue(o=>o+1))
    .flexFlow("column")
    ```

    赶紧撸吧, 至少也要吧最基本的功能都堆上, 满足这边的例子 https://todomvc.com/
    wanguorui123
        11
    wanguorui123   95 天前 via iPhone
    不太喜欢声明式 UI,后期逻辑代码揉到 UI 里面,只会导致 UI 越来越混乱,可读性越来越差
    RickyC
        12
    RickyC   95 天前
    可是我喜欢 xml 布局。
    其他的都不好玩。
    weixiangzhe
        13
    weixiangzhe   94 天前 via iPhone
    flutter react swiftui 不都长得差不多吗
    aguesuka
        14
    aguesuka   94 天前 via Android
    语法噪音太多了吧
    DICK23
        15
    DICK23   94 天前
    这种感觉和 Dart 写法也没啥区别啊,整合了状态
    myCupOfTea
        16
    myCupOfTea   93 天前
    这种框架社区其实还挺多的
    关于   ·   帮助文档   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2166 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 03:53 · PVG 11:53 · LAX 20:53 · JFK 23:53
    ♥ Do have faith in what you're doing.