用好腾讯开源的这两个前端框架，后端仔亦能研发出好看的应用！-外链论坛

9q13nh 发表于 2024-10-10 05:01:48

用好腾讯开源的这两个前端框架，后端仔亦能研发出好看的应用！

点击上方“芋道源码”，选取“<a style="color: black;">设为星标</a>”
管她前浪，还是后浪？
能浪的浪，才是好浪！

每日 10:33 更新文案，每日掉亿点点头发...
源码精品专栏
 <a style="color: black;">原创 | Java 2021 超神之路，很肝~</a>
<a style="color: black;">中文仔细注释的开源项目</a>
<a style="color: black;">RPC 框架 Dubbo 源码解析</a>
<a style="color: black;">网络应用框架 Netty 源码解析</a>
<a style="color: black;">信息中间件 RocketMQ</a> 源码解析
<a style="color: black;">数据库中间件 Sharding-JDBC 和 MyCAT 源码解析</a>
<a style="color: black;">作业调度中间件 Elastic-Job 源码解析</a>
<a style="color: black;">分布式事务中间件 TCC-Transaction 源码解析</a>
<a style="color: black;">Eureka 和 Hystrix 源码解析</a>
<a style="color: black;">Java 并发源码</a><a style="color: black;">源自：TJ君</a><a style="color: black;">wujie（无界）</a><a style="color: black;">Omi</a>
今天举荐两个腾讯开源的前端框架，分别是 wujie（无界）和 Omi。
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><a style="color: black;">wujie（无界）</a></h2>
无界微前端是一款基于 Web Components + iframe 微前端框架，具备成本低、速度快、原生隔离、功能强等一系列优点。<img src="https://mmbiz.qpic.cn/mmbiz_png/JdLkEI9sZfdFzOl3x0YBVHH3libloAVstXQtricia3zr5B75peHs8h9gh5KqkciaPg9pNzv9EziaPWz5ibYibiaIqZUbOQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">
Web Components 是一个浏览器原生支持的组件封装技术，能够有效隔离元素之间的样式，iframe 能够给子应用供给一个原生隔离的运行环境，相比自动构造的沙箱 iframe 供给了独立的 window、document、history、location，能够更好的和外边解耦。
无界微前端采用 webcomponent + iframe 的沙箱模式，在实现原生隔离的前提下比较完善的处理了以上问题。<a style="color: black;">特性</a>成本低主应用运用成本低子应用适配成本低速度快子应用首屏打开速度快子应用运行速度快原生隔离css 样式经过 Web Components 能够做到严格的原生隔离js 运行在 iframe 中做到严格的原生隔离功能强大支持子应用保活支持子应用嵌套支持多应用激活支持应用共享支持去中心化通信支持生命周期钩子支持插件系统支持 vite 框架开源项目位置：https://github.com/Tencent/wujie基于 Spring Boot + MyBatis Plus + Vue & Element 实现的后台管理系统 + 用户小程序，支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城等功能项目位置：https://github.com/YunaiV/ruoyi-vue-pro视频教程：https://doc.iocoder.cn/video/<h2 style="color: black; text-align: left; margin-bottom: 10px;"><a style="color: black;">Omi</a></h2>
Omi 是一个前端跨框架跨平台框架。<img src="https://mmbiz.qpic.cn/mmbiz_png/JdLkEI9sZfdFzOl3x0YBVHH3libloAVstcbIhbFMiau0mcDK448FaUIicZ2HjdIrsGicCXdoWSuUzVhsY8hWr9D9OA/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"><a style="color: black;">特性</a>跨框架，任何框架能够运用 Omi 自定义元素供给桌面、移动和小程序整体处理方法小巧的尺寸和高性能基于 Shadow/Light Dom 设计符合浏览器的发展趋势以及 API 设计理念Web Components + JSX/TSX 融合为一个框架 OmiJSX/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 生成静态网站文档等。<img src="https://mmbiz.qpic.cn/mmbiz_jpg/JdLkEI9sZfdFzOl3x0YBVHH3libloAVstsVib9FtQHBSa7X5ol6FopH8E620VSMqlEZpeoibCd3tiaB5qicTus2ng0Q/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">开源项目位置：https://github.com/Tencent/omi欢迎加入我的知识星球，一块探讨架构，交流源码。加入方式，长按下方二维码噢

：

<img src="https://mmbiz.qpic.cn/mmbiz_png/JdLkEI9sZfdCCyC6MQeHl5kNZu4u5Jdqic3MFibq3YUUtnydwWhibCBQmfOUAzRMHv3HyDD6NwsfFvtzx1eEVK1KA/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">
已在知识星球更新源码解析如下：

<a style="color: black;"><img src="https://mmbiz.qpic.cn/mmbiz_png/JdLkEI9sZfdCa89KZ4Ls04tTqXvgxWVian1HZ76BOz52l4pkqX0IMicM14rRFyiaO0vQENMOufUhDVVtPiadDdoKjQ/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></a>
<a style="color: black;"><img src="https://mmbiz.qpic.cn/mmbiz_png/JdLkEI9sZfdCa89KZ4Ls04tTqXvgxWViaExAeJx1CZeSaJ9qxh0X70s4JGjIVVlT5ZqBGu51YTedMNfO49DKb6g/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></a>
<a style="color: black;"><img src="https://mmbiz.qpic.cn/mmbiz_png/JdLkEI9sZfdCa89KZ4Ls04tTqXvgxWViaCibrYIXNgebWPd5g7Or9dcToN660aLAEJEhz4wLpBBiaFhejsaGDGd2g/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></a>
<a style="color: black;"><img src="https://mmbiz.qpic.cn/mmbiz_png/JdLkEI9sZfdCa89KZ4Ls04tTqXvgxWVia4qmv743xvlia1HYmqCDPBLpo3HXtw8Hmo76GkGK5wCqvicAKxd9ET3ow/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></a>
近期更新《芋道 SpringBoot 2.X 入门》系列，已然 101 余篇，覆盖了 MyBatis、Redis、MongoDB、ES、分库分表、读写分离、SpringMVC、Webflux、权限、WebSocket、Dubbo、RabbitMQ、RocketMQ、Kafka、性能测试等等内容。
供给近 3W 行代码的 SpringBoot 示例，以及超 4W 行代码的电商微服务项目。
获取方式：点“在看”，关注公众号并回复 666 领取，更加多内容持续奉上。
文案有帮忙的话，在看，转发吧。
谢谢支持哟 (*^__^*）

页: [1]

外链论坛's Archiver

用好腾讯开源的这两个前端框架，后端仔亦能研发出好看的应用！