前端微服务框架single-spa
javascript(前端)微服务
single-spa是一个可以让使用多个使用javascript语言框架的构建的应用集成在一起的框架, 使用signle-spa架构可以带来一下好处:
- 在同一个页面下使用多个框架可以实现无刷新(react/vue/angluar/ember或其他)
- 单个前端应用独立部署
- 使用新框架无需重写现有的应用
- 懒加载
架构概况
single-spa的灵感来源于现代前端框架的组件生命周期以及使用全部应用的生命周期。它诞生于Canopy每次被卡在希望使用React + react-router来替换我们Angluar + ui-router应用的时候,现在single-spa支持
几乎支持所有前端框架。由于许多前端框架短命而使javascript(或者说前端)臭名昭著(ps.三天出一新框架,宝宝心里苦),我们决定让使用任何前端框架这件事变得更简单:
single-spa apps 考虑基于以下:
- 应用集, 每个应用应该是独立的单体应用(SPA)。每个应用应该能相应url路由时间并且知道如何从dom中初始化启动,mount,unmount。复杂的单体(页)应用SPA与single-spa应用集主要区别在于single-spa应用集必须要让多个应用共存在同一html页面,而不是让每个应用拥有自己的html页面下。
例如,两个分别基于react和angluar的应用。当他们处于激活状态的时候,监听路由事件,并将对应的内容放置dom中。当非激活状态的时候,不再监听路由变化,并且将内容从dom中移除。
- 一个single-spa-config, 一个html应用以及多个注册应用构成一个single-spa应用。每个应用注册需要以下三方面:
- 名字
- 加载应用的方法
- 判断应用何时处于激活/非激活状态的方法
使用sing-spa会有多困难?
single-spa 支持ES5, ES6+, TypeScript, Webpack, SystemJS, Gulp, Grunt, Bower, ember-cli, 甚至任何可能构建的系统。你可以使用npm, jsnpm来安装使用,或者直接使用"<script>"标签。
我们的目标是希望(使用single-spa)越简单越好。但是我们需要指出的是single-spa的是一个增强架构,它完成的事情跟前端框架完成的业务是有区别的。(备注single-spa不是为了实现业务逻辑)
如果你的项目不是从头开始,你必须合并SPA(migrate your SPA) 来变成single-spa应用
(译)