Godzilla 前端框架简介

Godzilla 是什么？

简单介绍下在公司从 0 到 1 参与实现的前端工程化整体解决方案。Godzilla，中文可发音为哥斯拉，一个高度集成的企业级 React 微前端应用框架。Godzilla 框架以低代码理念为指导，封装了众多金融资管业务属性的组件，能够帮助开发人员快速构建项目。除此之外，还可以利用 Godzilla 高效实现旧系统整合、异构技术整合，打造统一用户体验。

功能

异构系统整合

Godzilla 借助微前端架构能力支持将存量系统低成本地整合到一个新平台上来，构建统一门户，消除掉这些改造风险的同时提供很好的一体化体验。

多团队独立开发

Godzilla 支持微前端架构，可以将一个复杂系统拆分成多个子系统，每个子系统独立自治，由小团队独立开发、独立部署，充分协同。这样构建的更高维度的解耦方案，既能降低管理的成本，又能提高开发效率，加速项目迭代。

复杂业务场景

Godzilla 采用组件化、模块化的思想，并提炼了很多针对复杂场景的业务组件及很小颗粒度的功能模块，组件及功能可自由组合与拼接，帮助降低开发这些系统的复杂度。

个性化工作台

Godzilla 支持自由式的工作台，工作台的内容可按需即时自由定制，而且工作台里面的各个应用也可以支持联动，配合组件装配的能力，可以很灵活、很方便地构建多个属于自己的工作台，满足不同工作需要。

架构

展示层

基于现代化浏览器进行系统展示，提供 Electron 的整合能力，使得应用能够非常方便的满足打包生成客户端的需求。

应用层

基于微前端架构能够实现新旧项目，不同技术实现的项目独立开发及整合展示。基于 Single-Spa 封装实现，按照 UI 结构进行框架应用、子应用的拆分。

• 框架应用：负责子应用的注册，公共内容展示（Common Header、Common Menu、Common Footer 等）
• 子应用：负责自身业务相关的内容展示子应用支持 React 框架的直接潜入，及其它框架通过 iframe 接入（稳定为主）。

实现层

• 基于脚手架（create-godzilla-app）提供快速构建基于最佳实践的模版项目（godzilla-app）的能力，底层依赖并统一构建库（quantex-scripts）进行项目打包与发布。
• 约定大于规范又与规范相辅相成，约定目录及路由等规则，强制执行编码、提交等项目规范，最终实现自动化配置。
• 封装了大量适用于金融资管行业的组件，比如：高性能高定制的表格组件、简单易用的表单组件等等。并对业务拆分成最小的颗粒度进行模块化开发，使用不同用户角色可以自由组合成个性化的金融工作台。
• 提取了公共的工具库，避免重复造轮子，按需引入；并实现相关功能的插件式添加及移除功能，如：主题切换功能等。众多的小模块，小功能，小系统实现最终以微前端的理念整合成一个大管理系统（平台）。
• 不断的完善用户行为追踪及分析、性能监控及优化和错误收集及预警等功能。

依赖层

• 基于 React 框架及周边社区
• 基于 Webpack 进行定制和封装
• 积极拥抱 TypeScript
• 勇敢实践微前端
• 选用 Mobx 解构状态、独立自治，实现多 Tab 页面架构
• 按需加载、打包
• Electron 打包生成客户端
• ...

BFF 层

提供可选的 BFF 中间层，实现统一认证（鉴权）、接口转发/加工、Mock 等功能。满足不同项目的不同需求：可以选择通过 BFF 连接微服务，也可以直接从 UI 工程连接后端 API Getaway。

总结

从过去开发及服务单一项目，到现在提取组件库、构建库、工具库，现实通用模版及脚手架，再展望未来的场景化、可视化、智能化。前端在不断扩展，不断的提高要求，不断为业务赋能。也要求前端开发人员持续的探索和学习。