盘点腾讯15个最受欢迎的前端开源项目
yuyutoo 2024-10-12 00:53 3 浏览 0 评论
大家好,我是Echa。
今天小编介绍的主角是腾讯,腾讯于1998年11月成立,作为国内知名的互联网公司,开源项目渗透到各行各业,随便拿几款开源项目,用户量都是以亿为单位。比如早期的社交软件QQ、微信、腾讯视频、腾讯新闻、腾讯云、腾讯会议、腾讯游戏等等。通过技术丰富互联网用户的生活,助力企业数字化升级。腾讯的使命是“用户为本 科技向善”。是个非常了不起的公司,也是小编非常崇拜的企业之一。
今天小编来盘点腾讯15个最受欢迎的前端开源项目,希望大家开发学习有所帮助。同时问一下粉丝们你们用了几个,欢迎在评论下方讨论。
全文大纲
- wujie-无界微前端框架
- TDesign-一套完整的企业级设计体系框架
- WeUI-一套同微信原生视觉体验一致的基础样式库
- WePY-是一款让小程序支持组件化开发的框架
- vConsole-一个轻量、可拓展、针对手机网页的前端开发者调试面板
- TMagic-可视化开源项目
- Omi-是微信支付线研发部研发的下一代前端框架
- kbone-是一个致力于微信小程序和 Web 端同构的解决方案
- Face2FaceTranslator-面对面翻译小程序
- secguide-面向开发人员梳理的代码安全指南
- feflow-微信团队前端开发工具
- QMUI Web-是一个专注 Web UI 开发框架
- urvejs-一款魔幻线条框架
- AlloyLever- 是腾讯 AlloyTeam 团队开源的一款 Web 开发调试工具
- TEditor-是腾讯的 HTML5 富编辑器
wujie
官网:https://wujie-micro.github.io/doc/
Github:https://github.com/Tencent/wujie
无界微前端是一款基于 Web Components + iframe 微前端框架,具备成本低、速度快、原生隔离、功能强等一系列优点。其能够完善的解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等。
能力
- 子应用的加载和卸载能力
- 页面需要从一个子应用切换到另一个子应用,框架必须具备加载、渲染、切换的能力
- 子应用独立运行的能力
- 子应用运行会污染全局的 window 对象,样式会污染其他应用,必须有效的隔离起来
- 子应用路由状态保持能力
- 激活子应用后,浏览器刷新、前进、后退子应用的路由都应该可以正常工作
- 应用间通信的能力
- 应用间可以方便、快捷的通信
收益
- 技术栈无关
- 主框架不限制接入应用的技术栈,微应用具备完全自主权
- 独立开发、独立部署
- 微应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新
- 增量升级
- 在面对各种复杂场景时,我们通常很难对一个已经存在的系统做全量的技术栈升级或重构,而微前端是一种非常好的实施渐进式重构的手段和策略
- 独立运行时
- 每个微应用之间状态隔离,运行时状态不共享
single-spa 方案
single-spa是一个目前主流的微前端技术方案,其主要实现思路:
- 预先注册子应用(激活路由、子应用资源、生命周期函数)
- 监听路由的变化,匹配到了激活的路由则加载子应用资源,顺序调用生命周期函数并最终渲染到容器
乾坤微前端架构则进一步对single-spa方案进行完善,主要的完善点:
- 子应用资源由 js 列表修改进为一个url,大大减轻注册子应用的复杂度
- 实现应用隔离,完成js隔离方案 (window工厂) 和css隔离方案 (类vue的scoped)
- 增加资源预加载能力,预先子应用html、js、css资源缓存下来,加快子应用的打开速度
总结一下方案的优缺点:
优点
- 监听路由自动的加载、卸载当前路由对应的子应用
- 完备的沙箱方案,js沙箱做了SnapshotSandbox、LegacySandbox、ProxySandbox三套渐进增强方案,css沙箱做了两套strictStyleIsolation、experimentalStyleIsolation两套适用不同场景的方案
- 路由保持,浏览器刷新、前进、后退,都可以作用到子应用
- 应用间通信简单,全局注入
缺点
- 基于路由匹配,无法同时激活多个子应用,也不支持子应用保活
- 改造成本较大,从 webpack、代码、路由等等都要做一系列的适配
- css 沙箱无法绝对的隔离,js 沙箱在某些场景下执行性能下降严重
- 无法支持 vite 等 ESM 脚本运行
如下图:
TDesign
官网:https://tdesign.tencent.com/
Github:https://github.com/Tencent/wujie
TDesign 是一套完整的企业级设计体系,拥有基于 Vue / React / 小程序 等技术栈的组件库解决方案。用于构建 设计统一/跨端多技术栈的前端应用时,TDesign 更有优势。TDesign 是一个 multi-repo, 其包含了多个代码仓库:
如下图:
WeUI
官网: https://weui.io/
Github: https://github.com/Tencent/weui
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含 button、cell、dialog、 progress、 toast、article、actionsheet、icon 等各式元素。
如下图:
WePY
官网: https://wepyjs.gitee.io/wepy-docs/
Github: https://github.com/Tencent/wepy
WePY 是一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化,Promise,Async Functions 的引入都是为了能让开发小程序项目变得更加简单,高效。
如下图:
vConsole
Github: https://github.com/Tencent/vConsole
一个轻量、可拓展、针对手机网页的前端开发者调试面板。vConsole 是框架无关的,可以在 Vue、React 或其他任何框架中使用。现在 vConsole 是微信小程序的官方调试工具。
功能特性
- 日志(Logs): console.log|info|error|...
- 网络(Network): XMLHttpRequest, Fetch, sendBeacon
- 节点(Element): HTML 节点树
- 存储(Storage): Cookies, LocalStorage, SessionStorage
- 手动执行 JS 命令行
- 自定义插件
如下图:
TMagic
Github: https://github.com/Tencent/tmagic-editor
tmagic-editor 可视化开源项目是从魔方平台演化而来的开源项目,意在提供一个供开发者快速搭建可视化搭建平台的解决方案。
项目介绍
在本项目中,我们核心内容,是包含在 packages/editor 中的编辑器,以及 runtime 和 packages/ui 提供的各个前端框架相关的 runtime 和 ui。
- packages 目录中提供的内容,我们都以 npm 包形式输出,开发者可以通过安装对应的包来使用。
- runtime 是我们提供的编辑器活动页和编辑器模拟器运行的页面项目示例。可以直接使用,也可以参考并自行实现。
- playground 是一个简单的编辑器项目示例。即使用了 packages 和 runtime 内容的集成项目。开发者可以参考 playground,使用魔方提供的能力实现一个满足业务方需求的编辑器。
编辑器
通过安装和使用 @tmagic/editor,可以快速搭建起一个魔方编辑器。
页面渲染
runtime 是魔方提供的页面渲染环境。通过加载在编辑器中产出的 DSL,即可得到魔方编辑器希望拥有的最终产物,一个活动页面。我们提供了 vue2/vue3/react 几个版本的 runtime。
通过魔方编辑器和 runtime 渲染,以及通过自定义的复杂组件开发,可以在魔方项目上,搭建出复杂而精美的页面。
如下图:
Omi
官网:https://tencent.github.io/omi/
Github: https://github.com/Tencent/omi
Omi 框架是微信支付线研发部研发的下一代前端框架, 基于 Web Components 规范设计的组件化框架,可以使用 JSX/TSX 来写 HTML 结构。可以开发 PC Web、移动端 H5,也可以直接使用 Omi 开发小程序。
如下图:
kbone
Github: https://github.com/Tencent/kbone
kbone 是一个致力于微信小程序和 Web 端同构的解决方案。kbone 实现了一个适配器,在适配层里模拟出了浏览器环境,让 Web 端的代码可以不做什么改动便可运行在小程序里。因为 kbone 是通过提供适配器的方式来实现同构,所以它的优势很明显:
- 大部分流行的前端框架都能够在 kbone 上运行,比如 Vue、React、Preact 等。
- 支持更为完整的前端框架特性,因为 kbone 不会对框架底层进行删改(比如 Vue 中的 v-html 指令、Vue-router 插件)。
- 提供了常用的 dom/bom 接口,让用户代码无需做太大改动便可从 Web 端迁移到小程序端。
- 在小程序端运行时,仍然可以使用小程序本身的特性(比如像 live-player 内置组件、分包功能)。
- 提供了一些 Dom 扩展接口,让一些无法完美兼容到小程序端的接口也有替代使用方案(比如 getComputedStyle 接口)。
如下图:
Face2FaceTranslator
Github: https://github.com/Tencent/Face2FaceTranslator
面对面翻译小程序是微信团队针对中英文面对面沟通的场景开发的流式语音翻译小程序,基于微信同声传译插件封装实现,提供了中英文语音识别,文本翻译等功能。
如下图:
secguide
Github: https://github.com/Tencent/secguide
面向开发人员梳理的代码安全指南,旨在梳理API层面的风险点并提供详实可行的安全编码方案。代码安全指引可用于以下场景:开发人员日常参考、编写安全系统扫描策略、安全组件开发、漏洞修复指引。该指南包含了 C/C++、JavaScript、Node.js、Go、Java、Python的安全指南。
如下图:
feflow
Github: https://github.com/Tencent/feflow
Feflow (读音 /?fefl??/)是腾讯开源的用于提升工程效率的前端工作流和规范工具。托管在Github上:feflow。目前已经在NOW直播、花样直播、花样交友、手Q附近、群视频、群送礼、回音、应用宝、企鹅号等业务广泛使用。有80+ WEB/IOS/Andriod 稳定用户,累计投入生产项目达到240+。
Feflow 借鉴了 Pipline 的思想,将日常的研发工作划分为:初始化、本地开发、打包构建、检查、发布上线五个步骤。分别对应 init、dev、build、test和deploy五个基本命令。
除了服务好基本的开发工作流和规范,Feflow 提供了易于扩展的插件机制,用于打造团队统一的工具链生态。
如下图:
QMUI Web
Github: https://github.com/Tencent/QMUI_Web
QMUI Web 是一个专注 Web UI 开发,帮助开发者快速实现特定的一整套设计的框架。
框架主要由一个强大的 Sass 方法合集与内置的工作流构成。通过 QMUI Web,开发者可以很轻松地提高 Web UI 开发的效率,同时保持了项目的高可维护性与稳健。
如果你需要方便地控制项目的整体样式,或者需要应对频繁的界面变动,
那么 QMUI Web 框架将会是你最好的解决方案。
功能特性
基础配置与组件
通过内置的公共组件和对应的 SASS 配置表,你只需修改简单的配置即可快速实现所需样式的组件。(QMUI SASS 配置表和公共组件如何帮忙开发者快速搭建项目基础 UI?)
SASS 增强支持
QMUI Web 包含70个 SASS mixin/function/extend,涉及布局、外观、动画、设备适配、数值计算以及 SASS 原生能力增强等多个方面,可以大幅提升开发效率。
完善的内置工作流
QMUI Web 内置的工作流拥有从初始化项目到变更文件的各种自动化处理,包含了模板引擎,雪碧图处理,图片集中管理与自动压缩,静态资源合并、压缩与变更以及冗余文件清理等功能。
扩展组件
QMUI Web 除了内置的公共组件外,还通过扩展的方式提供了常用的扩展组件,如等高左右双栏,文件上传按钮,树状选择菜单。
如下图:
urvejs
Github: https://github.com/AlloyTeam/curvejs
是腾讯AlloyTeam打造的一款魔幻线条框架,让线条成为一名优秀的舞者,让线条们成为优秀的舞团,HTML5 Canvas就是舞台。其原理就是使用 Perlin-Noise + Particle System + Bézier Curve + Color Transition 制作而成。使用curvejs实现类似变幻线功能只需要不到10行代码。
如下图:
AlloyLever
Github: https://github.com/AlloyTeam/AlloyLever
AlloyLever 是腾讯 AlloyTeam 团队开源的一款 Web 开发调试工具。
AlloyLever的功能:
- 点击 alloylever 按钮之间切换显示或隐藏工具面板;
- Console会输出所有用户打印的日志如 console.[log/error/info/debug/debug] ;
- Console会输出所有的错误信息(脚本错误和网络请求错误) ;
- XHR 面板会输出所有(XMLHttpRequest)AJAX 请求和服务器端返回的数据;
- Resouces 面板会输出所有的 Cookie 信息和 LocalStorage ;
- TimeLime 面板会输出页面相关的生命周期里的时间段耗时情况
如下图:
TEditor
Github: https://github.com/Tencent/tmagic-editor
腾讯tmagic-editor是一个所见即所得的页面可视化编辑器,基于tmagic-editor可以快速搭建可视化页面生产平台,让非技术人员可以通过拖拽和配置,自助生成H5页面、PC页面、TV页面,大大降低页面生产成本,实现零代码/低代码生成页面。
以下是腾讯视频会员业务基于tmagic-editor搭建的可视化页面搭建平台示意图。tmagic-editor已经用于腾讯视频会员、爱玩游戏、云视听极光、腾讯会议等十几个腾讯业务,每月生产和发布数百个页面。
使用tmagic-editor的业务需要做什么
开发业务组件
tmagic-editor并不提供业务组件,业务需要根据自己的业务场景,开发相应的业务组件。比如抽奖组件、视频播放组件等。tmagic-editor的通用性设计,使得业务方可以使用不同的前端框架去开发组件。tmagic-editor官方已经提供了vue2/vue3、react的runtime,意味着业务可以直接使用这些框架开发组件,如果业务想用其它框架开发组件,则需要开发相应的runtime。
开发业务插件(可选)
插件的功能是作为页面逻辑行为的一种补充方式。一般不显式的在模拟器中被渲染出具体内容(除非插件中会生成组件并插入页面),通常我们会用插件实现类似登录,页面环境判断,请求拦截器等功能。跟组件一样,可以用不同前端框架实现。
部署可视化搭建服务
tmagic-editor提供的是开源代码,并不是一个saas服务,因此业务需要自己部署可视化搭建平台的服务。
构建和发布页面
业务需要管理自己的组件库,在发布环节基于拿到的页面js Schema描述文件,基于runtime进行打包构建,并把打包构建的产物部署到自己的服务器/CDN。
其它定制需求
如果对编辑器有一些扩展需求,编辑器已经预留了相应的扩展能力,业务可以开发相应扩展功能。tmagic-editor提供了vue2/vue3、react的runtime,业务可以修改runtime,或者开发其它前端框架的runtime。
如下图:
相关推荐
- 野路子科技!2步教你把手机改造成一个FTP服务器,支持PC互传
-
哈喽,大家好,我是野路子科技,今天来给大家带来一个教程,希望大家喜欢。正如标题所言,就是教大家如何把售价改造成FTP服务器,而这个时候估计有朋友会问了,把手机改造成FTP服务器有什么用呢?现在有Q...
- 不得不看:别样于Server-U的群晖文件存储服务器的搭建与使用
-
我先前的作品中,有着关于Server-U的ftp文件存储服务器的搭建与访问的头条文章和西瓜视频,而且我们通过各种方式也给各位粉丝介绍了如何突破局域网实现真正意义上的公网访问机制技术。关于Server-...
- Qt三种方式实现FTP上传功能_qt引入qftp库
-
FTP协议FTP的中文名称是“文件传输协议”,是FileTransferProtocol三个英文单词的缩写。FTP协议是TCP/IP协议组中的协议之一,其传输效率非常高,在网络上传输大的文件时,经...
- Filezilla文件服务器搭建及客户端的使用
-
FileZilla是一个免费开源的FTP软件,分为客户端版本和服务器版本,具备所有的FTP软件功能。可控性、有条理的界面和管理多站点的简化方式使得Filezilla客户端版成为一个方便高效的FTP客户...
- 美能达柯美/震旦复印机FTP扫描怎么设置?
-
好多网友不知道怎么安装美能达/震旦复印机扫描,用得最多是SMB和FTP扫描,相对于SMB来说,FTP扫描安装步骤更为便捷,不容易出问题,不需要设置文件夹共享,所以小编推荐FTP来扫描以美能达机器为例详...
- CCD(简易FTP服务器软件)_简单ftp服务器软件
-
CCD简易FTP服务器软件是一款很方便的FPT搭建工具,可以将我们的电脑快速变成一个FPT服务器。使用方法非常简单,只要运行软件就会自动生效,下载银行有该资源。该工具是不提供操作界面的,其他用户可以输...
- Ubuntu系统搭建FTP服务器教程_ubuntu架设服务器
-
在Ubuntu系统上搭建FTP服务器是文件传输的一个非常实用方法,适合需要进行大量文件交换的场景。以下是一步步指导,帮助您在Ubuntu上成功搭建FTP服务器。1.安装vsftpd软件...
- 理光FTP扫描设置教程_理光ftp扫描设置方法
-
此教程主要用来解决WIN10系统下不能使用SMB文件夹扫描的问题,由于旧的SMB协议存在安全漏洞,所以微软在新的系统,WIN8/WIN10/SERVER201220162018里使用了新的SMB传...
- 纯小白如何利用wireshark学习网络技术
-
写在前面工欲善其事必先利其器!熟悉掌握一种神器对以后的工作必然是有帮助的,下面我将从简单的描述Wireshark的使用和自己思考去写,若有错误或不足还请批评指正。...
- 京东买13盘位32GB内存NAS:NAS系统安装设置教程
-
本内容来源于@什么值得买APP,观点仅代表作者本人|作者:yasden你没有看错,我在京东自营商城购买硬件,组装了一台13盘位,32GB内存的NAS,硬盘有13个盘位!CPU是AMD的5500!本文...
- python教程之FTP相关操作_python ftps
-
ftplib类库常用相关操作importftplibftp=ftplib.FTP()ftp.set_debuglevel(2)#打开调试级别2,显示详细信息ftp.connect(“I...
- xftp怎么用,xftp怎么用,具体使用方法
-
Xftp是一款界面化的ftp传输工具,用起来方便简单,这里为大家分享下Xftp怎么使用?希望能帮到有需要的朋友。IIS7服务器管理工具可以批量管理、定时上传下载、同步操作、数据备份、到期提醒、自动更新...
- 树莓派文件上传和下载,详细步骤设置FTP服务器
-
在本指南中,详细记录了如何在树莓Pi上设置FTP。设置FTP可以在网络上轻松地将文件传输到Pi上。FTP是文件传输协议的缩写,只是一种通过网络在两个设备之间传输文件的方法。还有一种额外的方法,你可以用...
- win10电脑操作系统,怎么设置FTP?windows10系统设置FTP操作方法
-
打印,打印,扫描的日常操作是每一个办公工作人员的必需专业技能,要应用FTP作用扫描文件到电脑上,最先要必须一台可以接受文件的FTP服务器。许多软件都需要收费标准进行,但人们还可以应用Windows的系...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- mybatis plus (70)
- scheduledtask (71)
- css滚动条 (60)
- java学生成绩管理系统 (59)
- 结构体数组 (69)
- databasemetadata (64)
- javastatic (68)
- jsp实用教程 (53)
- fontawesome (57)
- widget开发 (57)
- vb net教程 (62)
- hibernate 教程 (63)
- case语句 (57)
- svn连接 (74)
- directoryindex (69)
- session timeout (58)
- textbox换行 (67)
- extension_dir (64)
- linearlayout (58)
- vba高级教程 (75)
- iframe用法 (58)
- sqlparameter (59)
- trim函数 (59)
- flex布局 (63)
- contextloaderlistener (56)