开源项目 | 举荐两个腾讯开源的前端框架，超级美丽
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><strong style="color: blue;">前言</strong></span></h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">专注分享开源项目整套<span style="color: black;">处理</span><span style="color: black;">方法</span>，完全开源、可学习、可商用、宝藏库。</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">完整开源项目后端技术栈：Spring6、JDK17、SpringBoot、Spring Cloud、Docker、Nginx、Redis、MongoDB、MySql不管你技术<span style="color: black;">提高</span>还是接私活都<span style="color: black;">能够</span>用到。</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">完整开源项<span style="color: black;">日前</span>端技术栈：vue3、vite3、TypeScript/4、Ant-Design-Vue/3.2、element-plus/2.2、uniapp、H5网页、PC、<span style="color: black;">微X</span>小程序等最新的技术。</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">每日</span><span style="color: black;">供给</span>一个超棒的开源项目<span style="color: black;">包括</span>：物联网平台、WMS系统、ERP系统、OMS系统、知识社区、个人博客系列。</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">今天<span style="color: black;">举荐</span>两个腾讯开源的前端框架，分别是 wujie（无界）和 Omi。</span></p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">1、</span>wujie（无界）</strong></span></h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">无界微前端是一款基于 Web Components + iframe 微前端框架，具备成本低、速度快、原生隔离、功能强等一系列优点。</span></p><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;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">Web Components 是一个浏览器原生支持的组件封装技术，<span style="color: black;">能够</span>有效隔离元素之间的样式，iframe <span style="color: black;">能够</span>给子应用<span style="color: black;">供给</span>一个原生隔离的运行环境，相比<span style="color: black;">自动</span>构造的沙箱 iframe <span style="color: black;">供给</span>了独立的 window、document、history、location，<span style="color: black;">能够</span>更好的和<span style="color: black;">外边</span>解耦。</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">无界微前端采用 webcomponent + iframe 的沙箱模式，在实现原生隔离的前提下比较完善的<span style="color: black;">处理</span>了<span style="color: black;">以上</span>问题。</span></p><a style="color: black;"><strong style="color: blue;">特</strong></a><strong style="color: blue;">性</strong><strong style="color: blue;">成本低</strong>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">主应用<span style="color: black;">运用</span>成本低</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">子应用适配成本低</span></p><strong style="color: blue;">速度快</strong>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">子应用首屏打开速度快</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">子应用运行速度快</span></p><strong style="color: blue;">原生隔离</strong>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">css 样式<span style="color: black;">经过</span> Web Components <span style="color: black;">能够</span>做到严格的原生隔离</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">js 运行在 iframe 中做到严格的原生隔离</span></p><strong style="color: blue;">功能强大</strong>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">支持子应用保活</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">支持子应用嵌套</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">支持多应用激活</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">支持应用共享</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">支持去中心化通信</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">支持生命周期钩子</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">支持插件系统</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">支持 vite 框架</span></p><strong style="color: blue;">开源项目<span style="color: black;">位置</span>：</strong>https://github.com/Tencent/wujie<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">2、</span>Omi</strong></span></h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">Omi 是一个前端跨框架跨平台框架。</span></p><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;"><strong style="color: blue;">特性</strong></a>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">跨框架，任何框架<span style="color: black;">能够</span><span style="color: black;">运用</span> Omi 自定义元素</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">供给</span>桌面、移动和小程序整体<span style="color: black;">处理</span><span style="color: black;">方法</span></span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">小巧的尺寸和高性能</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">基于 Shadow/Light Dom 设计</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">符合浏览器的发展趋势以及 API 设计理念</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">Web Components + JSX/TSX 融合为一个框架 Omi</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">JSX/TSX 是<span style="color: black;">研发</span>体验最棒(智能提示)、语法噪音最少、图灵完备的 UI 表达式，模板引擎不完备，模板字符串完备<span style="color: black;">然则</span>语法噪音太大</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">瞧瞧</span> Facebook React 和 Web Components 对比<span style="color: black;">优良</span>，Omi 融合了各自的优点，<span style="color: black;">况且</span>给<span style="color: black;">研发</span>者自由的<span style="color: black;">选取</span><span style="color: black;">喜欢</span>的方式</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">Shadow/Light DOM 与 Virtual DOM 融合，Omi 既<span style="color: black;">运用</span>了虚拟 DOM，<span style="color: black;">亦</span>是<span style="color: black;">运用</span>真实 Shadow DOM，让视图更新更准确更<span style="color: black;">快速</span></span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">局部 CSS 最佳<span style="color: black;">处理</span><span style="color: black;">方法</span>(Shadow DOM)，社区为局部 CSS 折腾了不少框架和库(<span style="color: black;">运用</span> js 或 json 写样式，如：Radium，jsxstyle，react-style；与 webpack 绑定<span style="color: black;">运用</span>生成独特的 className 文件名—类名—hash值，如：CSS Modules，Vue)，还有运行时注入scoped atrr 的方式，都是 hack 技术；Shadow DOM Style 是最完美的<span style="color: black;">方法</span></span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">对 custom elements 友好，<span style="color: black;">经过</span>字符串 0<span style="color: black;">或</span>false传递 false，<span style="color: black;">经过</span>:和Omi.$传递任意<span style="color: black;">繁杂</span>类型</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">加强</span>了 CSS，支持 rpx 单位，基于 750 屏幕宽度</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">该项目里还给出了将近 20 个例子，<span style="color: black;">例如</span>：Omi 写的 MVP 架构的贪吃蛇游戏、Omi 钢琴、用 Markdown 生成静态网站文档等。</span></p><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;"><strong style="color: blue;">开源项目<span style="color: black;">位置</span>：</strong>https://github.com/Tencent/omi<h3 style="color: black; text-align: left; margin-bottom: 10px;"><strong style="color: blue;">往期<span style="color: black;">举荐</span></strong></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">人人可用的开源数据可视化分析工具</a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">面向中小企业级erp、oms、wms全套<span style="color: black;">处理</span><span style="color: black;">方法</span></a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">开源支付系统、支持<span style="color: black;">微X</span>支付宝</a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">SpringBoot + </a>Vue 的智能停车场管理平台</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">多门店分销的开源前后端分离商城系统</a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">全端开源电商系统支持小程序、H5、PC商城</a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">后台、小程序、uniapp前后端分离完整全开源商城</a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">开源物联网<span style="color: black;">基本</span><span style="color: black;">研发</span>平台</a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">开源人脸识别登录系统</a></p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><strong style="color: blue;">写在最后</strong></span></h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">欢迎加入【前端开源实验室读者交流群】，群内聊天学习摸鱼为主，</span><span style="color: black;">不<span style="color: black;">按时</span></span><span style="color: black;">会分享<span style="color: black;">有些</span>技术要点和<span style="color: black;">优秀</span>学习资源，有一群有趣有料的小伙伴在等你哦！</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">进群方式：加柚子哥<span style="color: black;">微X</span>回复 </span><span style="color: black;">进群</span><span style="color: black;">，按提示操作<span style="color: black;">就可</span>进群。</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">版权申明：内容<span style="color: black;">源自</span>网络，版权归原创者所有。除非<span style="color: black;">没法</span>确认，<span style="color: black;">咱们</span>都会标明作者及出处，如有侵权烦请<span style="color: black;">通知</span>，<span style="color: black;">咱们</span>会立即删除并<span style="color: black;">暗示</span>歉意。</span></p>
外链论坛的成功举办，是与各位领导、同仁们的关怀和支持分不开的。在此，我谨代表公司向关心和支持论坛的各界人士表示最衷心的感谢！ 论坛是一个舞台，让我们在这里尽情的释放自己。
页:
[1]