如果你的应用，由几十个子应用聚合而成，分别由不同项目团队，使用不同技术栈开发的。而现在，这几十个子应用，需要以一个单页应用门户展现。那么如何独立开发、独立测试、独立发布，统一聚合，就成为了很大的问题。

基于系统的复杂性，应用海纳百川，技术栈的不一，对外需要提供统一门户应用的特点，本文描述了多个团队，如何使用不同 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及时修复），可使用原生全部组件，后期扩展性强，不受限制

现代化前端是什么样子

再来看下，现代化前端应该是什么样子

• 技术无关：任何团队或个人，在开发新的和接入旧的模块或应用时，都可以随意选择技术栈，集成到已有门户应用，而不会造成冲突
• 自适应系统：即使应用数量无限制增加，也不会提高系统复杂程度和降低应用响应速度
• 独立开发部署：任何团队或个人，开发的模块或应用，都可以独立测试、独立发布，统一聚合
• 团队代码隔离：有一个命名规范，来建立命名空间，帮助任何团队或个人的任何变量或方法，集成到一起，也不会造成冲突，并声明所有权以供溯源

本文内容可以任意转载，但是需要注明 来源【头条@MichaelXu】和 来源链接【「连载二」「背景、演变、现代化」大型应用前端解决方案】