如何实现前端微服务化?

本文涉及的产品
服务治理 MSE Sentinel/OpenSergo,Agent数量 不受限
简介: 译者按: 微服务在后端开发中大行其道,其实对于越来越复杂的前端应用来说,微服务也是一种不错的选择。原文: Micro frontends—a microservice approach to front-end web development译者: Fundebug为了保证可读性,本文采用意译而非直译。

译者按: 微服务在后端开发中大行其道,其实对于越来越复杂的前端应用来说,微服务也是一种不错的选择。

原文: Micro frontends—a microservice approach to front-end web development

译者: Fundebug

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

img_5db6682b55d121bba0fd8d11b515189e.png

对于网页应用,现代的开发方法使得前端部分变得越来越大,与之对应的后端反而变小。我们的网站Weld的代码中90%都是前端相关。我可以想象大多数现代的网页应用都类似。

网页应用一直在演化,网页开发的技术也在不断进步。现代的开发甚至依赖于在同一个项目中使用多个不同的框架。比如我们使用一些依赖于jQuery、AngularJS 1.x的旧的模块,和React、Vue里面的新模块。

单一框架无法应对大型网页应用

我们需要一种方法可以把一个大的项目拆分成很多个小的模块,让它们独自运行。

举个例子:

  • myapp.com:使用静态HTML技术构建的静态页面。
  • myapp.com/settings:使用AngularJS 1.x 构建的旧的设置页面。
  • myapp.com/dashboard:使用React构建的新的控制面板。

能够想象我们需要如下技术:

  • 一个共享的JavaScript代码库比如用于管理路由和用户会话,以及一些共享的CSS。当然要越少越好。
  • 一堆独立的模块,也就是微应用('mini-app')。每一个使用各自的框架搭建,使用不同的代码库管理。
  • 一个可以将所有模块连接起来的发布系统,可以将整个服务运行。任何模块的更新都会触发服务的重启。

前端微服务化

正如大家想到的,那就是前端微服务化。像Spotify, Klarna, Zalando, UpworkAllegro都使用前端微服务化技术来构架他们的网页应用。

实现方案

我总结了一下几种实现方案:

  1. 我认为最好的方案是Single-SPA "meta framework"可以在一个页面将多个不同的框架整合,甚至在切换的时候都不需要刷新页面(这个是demo,支持React, Vue, Angular 1, Angular 2, etc)。可以看Bret Little的介绍
  2. 多个单一页面应用分管不同的URL。该方法使用了NPM/Bower来共享某些功能。
  3. 将微服务包装到IFrames中,然后使用一些库和Window.postMessageAPI来交互
  4. 不同的模块使用共享事件总线(比如,chrisdavies/eev)来交流。每一个模块使用独自开发,并处理所有模块间的交互事件。
  5. 使用Varnish Cache来整合不同的模块。
  6. 使用Web Components来作为一个整合层整合所哟模块。
  7. React部件黑盒技术

资源

更多

版权声明:
转载时请注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2017/08/02/micro_frontend_development/

目录
相关文章
|
13天前
|
消息中间件 前端开发 API
架构的未来:微前端与微服务的融合
架构的未来:微前端与微服务的融合
|
4月前
|
前端开发 API Docker
前端微服务
前端微服务
175 0
|
2月前
|
负载均衡 前端开发 Java
字节后端面试题(前端发送请求到后端的过程(MVC),网关gateway作用,怎么解决跨域,各微服务组件作用)
字节后端面试题(前端发送请求到后端的过程(MVC),网关gateway作用,怎么解决跨域,各微服务组件作用)
89 0
|
8月前
|
存储 前端开发 数据安全/隐私保护
十五.SpringCloud+Security+Oauth2实现微服务授权 -前端登录实战
SpringCloud+Security+Oauth2实现微服务授权 -前端登录实战
|
10月前
|
设计模式 负载均衡 监控
「微服务架构」面向CTO的微服务设计模式:API网关、前端的后端等
「微服务架构」面向CTO的微服务设计模式:API网关、前端的后端等
|
前端开发 JavaScript
《Vue.js 在前端服务化上的探索与实践》电子版地址
Vue.js 在前端服务化上的探索与实践
39 0
《Vue.js 在前端服务化上的探索与实践》电子版地址
|
前端开发 JavaScript
《Vue.js 在前端服务化上的探索与实践》电子版地址
Vue.js 在前端服务化上的探索与实践
30 0
《Vue.js 在前端服务化上的探索与实践》电子版地址
|
前端开发 JavaScript API
微服务项目:尚融宝(31)(前端搭建:会员列表搭建(2))
微服务项目:尚融宝(31)(前端搭建:会员列表搭建(2))
微服务项目:尚融宝(31)(前端搭建:会员列表搭建(2))
|
XML 前端开发 easyexcel
微服务项目:尚融宝(16)(前端搭建:上手EasyExcel)
微服务项目:尚融宝(16)(前端搭建:上手EasyExcel)
|
JavaScript 前端开发 API
微服务项目:尚融宝(15)(前端平台:完善积分等级模块)
微服务项目:尚融宝(15)(前端平台:完善积分等级模块)
微服务项目:尚融宝(15)(前端平台:完善积分等级模块)

相关产品

  • 微服务引擎
  • 服务网格