背景
全国海关信息中心核心系统，由几十个子应用聚合而成，分别由不同项目团队，使用不同技术栈，先后经历 20 年开发的。如今，面对无数个通关企业，这几十个子应用，需要以一个单页应用门户展现。所以，如何独立开发、独立测试、独立发布，统一聚合，就成为了很大的问题。
基于海关信息系统复杂，应用海纳百川，技术栈不一，对外需要提供统一门户应用的特点，本文描述了多个团队，如何使用不同 JavaScript 技术框架，协同构建一个大型统一的聚合应用门户的方法。
前端开发模式演变
首先我们来看下前端应用开发模式的演变历程
- 静态黄页：单纯使用 html 技术，展示静态图文，访客只能查看，不能进行交互，开发较简单，几乎没有考虑性能问题
- 服务器动态网页：当访客不满足于静态图文信息的获取之后，开始使用服务器语言，比如 JSP、ASP、PHP，提供动态数据展示给访客，开发和交互都比较简单，也几乎没有考虑性能问题
- 后端为主的 MVC ：当动态数据庞大和复杂后，开始使用后端为主的 MVC 模式做一些同步展现业务的 Web 应用程序，但是遇到同步异步结合的应用，开发比较困难，性能也一般
- 前后端分离：为了解决同步异步结合和更复杂的应用，开始使用前后端分离模式，前端负责展现和交互逻辑，后端负责业务和数据接口，同一份数据接口，可以定制开发多个Web应用程序，开发分工明确，维护较简单，性能较高
- MVVM（Model-View-ViewModel）：使用数据双向绑定机制，自动捕获用户操作的 Web 应用程序，可开发交互较为复杂的应用，如果结合 Cordova 等移动开发框架，还可作为 Hybrid APP 开发，但是基于 WebView 的性能问题，导致开发出来的 APP 性能一般，和原生 APP 差距较大
- MNVVD（ Model-NativeView-Virtual DOM）：使用 Web 技术调用原生 App 控件或事件绑定来生成 APP，和原生 APP 性能一致，开发难度较大，支持热更新（不需重新下载，即可在线升级，bug 及时修复），可使用原生全部组件，后期扩展性强，不受限制
现代化前端是什么样子
再来看下，现代化前端应该是什么样子
- 技术无关：任何团队或个人，在开发新的和接入旧的模块或应用时，都可以随意选择技术栈，集成到已有门户应用，而不会造成冲突
- 自适应系统：即使应用数量无限制增加，也不会提高系统复杂程度和降低应用响应速度
- 独立开发部署：任何团队或个人，开发的模块或应用，都可以独立测试、独立发布，统一聚合
- 团队代码隔离：有一个命名规范，来建立命名空间，帮助任何团队或个人的任何变量或方法，集成到一起，也不会造成冲突，并声明所有权以供溯源
