l14107cb 发表于 2024-10-10 04:59:36

举荐两个腾讯开源的前端框架，好用又好看！


    <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>好，我是TJ</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>10000款开源项目与工具的程序员</span></p><span style="color: black;">今天<span style="color: black;">举荐</span>两个腾讯开源的前端框架，分别是 wujie（无界）和 Omi。</span><span style="color: black;"><strong style="color: blue;"><span style="color: black;">wujie（无界）</span></strong></span><span style="color: black;">无界微前端是一款基于 Web Components + iframe 微前端框架，具备成本低、速度快、原生隔离、功能强等一系列优点。</span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/8cpIYdAicCcsPXU6WCXOBWrSUdT2ISfshcd7LYDn0u2VKCS0wKSCWV7ibkIzXJkNyliaC0QYRYibS4hLgWARL2AHKw/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p><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><span style="color: black;">无界微前端采用 webcomponent + iframe 的沙箱模式，在实现原生隔离的前提下比较完善的<span style="color: black;">处理</span>了<span style="color: black;">以上</span>问题。</span><span style="color: black;"><strong style="color: blue;">特性</strong></span>
    <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 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;">速度快</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;">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>
    <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;">支持插件系统</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><span style="color: black;">开源项目<span style="color: black;">位置</span>：<span style="color: black;">https://github.com/Tencent/wujie</span></span><span style="color: black;"><strong style="color: blue;">Omi</strong></span><span style="color: black;">Omi 是一个前端跨框架跨平台框架。</span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/8cpIYdAicCcsPXU6WCXOBWrSUdT2ISfshsHD4XAVuk8JAUaeqeTa6Ff8tQDouOMEXFYWs1B20icbT2cg3eEcIR1Q/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p><span style="color: black;"><strong style="color: blue;">特性</strong></span>
    <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><span style="color: black;">该项目里还给出了将近 20 个例子，<span style="color: black;">例如</span>：Omi 写的 MVP 架构的贪吃蛇游戏、Omi 钢琴、用 Markdown 生成静态网站文档等。</span><img src="https://mmbiz.qpic.cn/mmbiz_jpg/zRiam9B2qkhQDt3ZLkdPZlHOfAQcDib08Sj9mR47rLHlbPvyhHGEu1jk0hrlOmdiaCz8qjo9ZksF2jr63FxygJuxw/640?wx_fmt=jpeg&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1&amp;tp=webp" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">开源项目<span style="color: black;">位置</span>：<span style="color: black;">https://github.com/Tencent/omi</span></span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">往期<span style="color: black;">举荐</span></strong></span></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></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 style="color: black;">举荐</span>一个</span></a>不错的 AI 内容照妖镜</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></a></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;"><strong style="color: blue;">TJ君</strong></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><span style="color: black;">认识</span>一个牛x、好用、有趣的东东</span></p>




nqkk58 发表于 2024-10-16 21:12:13

顶楼主，说得太好了！

1fy07h 发表于 2024-10-27 23:17:17

我们有着相似的经历，你的感受我深有体会。

1fy07h 发表于 2024-11-7 07:33:04

论坛的成功是建立在我们诚恳、务实、高效、创新和团结合作基础上，我们要把这种精神传递下去。
页: [1]
查看完整版本: 举荐两个腾讯开源的前端框架，好用又好看！