概述 - UCF-Web 整体架构设计和介绍 - 《ucf-web 微前端框架使用手册》

一、关于UCF-Web介绍
二、UCF-Web 能力及开发模式
三、推广应用情况
- 3.1 部分应用情况说明
- 3.2 部分效果展示

一、关于UCF-Web介绍

UCF-WEB 是一个专注性能和效率的微前端框架，是企业级大前端基础设施 tinper 中提供的核心编程模型之一，通过提供云原生的前端开发方式，帮助开发者快速高效开发企业云服务的个性化产品体验，UCF-Web 与云原生编程模型的Java 解决方案 UCF-CN 配合，形成完整的云原生开发编程模型。

1.1 架构设计

UCF-Web 中将前端基础工程化能力（资源构建、开发调试等）、标准组件体系、应用状态管理和路由解决方案、前端开发规范、最佳实践案例、微前端架构设计等能力融为一体，详细架构设计参照下图：

1.2 关键特性

将前端技术收敛化（无需纠结对框架、工具的选型和配置）、标准化（提出规范，并结合应用开发形成最佳实践）
不受开源前端框架约束，并支持遗留系统迁移
支持多种微应用开发模式，打破铁桶一块的巨石应用
基于统一设计语言之上构建标准组件体系，具备一致性UI 体验
采用简化易理解的应用状态解决方案，没有复杂的样板代码

1.3 快速上手及规范解读

UCF-Web 中提供了两个基于 Node.js 封装的前端CLI工具-UCF-CLI 和 UCF-Scripts。

UCF-CLI ：用户快速初始化项目，快速创建页面模板，以及其他GUI 交互模式；
UCF-Scripts：用于实现个性化项目的前端工作流配置、前端整体资源的构建（编译、打包、压缩、合并、校验等）

初始化之后的项目规范：

.
├── LICENSE                                                # 开源协议
├── README.md                                            # 项目脚手架说明
├── docs                                                    # 开发业务说明文档目录
│   └── README.md
├── package.json                                    # npm packages 依赖包
├── ucf-apps                                            # 【目录名不可修改】微服务应用根目录，用于加载微服务
│   ├── demo-app-org                            # 组织管理示例
│   └── demo-app-staff                        # 同上不在阐述
├── ucf-common                                        # 【目录名不可修改】公共组件、样式、图片、字体等静态资源存放
│   ├── README.md                                    # 描述公共组件等说明
│   └── src
├── ucf-publish                                        # 【目录名不可修改】构建出来的静态资源
│   ├── demo-app-org                            # 组织管理示例
│   └── demo-app-staff
└── ucf.config.js                                    # ucf 核心配置文件

1.4 开源推进情况

二、UCF-Web 能力及开发模式

2.1 基础开源技术应用

ucf-web 微前端框架是工具与最佳实践融合，分两部分进行说明：

开源前端工具：

ucf-web 中的 ucf-scripts 工具默认基于 webpack 4.x 进行封装，并默认集成了以下工具集：

webpack & webpack-dev-server
webpack loader & plugin
- http-proxy-middleware
- css-loader\less-loader\babel-loader
babel v7 JavaScript编译器
postcss相关插件（autoprefix、cssnano等）
less 预处理器
ES5/6/7 语法支持

语言和开源框架：

ucf-web 中的微应用默认都在ucf-apps目录下，不同微应用开发遵循同一套技术栈：

选择基于 React.js 作为底层渲染引擎
选择基于ES6+新语法特性
异步操作统一采用 async/await 方式
选择基于mirrorx作为应用状态解决方案，在redux、react-redux、react-router的基础上进行了简化封装
选择基于tinper-bee作为基础UI组件库

2.2 体验能力

UCF-Web 中采用基于 iuap design 设计语言的前端开源组件库 tinper-bee，tinper-bee 是用友云平台大前端团队从2016 年开始开发的面向企业级应用的开源组件库。详细体验能力可以通过：bee.tinper.org 访问。

屏幕快照 2019-08-01 上午11.20.43.png

屏幕快照 2019-08-01 上午11.20.48.png

屏幕快照 2019-08-01 上午11.58.20.png

3.3 对微前端架构理念的实现

微前端概念的提出与实践

我们已经从引入微服务架构中获得了明显的好处，微服务架构可以让团队裁剪出独立部署的交付物以及可维护的服务。不幸的是，我们还看到许多团队在后端服务之上创建了前端单体——一个单一，庞大和杂乱无绪的浏览器应用。我们首选的（经过验证的）方法是将基于浏览器的代码拆分成 __微前端。在这种方法中，Web应用程序被分解为多个特性，每个特性都由不同的前后端团队拥有。这确保每个特性都独立于其他特性开发，测试和部署。这样可以使用多种技术来重新组合特性——有时候是页面，有时候是组件——最终整合成一个内聚的用户体验。
—- By 《ThoughtWorks 2017技术雷达》

从上文的节选内容可以看到，ThoughtWorks 最早提出了微前端这一概念，与微服务类似。微前端也希望将某个单体架构的巨石型(Monolithic)应用转化为多个可以独立运行、独立开发、独立部署、独立维护的服务或者应用的聚合，从而满足业务快速变化及分布式多团队并行开发的需求。

微服务与微前端在软件工程中的基本原理同样相通，都是遵循单一职责(Single Responsibility)、关注分离(Separation of Concerns)、模块化(Modularity)与分而治之(Divide & Conquer)等基本的原则。

微前端解决的核心问题：

构建一个复杂的企业应用是一个系统性的软件工程问题，我们不断通过对技术架构、应用架构、团队协作、研发管理等方向的研究和实践来使事情变得更加美好，各种是我们所有从业人员不断思考和实践的方向。