字节跳动热门的前端开源项目

 字节跳动开源官网

Arco Dsign

Arco Design 是一套设计系统,主要服务于字节跳动旗下中后台产品的体验设计和技术实现。它的目标在于帮助设计师与开发者解放双手、提升工作效率,并高质量地打造符合业务规范的中后台应用。它拥有系统的设计规范和资源,提供了覆盖 React、Vue、Mobile 的原子组件。目前,Arco Design 拥有 60 多个精心制作的组件,支持开箱即用。

图片

除了风格配置平台和物料平台的定制化工具外,Arco Design 还提供了包括图标平台、品牌库、Arco Pro 最佳实践的资源平台。

图片

Arco Design Pro

Arco Design Pro 是基于 Arco Design React 组件库的开箱即用的中后台前端解决方,它的特性如下:

  • TypeScript - 代码完全使用 TypeScript 书写

  • Arco Design - 由 ArcoDesign React 组件库强力驱动

  • Templates - 16+ 页面模版,覆盖表格、列表、表单、工作台、可视化等场景。

  • Themes - 基于「风格配置平台」丰富的主题市场,让你的项目千变万化。

  • Dark Theme - 一键丝滑切换暗黑风格

  • Mock - 内置 API 模拟方案

  • Flexible - 灵活的多架构方案,支持 next.js / vite / cra 等开发框架

  • I18n - 内置国际化多语言解决方案

  • Config - 灵活配置页面配色、布局等

图片

本质上,Arco Design Pro 是一套项目模版,市面上常见的中后台项目模版一般都有固定的选型和架构,这样用户如果想自己修改架构,成本会比较大。所以 Arco Pro v2 版本设计了一套多架构方案,能够在最大化的代码重用的基础上,输出多种架构的 pro 模版。

图片

Semi Design

Semi Design 是由抖音前端团队,MED 产品设计团队设计、开发并维护的设计系统。它作为全面、易用、优质的现代应用 UI 解决方案,从字节跳动各业务线的复杂场景提炼而来,支撑近千计平台产品,服务内外部 10 万+ 用户。

图片

Semi Design 采用了一套跨前端框架技术方案,F/A 分层设计,将每个组件的 JavaScript 拆分为两部分:Foundation 和 Adapter,这使得我们可以通过仅重新实现适配器来跨框架重用 Foundation 代码,例如 React、Vue、Angular、Svelte 或者 WebComponent,快速打造不同平台上的通用组件库。

图片

IconPark

IconPark 图标库是字节跳动开源的一个通过技术驱动矢量图标样式的开源图标库,可以实现根据单一SVG源文件变换出多种主题, 具备丰富的分类、更轻量的代码和更灵活的使用场景;致力于构建高质量、统一化、可定义的图标资源,让大多数人都能够选择适合自己的风格图标。

图片

xgplayer

xgplayer(西瓜播放器)是一款带解析器、能节省流量的HTML5视频播放器。它基于“一切皆组件化”的原则,设计了一个独立、可拆卸的 UI 组件。更重要的是,它不仅在 UI 层面灵活,而且在功能上也大胆创新:它摆脱了视频加载、缓冲和对视频格式的依赖。特别是对于 mp4,它可以实现阶段性加载,这对于不支持流媒体的 mp4 来说意义重大。这意味着无缝切换,清晰度控制,以及视频保存。此外,它还集成了对 FLV、HLS 和 dash 的按需和实时支持。

图片

bytemd

ByteMD 是一个使用 Svelte 构建的 Markdown 编辑器组件。它还可以用于其他库/框架,例如 React、Vue 和 Angular。其具有以下特性:

  • 轻量级且与框架无关:ByteMD 是使用 Svelte 构建的。它编译为普通 JS DOM 操作,无需导入任何 UI 框架运行时包,这使得它轻量级,并且可以轻松适应其他库/框架。

  • 易于扩展:ByteMD 有一个插件系统来扩展基本的 Markdown 语法,这使得可以轻松添加附加功能,例如代码语法突出显示、数学方程和Mermaid流程图。如果这些插件不能满足您的需求,您也可以编写自己的插件。

  • 默认安全:ByteMD 已正确处理和等跨站脚本 (XSS)攻击。无需引入额外的 DOM 清理步骤。

  • SSR 兼容:ByteMD 可以在服务端渲染(SSR)环境中使用,无需额外配置。SSR 在某些情况下被广泛使用,因为它具有更好的 SEO 和在慢速网络连接中快速获取内容的时间。

图片

VChart

VChart 是 VisActor 可视化体系中的图表组件库,基于可视化语法库 VGrammar 进行图表逻辑封装,基于可视化渲染引擎 VRender 进行组件封装。核心能力如下:

  • 一码多端:自动适配桌面、H5、多个小程序环境

  • 面向叙事:综合应用标注、动画、流程控制、叙事模板等一系列增强功能进行叙事可视化创作。

  • 场景沉淀:面向最终用户沉淀可视化能力,解放开发者生产力

图片

VTable

VTable 是 VisActor 可视化体系中的表格组件库,基于可视化渲染引擎 VRender 进行封装。核心能力如下:

  • 性能极致:支持百万级数据快速运算与渲染

  • 多维分析:多维数据自动分析与呈现

  • 表现力强:提供灵活强大的图形能力,无缝融合VChart

图片

Rspack

Rspack 是由字节跳动 Web Infra 团队孵化的基于 Rust 语言开发的 Web 构建工具。它拥有高性能、兼容 Webpack 生态、定制性强等多种优点,旨在打造高性能的前端工具链。

图片

Rspack 的特点如下:

  • 启动速度极快:基于 Rust,项目启动速度极快,带给你极致的开发体验。

  • 闪电般的 HMR:内置增量编译机制,HMR 速度极快,完全胜任大型项目的开发。

  • 兼容 webpack:针对 webpack 的架构和生态进行兼容,无需从头搭建生态。

  • 内置常见构建能力:对 Typescript、JSX、CSS、CSS Modules、Sass 等提供开箱即用的支持。

  • 默认生产优化:默认内置多种优化策略,如 Tree Shaking、代码压缩等等。

  • 框架无关:不和任何前端框架绑定,保证足够的灵活性。

图片

Rsbuild

Rsbuild 是基于 Rspack 的 Web 构建工具,是一个增强版的 Rspack CLI,更易用、更开箱即用。作为 Rspack 团队对 Web 构建最佳实践的探索,Rsbuild 提供从 Webpack 到 Rspack 的顺畅迁移方案,大幅减少配置需求,提升构建速度达 10 倍。

图片

Rsbuild 具备以下特性:

  • 易于配置:Rsbuild 的目标之一,是为 Rspack 用户提供开箱即用的构建能力,使开发者能够在零配置的情况下开发 web 项目。同时,Rsbuild 提供一套语义化的构建配置,以降低 Rspack 配置的学习成本。

  • 性能优先:Rsbuild 集成了社区中基于 Rust 的高性能工具,包括 Rspack 和 SWC,以提供一流的构建速度和开发体验。与基于 Webpack 的 Create React App 和 Vue CLI 等工具相比,Rsbuild 提供了 5 ~ 10 倍的构建性能,以及更轻量的依赖体积。

  • 插件生态:Rsbuild 内置一个轻量级的插件系统,提供一系列高质量的官方插件。此外,Rsbuild 兼容大部分的 webpack 插件和所有的 Rspack 插件,这意味着你可以在 Rsbuild 中使用社区或公司内沉淀的现有插件,而不需要重写相关代码。

  • 产物稳定:Rsbuild 设计时充分考虑了构建产物的稳定性,它的开发环境产物和生产构建产物具备较高的一致性,并自动完成语法降级和 polyfill 注入。Rsbuild 也提供插件来进行类型检查和产物语法检查,以避免线上代码的质量问题和兼容性问题。

  • 框架无关:Rsbuild 不与前端 UI 框架耦合,并通过插件来支持 React、Vue 3、Vue 2、Svelte、Solid、Lit 等框架,未来也计划支持社区中更多的 UI 框架。

Rsbuild 的构建性能与原生 Rspack 处于同一水平。由于 Rsbuild 内置了更多开箱即用的功能,因此性能数据会略微低于 Rspack。

图片

Rspress

Rspress 是基于 Rspack 的静态站点生成器,依托React框架进行高效渲染。内置便捷的文档主题,助力迅速搭建专业文档站点。同时,支持个性化主题定制,满足多样化的静态站需求,如博客站、产品主页等。

图片

Rspress 的特性如下:

  • 极高的编译性能:核心编译模块基于 Rust 前端工具链完成,带来更加极致的开发体验。

  • 支持 MDX 编写内容:MDX 是一种强大的内容编写方式,你可以在 Markdown 中使用 React 组件。

  • 内置全文搜索:构建时自动为你生成全文搜索索引,提供开箱即用的全文搜索能力。

  • 更简单的 I18n 方案:通过内置的 I18n 方案,可以轻松的为文档或者组件提供多语言支持。

  • 静态站点生成:生产环境下,会自动构建为静态 HTML 文件,你可以轻松的部署到任何地方。

  • 提供多种自定义能力:通过其扩展机制,你可以轻松的扩展主题 UI 和构

以 Rspress 官网文档的内容为例,Rspress、Docusaurus 和 Nextra 三者的性能对比情况如下:

图片

Rsdoctor

Rsdoctor 是一个全面诊断和分析 Webpack 和 Rspack 构建过程与产物的工具,提供编译耗时细节和行为展示,以及防止代码劣化的 Bundle Diff 功能。

图片

Rsdoctor 的特性如下:

  • 编译可视化:Rsdoctor 将编译行为及耗时进行可视化展示,方便开发同学查看构建问题。

  • 多种分析能力:支持构建产物、构建时分析能力:

    • 构建产物支持资源列表及模块依赖等。

    • 构建时分析支持 Loader、Plugin、Resolver 构建过程分析。

    • 支持 Rspack 的 builtin:swc-loader 分析。

    • 构建规则支持重复包检测及 ES Version Check 检查等。

  • 支持自定义规则:除了内置构建扫描规则外,还支持用户根据 Rsdoctor 的构建数据添加自定义构建扫描规则。

  • 框架无关:支持所有基于 Webpack 或 Rspack 构建的项目。

图片

Oxlint

Oxlint 是 OXC 工具集的其中一个工具,用于捕获错误或无用的代码,作用和 ESLint 类似。现阶段,oxlint 无意完全取代 ESLint;当 ESLint 的缓慢成为工作流程中的瓶颈时,它可以作为增强功能。

OXC 是字节跳动出品的一个用 Rust 编写的 JavaScript 高性能工具集合,该项目的重点在于构建 JavaScript 的基本编译器工具:解析器、linter、格式化程序、转译器、压缩器解析器。此外,OXC 还为 Rspack、Rolldown 和 Ezno 等新兴 JavaScript 工具提供支持。

图片

Oxlint 的特新如下:

  • 比 ESLint 快 50 - 100 倍,并随 CPU 核心数量不断扩展。

  • 超过 200 条规则,且正在不断增加,来自 eslint、typescript、eslint-plugin-react、eslint-plugin-jest、eslint-plugin-unicorn 和 eslint-plugin-jsx-a11y。

  • 支持.eslintignore。

  • 支持ESLint 注释禁用。

图片

Mordern.js

Modern.js 是字节跳动 Web 工程体系的开源版本,它提供多个解决方案,来帮助开发者解决不同研发场景下的问题。目前 Modern.js 包含两个解决方案,分别面向 Web 应用开发场景 和 npm 包开发场景:

  • Modern.js Framework:基于 React 的渐进式 Web 开发框架

  • Modern.js Module:易用、高性能的 npm 包开发方案

Modern.js 框架是一个基于 React 的渐进式 Web 开发框架。在字节跳动内部,将 Modern.js 封装为上层框架,并支撑了数千个 Web 应用的研发。Modern.js 能为开发者提供极致的开发体验,让应用拥有更好的用户体验。

在开发 React 应用过程中,开发者通常需要去为某些功能去设计实现方案,或是使用其他的库、框架来解决这些问题。Modern.js 支持 React 应用所需要的所有配置和工具,并内置额外的功能和优化。开发者可以使用 React 构建应用的 UI,然后逐步采用 Modern.js 的功能来解决常见的应用需求,如路由、数据获取、状态管理等。

图片

Modern.js 框架主要包含以下特性:

  • Rust 构建:提供双构建工具支持,轻松切换到 Rspack 构建工具,编译飞快。

  • 渐进式:使用最精简的模板创建项目,通过生成器逐步开启插件功能,定制解决方案。

  • 一体化:开发与生产环境 Web Server 唯一,CSR 和 SSR 同构开发,函数即接口的 API 服务调用。

  • 开箱即用:默认 TS 支持,内置构建、ESLint、调试工具,全功能可测试。

  • 周边生态:自研状态管理、微前端、模块打包、Monorepo 方案等周边需求。

  • 多种路由模式:包含自控路由、基于文件约定的路由(嵌套路由)等。

Garfish

Garfish 是一套微前端解决方案,主要用于解决现代 web 应用在前端生态繁荣和 web 应用日益复杂化两大背景下带来的跨团队协作、技术体系多样化、web 应用日益复杂化等问题:从架构层面出发将多个独立交付的前端应用组成整体,这些前端应用能够「独立开发」、「独立测试」、「独立部署」,但是最终在用户看来仍然是内聚的单个产品

图片

Garfish 的特性如下:

  • 丰富高效的产品特征

    • Garfish 微前端子应用支持任意多种框架、技术体系接入

    • Garfish 微前端子应用支持「独立开发」、「独立测试」、「独立部署」

    • 强大的预加载能力,自动记录用户应用加载习惯增加加载权重,应用切换时间极大缩短

    • 支持依赖共享,极大程度的降低整体的包体积,减少依赖的重复加载

    • 支持数据收集,有效的感知到应用在运行期间的状态

    • 支持多实例能力,可在页面中同时运行多个子应用提升了业务的拆分力度

    • 提供了高效可用的调试工具,协助用户在微前端模式下带来的与传统研发模式不同带来的开发体验问题

  • 高扩展性的核心模块

    • 通过 Loader 核心模块支持 HTML entry、JS entry 的支持,接入微前端应用简单易用

    • Router 模块提供了路由驱动、主子路由隔离,用户仅需要配置路由表应用即可完成自主的渲染和销毁,用户无需关心内部逻辑

    • Sandbox 模块为应用的 Runtime 提供运行时隔离能力,能有效隔离 JS、Style 对应用的副作用影响

    • Store 提供了一套简单的通信数据交换机制

  • 高度可扩展的插件系统

    • 提供业务插件满足业务方的各种定制需求

图片

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/723013.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

运维知识点-hibernate引擎-HQL

HQL有两个主要含义,分别是: HQL(Hibernate Query Language)是Hibernate查询语言的缩写,它是一种面向对象的查询语言,类似于SQL,但不是去对表和列进行操作,而是面向对象和它们的属性…

ArmSoM Rockchip系列产品 通用教程 之 UART 使用

1. UART 简介​ Rockchip UART (Universal Asynchronous Receiver/Transmitter) 基于16550A串口标准,完整模块支持以下功能: 支持5、6、7、8 bits数据位。支持1、1.5、2 bits停止位。支持奇校验和偶校验,不支持mark校验和space校验。支持接…

Yolov8有效涨点,添加多种注意力机制,修改损失函数提高目标检测准确率

目录 简介 CBAM注意力机制原理及代码实现 原理 代码实现 GAM注意力机制 原理 代码实现 修改损失函数 YAML文件 完整代码 🚀🚀🚀订阅专栏,更新及时查看不迷路🚀🚀🚀 http://t.csdnimg.c…

Mol2文件处理-拆分、合并、提取名称、计数与格式转换

欢迎浏览我的CSND博客! Blockbuater_drug …点击进入 文章目录 前言一、Mol2文件合并二、Mol2文件拆分为含有单个分子的文件三、Mol2文件分子名称修改与提取3.1 分子名称修改去除空格3.2 文件名称提取 四、Mol2文件包含分子计数4.1 Mol2文件中分子计数4.2 分子计数传…

Python——与Matlab对应的Python版本

参考资料: Python——与Matlab对应的Python版本

Rust 开发的高性能 Python 包管理工具,可替换 pip、pip-tools 和 virtualenv

最近,我在 Python 潮流周刊 中分享了一个超级火爆的项目,这还不到一个月,它在 Github 上已经拿下了 8K star 的亮眼成绩,可见其受欢迎程度极高!国内还未见有更多消息,我趁着周末把一篇官方博客翻译出来了&a…

请说明Vue中的解耦能力

Vue中的解耦能力是指在Vue框架中,我们能够有效地将代码分离成独立的组件或模块,使得这些组件之间的依赖关系减少,实现高内聚、低耦合的设计目标。利用Vue中的组件化开发,可以让不同的模块之间更容易地通信和协作,提高代…

【小白学机器学习7】相关系数R,决定系数R2和SST=SSR+SSE, 离差,偏差,方差,标准差,编译系数,标志误。

目录 1 各种数据指标,分类整理 1.0 关于数据/值有3种 1.1 第1类:描述一堆数据特征的指标:集中度,离散度,形状特征 1.2 第2类:判断预测y值和观测值差距的指标 1.3 第3类:描述误差的各种指标…

无线地勘答题模板

(三)无线网络配置 CII集团公司拟投入13万元(网络设备采购部分),项目要求重点覆盖楼层、走廊和办公室。平面布局如图1所示。 图1 平面布局图 1.绘制AP点位图(包括:AP型号、编号、信道等信息,其中信道采用2.4G的1、6、11三个信道进行规划)。 2.使用无线地勘软件,输出…

html标签之表格标签,程序员必看

突破困境: 1. 提升学历 前端找工作,学历重要吗? 重要。谁要是告诉你不重要那一定是在骗你。现实情况是大专吃紧,本科够用,硕士占优,大专以下找到工作靠运气和 戳这里领取完整开源项目:【一线大…

【力扣经典面试题】14. 最长公共前缀

目录 一、题目描述 二、解题思路 三、解题步骤 四、代码实现(C版详细注释) 五、总结 欢迎点赞关注哦!创作不易,你的支持是我的不竭动力,更多精彩等你哦。 一、题目描述 编写一个函数来查找字符串数组中的最长公共前缀。…

微软研究深度报告:Sora文转视频AI模型全景剖析及未来展望

论文由微软研究团队撰写,这篇论文深入探讨了Sora的发展背景、核心技术、新兴应用场景、现有的局限性以及未来的发展机会,基于公开资料和团队自行进行的逆向工程分析。文中详尽且逻辑清晰,建议细读全文以获得深入了解。 原文:Sora…

第四节 JDBC简单示例代码

本文章教程中将演示如何创建一个简单的JDBC应用程序的示例。 这将显示如何打开数据库连接,执行SQL查询并显示结果。 这个示例代码中涉及所有步骤,一些步骤将在本教程的后续章节中进行说明。 创建JDBC应用程序 构建JDBC应用程序涉及以下六个步骤 - 导…

Java并发编程-进程和线程

一、进程和线程 1. 进程 什么是进程? 简单来说,进程就是程序的一次启动和执行。进程是操作系统中的一个概念,它代表正在运行的程序的实例。每个进程都有自己的内存空间、代码和数据,以及其他操作系统资源,如文件和设备…

Git分布式管理-头歌实验远程版本库

Git的一大特点就是,能为不同系统下的开发者提供了一个协作开发的平台。而团队如果要基于Git进行协同开发,就必须依赖远程版本库。远程版本库允许,我们将本地版本库保存在远端服务器,而且,不同的开发者也是基于远程版本…

力扣hot100:560.和为K的子数组(前缀和+哈希表)

分析: 这个题目乍一看,数据大小用暴力解法大概率会超时,可能想用双指针,但是问题出现在 可能存在负数,也就是说即使是找到了一个答案,后面也可能存在负数和正数抵消,又是答案,因此不…

SpringBoot集成Logback

logback logback-core:其它两个模块的基础模块。logback-classic:它是log4j的一个改良版本,同时它完整实现了slf4j API使你可以很方便地更换成其它日志系统如log4j或JDK14 Logging。logback-access:访问模块与Servlet容器集成提供…

08-prometheus监控的告警通知-alertmanager组件工具

一、概述 prometheus通过规则文件对比抓取到的数据,来判断是否触发告警,我们通过配置告警的工具altermanager进行告警通知; 规则文件,写的就是,当我们获取到的PromeQL的值到达一个设置的规则后,触发告警&am…

刷题笔记day27-回溯算法3

39. 组合总和 var path []int var tmp []int var result [][]int// 还是需要去重复,题目中要求的是至少一个数字备选的数量不同。 // 所以需要剪枝操作,右边的要比左边的> func combinationSum(candidates []int, target int) [][]int {// 组合问题pa…

白皮书发布|超融合运行 K8s 的场景、功能与优势

目前,不少企业都使用虚拟化/超融合运行 Kubernetes 和容器化应用。一些用户可能会有疑惑:既然 Kubernetes 可以部署在裸金属上,使用虚拟化不是“多此一举”吗? 在电子书《IT 基础架构团队的 Kubernetes 管理:从入门到…