今天推荐两个腾讯开源的前端框架，分别是 wujie（无界）和 Omi。

wujie（无界）

无界微前端是一款基于 Web Components + iframe 微前端框架，具备成本低、速度快、原生隔离、功能强等一系列优点。

Web Components 是一个浏览器原生支持的组件封装技术，可以有效隔离元素之间的样式，iframe 可以给子应用提供一个原生隔离的运行环境，相比自行构造的沙箱 iframe 提供了独立的 window、document、history、location，可以更好的和外部解耦。

无界微前端采用 webcomponent + iframe 的沙箱模式，在实现原生隔离的前提下比较完善的解决了上述问题。

特性

• 成本低

  • 主应用使用成本低

  • 子应用适配成本低

• 速度快

  • 子应用首屏打开速度快

  • 子应用运行速度快

• 原生隔离

  • css 样式通过 Web Components 可以做到严格的原生隔离

  • js 运行在 iframe 中做到严格的原生隔离

• 功能强大

  • 支持子应用保活

  • 支持子应用嵌套

  • 支持多应用激活

  • 支持应用共享

  • 支持去中心化通信

  • 支持生命周期钩子

  • 支持插件系统

  • 支持 vite 框架

开源项目地址：https://github.com/Tencent/wujie

Omi

Omi 是一个前端跨框架跨平台框架。

特性

• 跨框架，任何框架可以使用 Omi 自定义元素

• 提供桌面、移动和小程序整体解决方案

• 小巧的尺寸和高性能

• 基于 Shadow/Light Dom 设计

• 符合浏览器的发展趋势以及 API 设计理念

• Web Components + JSX/TSX 融合为一个框架 Omi

• JSX/TSX 是开发体验最棒(智能提示)、语法噪音最少、图灵完备的 UI 表达式，模板引擎不完备，模板字符串完备但是语法噪音太大

• 看看 Facebook React 和 Web Components 对比优势，Omi 融合了各自的优点，而且给开发者自由的选择喜爱的方式

• Shadow/Light DOM 与 Virtual DOM 融合，Omi 既使用了虚拟 DOM，也是使用真实 Shadow DOM，让视图更新更准确更迅速

• 局部 CSS 最佳解决方案(Shadow DOM)，社区为局部 CSS 折腾了不少框架和库(使用 js 或 json 写样式，如：Radium，jsxstyle，react-style；与 webpack 绑定使用生成独特的 className 文件名—类名—hash值，如：CSS Modules，Vue)，还有运行时注入scoped atrr 的方式，都是 hack 技术；Shadow DOM Style 是最完美的方案

• 对 custom elements 友好，通过字符串 '0'或者'false'传递 false，通过:和Omi.$传递任意复杂类型

• 增强了 CSS，支持 rpx 单位，基于 750 屏幕宽度

该项目里还给出了将近 20 个例子，比如：Omi 写的 MVP 架构的贪吃蛇游戏、Omi 钢琴、用 Markdown 生成静态网站文档等。

开源项目地址：https://github.com/Tencent/omi

------

我们创建了一个高质量的技术交流群，与优秀的人在一起，自己也会优秀起来，赶紧点击加群，享受一起成长的快乐。另外，如果你最近想跳槽的话，年前我花了2周时间收集了一波大厂面经，节后准备跳槽的可以点击这里领取！

推荐阅读

• JetBrains产品中国区最新定价公布，比美区贵
  

• 学会 IDEA 远程 Debug ，直接线上秀操作
  

• 开源消息队列新秀：Pulsar！
  

··································

你好，我是程序猿DD，10年开发老司机、阿里云MVP、腾讯云TVP、出过书创过业、国企4年互联网6年。从普通开发到架构师、再到合伙人。一路过来，给我最深的感受就是一定要不断学习并关注前沿。只要你能坚持下来，多思考、少抱怨、勤动手，就很容易实现弯道超车！所以，不要问我现在干什么是否来得及。如果你看好一个事情，一定是坚持了才能看到希望，而不是看到希望才去坚持。相信我，只要坚持下来，你一定比现在更好！如果你还没什么方向，可以先关注我，这里会经常分享一些前沿资讯，帮你积累弯道超车的资本。