前端自研技术框架OceanJS在IT部的探索与实践—框架整体介绍

VeSync技术
245 阅读11分钟

1 背景

1.1 前端开发中的常见问题

在当前前端开发中，开发者普遍面临以下几个挑战：

  1. 技术更新迭代快，学习压力大 前端技术栈的选择多样，包括 Vue、React、Angular 等框架，Less、Sass 等 CSS 预处理器，Webpack、Vite 等构建工具，以及各种组件库（如 Ant Design、ElementUI 等）。这一系列技术不断更新迭代，给开发人员带来了较高的学习成本。
  2. 项目技术栈选择困难 由于前端技术栈的多样性，开发者在创建新项目时常常面临技术栈选择的困扰，不确定选哪个框架或工具最适合自己的需求。
  3. 项目技术栈不统一，沟通成本高 各项目间技术栈差异大，导致开发、协作、维护和升级等方面的沟通成本和技术债务累积，影响开发效率。

为了解决以上问题，开发团队迫切需要一个统一且可扩展的框架来规范技术选型，确保团队一致性，降低开发成本。

1.2 统一框架带来的好处

通过统一的前端框架，可以有效解决上述问题，并带来以下优势：

  1. 标准化流程 通过统一框架，开发者能够顺畅地进行项目的创建、开发、联调、部署和发布等流程，减少不必要的配置和错误，提升开发效率。
  2. 快速集成常见场景 框架内集成了常见的基础配置和工具，如路由管理、状态管理、UI 组件、插件等，使开发者无需重复造轮子，能够专注于业务逻辑。
  3. 服务集成，简化项目接入 框架可以直接集成后端服务的接入，如用户认证、存储服务等，不必每个项目都独立接入这些服务，减少重复工作和技术债务。

1.3 OceanJS：解决前端开发痛点的自研统一框架

OceanJS 是 Vesync IT 部自研的统一的前端可扩展框架，旨在解决前端开发中的痛点，通过提供统一的技术栈、规范化的开发流程以及服务插件化集成，确保团队开发的一致性和高效性。

通过 OceanJS，开发者可以更快速地启动项目、实现功能模块、进行代码共享，并且在开发过程中，保持团队的技术栈一致性，减少沟通成本和技术复杂度。

2 技术栈统一

在前端开发中，要实现高效和稳定的协作，首要任务是统一技术栈。OceanJS 在技术选型上，始终以项目的稳定性为核心，选择了业界广泛应用、社区活跃、bug 少且可靠性高的技术。通过这种方法，我们能够确保团队在开发过程中获得一致性，同时也能够降低学习和维护的成本。

2.1 初期技术选型：Vue2 为核心

OceanJS 项目初期，业务开发主要基于 Vue2，整体技术选型已Vue2生态为主。

2.2 随着 Vue3 的推出，OceanJS 进行技术栈升级

随着 Vue3 逐渐成熟，OceanJS 框架也进行了技术栈的升级，以利用 Vue3 的新特性，例如 Composition API、更好的性能优化、更好的TypeScript 支持等。因此，OceanJS 提供了两套独立的技术栈，以适应不同版本的 Vue 框架，确保开发过程的平稳过渡。

以下是 OceanJS 项目的技术栈概览，展示了 2.0 版本与 3.0 版本的主要技术选型：

类别OceanJS 2.0OceanJS 3.0
框架Vue 2Vue 3
JavaScriptTypeScriptTypeScript
CSSLess, PostCSS（包括 TailwindCSS）Less, PostCSS（包括 TailwindCSS）
模块打包WebpackVite
单元测试JestJest
路由Vue RouterVue Router
状态管理VuexVuex
代码风格ESLintESLint
UI 组件库Ant Design Vue 1.x，部分二次封装高级组件Ant Design Vue 3.x，部分二次封装高级组件

2.3 技术栈的演变与优势

  • Vue2 到 Vue3 的过渡 ：2.0 版本主要依赖 Vue2 与 Webpack 等技术，具有较为成熟的生态支持；3.0 版本引入了 Vue3 及 Vite，提升了性能和开发体验，支持更为现代的编程方式（如 Composition API）。
  • 模块打包工具升级 ：从 Webpack 到 Vite 的过渡，不仅提升了构建性能，同时也简化了开发配置，提升了热更新速度。
  • UI 组件库 ：OceanJS 2.0 使用 Ant Design Vue 1.x，而 3.0 版本则升级到了 Ant Design Vue 3.x，以提供更丰富的功能和更高的可定制性。

无论是前端框架、模块打包工具还是 UI 组件库，OceanJS 都在持续优化，以满足现代 Web 开发的需求，从而提高开发效率并确保项目稳定性。

3 OceanJS 总体架构图

1730966312195.png

4 主要模块

4.1 Ocean CLI

Ocean CLI 提供了三个核心命令：init 、dev、 build，帮助开发者高效地管理项目生命周期，从项目初始化、开发到构建发布，简化开发过程。

4.1.1 init 命令

init 命令用于快速生成和初始化项目结构。通过 Ocean CLI 的脚手架工具，开发者可以自动化创建标准化的项目目录和配置文件，省去手动设置的繁琐步骤。这样不仅能加速开发流程，还能确保团队中的每个项目都遵循一致的结构和最佳实践，确保开发效率和代码质量。

图片1.png

4.1.2 dev 命令

该命令用于启动开发环境，支持代码调试和热更新，帮助开发者快速进行前端开发和实时预览。通过集成热部署，开发者能够在修改代码后自动刷新页面，从而提高开发效率。

1730969221056.png

4.1.3 build 命令

build 命令基于 OceanJS 的构建服务（底层集成了 Webpack 和 Vite）进行项目构建。它将源码转化为部署产物，生成可供生产环境使用的静态文件。

build 命令支持通过 mode 参数灵活切换测试环境（testing）和正式环境（production）。构建后的产物将默认输出到 ./dist 目录中，开发者可以将该目录下的文件部署到生产服务器或进行进一步的发布操作。

1730884810290.png

通过 Ocean CLI 的 init 、dev、 build 命令，开发者能够显著提高项目新建、开发和部署的效率，减少手动操作和配置错误的风险，提升项目开发的标准化和自动化水平。

4.2 构建服务

构建服务基于webpack/vite二次封装，主要作用是简化构建配置，提升效率。曾几何时，许多前端工程师自诩为“ Webpack 配置工程师“，尽管这更多是调侃，却也反映了现代构建工具如 Webpack 和 Vite 功能强大，但配置繁琐的问题。

OceanJS 的构建服务通过对 Webpack 和 Vite 的二次封装，极大简化了常见的构建配置，助力开发者专注于业务逻辑。比如，在原生的 Webpack 配置中，如果我们想将 CSS 提取到单独的文件中，通常需要进行如下的繁琐配置：

rule.use('mini-css-loader').loader(MiniCssExtractPlugin.loader)
      webpackConfig.plugin('MiniCssExtractPlugin').use(MiniCssExtractPlugin, [
        {
          filename: `static/css/${
            this.env === 'development'
              ? '[name].css'
              : '[name].[contenthash:8].css'
          }`,
          chunkFilename: `static/css/${
            this.env === 'development' ? '[id].css' : '[id].[contenthash:8].css'
          }`,
        },
      ])

可以看出，这需要引入 MiniCssExtractPlugin 插件，并手动配置相关的文件命名规则和环境区分，配置过程相对复杂。

但是，在 OceanJS 构建服务中，我们对这一过程进行了简化。开发者只需要在配置中启用以下选项即可：

module.exports = {
  css: {
    extract: true
  }
}

通过这种方式，开发者不再需要深入研究配置和外部插件，直接启用 CSS 提取功能即可。对于开发者来说，这大大简化了构建配置，使得整个开发过程更加高效、便捷。

构建服务中还集成了其他功能 ：

  • Less 编译打包：自动处理 Less 文件编译和打包。
  • Babel 编译：支持最新 JavaScript 特性，确保代码兼容性。
  • 环境变量读取：轻松管理和配置不同环境下的变量。
  • 图片和其他文件打包处理：支持图片、字体等静态资源的优化和打包。
  • Dev-Server：提供开发服务器，支持热更新和实时预览。

此外，OceanJS 还集成了多项性能优化配置，帮助提升构建效率和应用性能：

  • Gzip 压缩：减少文件体积，提高加载速度。
  • Chunk 拆分：优化资源加载，提升页面响应速度。
  • 静态资源预加载：提前加载关键资源，提升页面加载性能。
  • 静态资源预取：将静态资源预先加载到 HTML 中，减少网络延

通过 OceanJS 的构建服务，开发者无需深入琢磨配置细节，便能实现高效、稳定的构建流程。

4.3 组件库

IT 部的业务以中后台系统为主，针对业务特点，OceanJS 基于 ant design vue 二次封装，提供相关的高级组件，提升开发效率、代码一致性和可维护性。以下是组件库中的几个核心组件的简要介绍：

4.3.1 布局组件

布局组件可以帮助开发者快速搭建中后台系统的整体布局。

搜狗截图20241108111449.png

4.3.2 查询表格组件

查询表格组件将查询表单和数据表格整合在一起，提供快速的数据查询和展示功能。开发者只需要简单配置，即可搭建起功能强大的列表页，支持排序、筛选、分页等常用操作，提升用户体验和开发效率。

1730886238962.png

4.3.3 可编辑表格组件

可编辑表格组件为表单提供了快速构建的能力，允许用户在表格中直接编辑数据。组件支持数据收集和校验，适用于需要用户输入和修改数据的场景，确保数据的一致性和准确性。

1730886268886.png

4.3.4 高级表单组件

高级表单组件允许开发者通过配置快速搭建复杂的表单，支持多种类型的输入控件、校验规则和表单布局。无论是简单的输入框，还是复杂的多级联动选择，都能轻松实现，提升开发速度和代码质量。

1730886308423.png

这些组件能够有效帮助开发者提升开发效率，减少重复代码，同时保证应用的一致性和可维护性。OceanJS不仅支持常见的业务场景，还能够通过灵活的扩展满足特定业务需求。

5 插件

5.1 插件与插件集合

插件机制是 OceanJS 的另一个亮点，是 OceanJS 实现可扩展性的核心。在上面的架构图中，许多模块都是以插件的形式存在，多个插件可以组合成一个插件集合。例如，要完成业务代码打包，通常需要多个插件协同工作，组成一个插件集合（preset）。该集合内部可能包括构建插件（如 webpack 或 vite）、临时文件生成插件、前端日志集成插件等。下图展示了插件、插件集合与业务模块之间的关系。

E8ADA41F-6D95-4CF7-B386-9EEC2E28F815.png

5.2 插件多态

插件有两种形态，以满足在不同环境下运行的需求

  1. 编译态：运行在 node 环境，在资源打包编译阶段执行，比如基于 vite 的打包插件、临时文件生成插件等。
  2. 运行态：运行在浏览器环境，比如运行在浏览器端和业务比较贴近的系统权限插件、i18n 插件等。

BFF5CDAE-F298-4326-BFDC-0285EEC876CC.png

引入插件概念后，系统实现了高度的可插拔和可扩展性。技术升级可以通过插件进行，避免了对业务代码的干扰，同时插件的复用性也使得在不同业务场景中能够灵活应用，提升了开发效率和维护性。

6 结语

OceanJS 作为一个统一且可扩展的前端框架，为开发团队提供了一整套完整的解决方案，解决了技术栈不统一、开发效率低下等前端开发痛点。通过标准化的技术栈、自动化的开发流程、简化的构建配置、丰富的组件库和插件机制，OceanJS 能够大幅提升开发效率，减少沟通成本，为团队提供高效的前端开发体验。

希望通过本文能为读者在前端架构的优化方面提供一些参考和启发。当然本文只是对OceanJS的一个简要概述，后续针对插件机制，我整理了另一篇文章《前端自研技术框架OceanJS在IT部的探索与实践—插件详解》，期待下次有机会与大家分享。

7 参考资料

  1. 蚂蚁前端研发最佳实践：github.com/sorrycc/blo…
  2. UmiJS设计思路：umijs.org/docs/introd…
  3. Webpack内置插件库参考链接：github.com/webpack/tap…
avatar
文章
阅读
粉丝