千套模板快速自助建站,重庆网站线上推广,佛山品牌策划设计,国外网站建设字节跳动开源官网
Arco Dsign
Arco Design 是一套设计系统#xff0c;主要服务于字节跳动旗下中后台产品的体验设计和技术实现。它的目标在于帮助设计师与开发者解放双手、提升工作效率#xff0c;并高质量地打造符合业务规范的中后台应用。它拥有系统的设计规范和资源主要服务于字节跳动旗下中后台产品的体验设计和技术实现。它的目标在于帮助设计师与开发者解放双手、提升工作效率并高质量地打造符合业务规范的中后台应用。它拥有系统的设计规范和资源提供了覆盖 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 提供了一套简单的通信数据交换机制 高度可扩展的插件系统 提供业务插件满足业务方的各种定制需求
