腾讯发布新版前端组件框架 Omi,全面拥抱 Web

 

Omi - 合一

下一代 Web 框架,去万物糟粕,合精华为一

4KB 的代码尺寸,比小更小

  • 顺势而为,顺从浏览器的发展和 API 设计
  • Webcomponents + JSX 相互融合为一个框架 Omi
  • Webcomponents 也可以数据驱动视图, UI = fn(data)
  • JSX 是开发体验最棒(智能提示)、语法噪音最少的 UI 表达式
  • 独创的 Path Updating 机制,基于 Proxy 全自动化的精准更新,功耗低,自由度高,性能卓越,方便集成 requestIdleCallback
  • 使用 store 系统不需要调用 this.udpate,它会自动化按需更新局部视图
  • 看看Shadom DOM 与 Virtual DOM 融合,Omi 既使用了虚拟 DOM,也是使用真实 Shadom DOM,让视图更新更准确更迅速
  • 类似 WeStore 体系,99.9% 的项目不需要什么时间旅行,也不仅仅 redux 能时间旅行,请不要上来就 redux,Omi store 体系可以满足所有项目
  • 局部 CSS 最佳解决方案(Shadow DOM),社区为局部 CSS 折腾了不少框架和库(使用js或json写样式,如:Radium,jsxstyle,react-style;与webpack绑定使用生成独特的className文件名—类名—hash值,如:CSS Modules,Vue),都是 hack 技术;Shadow DOM Style 是最完美的方案
  • 对比同样开发 TodoApp, Omi 和 React 渲染完的 DOM 结构:

    文档

    需要在 render 的时候从根节点注入 store 才能在所有自定义 Element 里使用 this.store:

    render(<todo-app></todo-app>, 'body', store)

    → Store 完整的代码

    总结一下:

    • store.data 用来列出所有属性和默认值(除去 props 决定的视图的组件)
    • 组件和页面的 data 用来列出依赖的 store.data 的属性 (omi会记录path),按需更新
    • 如果页面简单组件很少,可以 updateAll 设置成 true,并且组件和页面不需要声明 data,也就不会按需更新
    • globalData 里声明的 path,只要修改了对应 path 的值,就会刷新所有页面和组件,globalData 可以用来列出所有页面或大部分公共的属性 Path

    文档

    My First Element

    
                            
    关键字:
    50000+
    5万行代码练就真实本领
    17年
    创办于2008年老牌培训机构
    1000+
    合作企业
    98%
    就业率

    联系我们

    电话咨询

    0532-85025005

    扫码添加微信