前端工程体系

我常常执着于部分(比如昏天暗地地解读一个源码),不能跳出来看看整体。这篇文章旨在于整理我所理解的前端工程体系,方便逐步演进顶层观念并指导后续发展。因为见识的有限和理解的不足,这篇文章本难免缺陷和差缪,还望有识予以理解。

我所理解的前端工程体系大致如上图。左半部分以 antd + umi、fusion + 飞冰为参照加以说明,组件库用于提供基础的通用组件。模板工程通常提供了应用层面的最佳实践,因此不止于使用在组件库之内的基础通用组件、在组件库之外的图表和编辑器组件等,还包含状态管理、路由管理、服务调用等内容。当某些组件还未包含在组件库中,但在应用中经常使用,那么这些组件也可以通过模板工程下沉到组件库中。由组件库往上,可以生长出业务组件、区块、前端工程模板,这些都可以被物料中心所吸纳,以便使用特定的域作为标识,在可视化搭建等其他应用、前端 IDE 工具或简单的本地开发环境中复用。这部分内容不限于 web 场景,还包含小程序等场景。事实上,fusion 的物料中心包含 rax 组件,支付宝小程序也提供了基础组件库和 IDE 开发环境。

右半部分在于使用 node 服务封装后端接口提供定制化的数据,包含但不限于元数据(如菜单栏)、查询数据库的动态数据等。node 服务不止可以提供数据接口,还包含构建发布平台(构建工具通过命令行工具与其打通)、mock 服务(在应用本地运行时动态获取)、国际化服务(在应用启动阶段动态拉取)等。

组件库

现行较为火热的组件库有 ant designfusionmaterial uielement ui 等。以下是 ant design 的大体结构:

  • bisheng: 解析 markdown 文件并生成静态网站。主流程上,它借助 nunjucks、webpack、ssr 机制启动本地服务器、生成打包文件,以及通过 gh-pages 将静态页面上传到 github 服务器上。实现可参考 聊聊 antd 网站是怎么制作的
  • antd-tools、scripts: 提供基本的命令行工具。antd-tools 基于 gulp 实现,它集成了 compile(基于不同组件的入口文件编译 less、ts、svg 等)、dist(使用 webpack 打包整个组件库)、deps-lint(检查模块是否被依赖)、pub(编译、打包并发布)、guard、sort-api-table、api-collection、clean 等操作。

ant design 的定制主题功能基于 less 的 modifyVars,即将可定制的样式定义为 less 变量,随后就可以通过 less-loader 引用外部 less 变量文件实现定制。ant design 中可配置的样式见 这里。无障碍功能基于节点的 aria-、role- 属性实现,可参考 aria初探。国际化功能基于 react 的 context 机制实现,同时会设置 moment 的语言。按需加载功能借助于 babel-plugin-import 插件;其原理为在 babel 编译期间转换 import 语句,并加载必要的样式(默认加载组件文件夹下的 css/index.js 文件)。

以下是 react-components 组件图谱,动效、对齐、伸缩作为基础的组件或工具函数,其上再延伸出表单、数据展示、导航、回馈组件等。

ant-design 的组件基本基于 ConfigProvider 构建。ConfigProvider 通过 react 的 context 机制提供国际化、弹层根节点获取函数、空态渲染函数等。

参考

如果我是阿里的前端架构师,我会这么搭建前端架构体系
蚂蚁前端研发最佳实践