译者按: 微服务在后端开发中大行其道,其实对于愈来愈复杂的前端应用来讲,微服务也是一种不错的选择。html
为了保证可读性,本文采用意译而非直译。另外,本文版权归原做者全部,翻译仅用于学习。前端
<div style="text-align: center;"> <img style="width:60%;" src="micro_frontend_development/micro_front_end.png" /> </div>git
对于网页应用,现代的开发方法使得前端部分变得愈来愈大,与之对应的后端反而变小。咱们的网站Weld的代码中90%都是前端相关。我能够想象大多数现代的网页应用都相似。github
网页应用一直在演化,网页开发的技术也在不断进步。现代的开发甚至依赖于在同一个项目中使用多个不一样的框架。好比咱们使用一些依赖于jQuery、AngularJS 1.x的旧的模块,和React、Vue里面的新模块。web
单一框架没法应对大型网页应用
咱们须要一种方法能够把一个大的项目拆分红不少个小的模块,让它们独自运行。小程序
举个例子:后端
myapp.com
:使用静态HTML技术构建的静态页面。myapp.com/settings
:使用AngularJS 1.x 构建的旧的设置页面。myapp.com/dashboard
:使用React构建的新的控制面板。
可以想象咱们须要以下技术:微信小程序
- 一个共享的JavaScript代码库好比用于管理路由和用户会话,以及一些共享的CSS。固然要越少越好。
- 一堆独立的模块,也就是微应用('mini-app')。每个使用各自的框架搭建,使用不一样的代码库管理。
- 一个能够将全部模块链接起来的发布系统,能够将整个服务运行。任何模块的更新都会触发服务的重启。
前端微服务化
正如你们想到的,那就是前端微服务化
。像Spotify, Klarna, Zalando, Upwork和Allegro都使用前端微服务化技术来构架他们的网页应用。微信
实现方案
我总结了一下几种实现方案:架构
- 我认为最好的方案是Single-SPA "meta framework"能够在一个页面将多个不一样的框架整合,甚至在切换的时候都不须要刷新页面(这个是demo,支持React, Vue, Angular 1, Angular 2, etc)。能够看Bret Little的介绍。
- 多个单一页面应用分管不一样的URL。该方法使用了NPM/Bower来共享某些功能。
- 将微服务包装到IFrames中,而后使用一些库和Window.postMessageAPI来交互。
- 不一样的模块使用共享事件总线(好比,chrisdavies/eev)来交流。每个模块使用独自开发,并处理全部模块间的交互事件。
- 使用Varnish Cache来整合不一样的模块。
- 使用Web Components来做为一个整合层整合所哟模块。
- React部件黑盒技术。
资源
- Hacker New提问: 你是用什么构建前端微服务?
- Zalando公司开发的Mosaic项目,提供了一些列的库来构建微服务架构,该架构能够支撑大型网站。能够看看这个演讲。
- Micro Frontends包含了一些技术、策略和方法构建现代网页应用来服务于多个独立团队开发的状况。
更多
- ThoughtWorks公司的技术分享:前端微服务化
- Upword前端的微服务化
- 前端微服务化入门
- 如何多个团队同时开发前端: 前端微服务化
- 微服务网格化和前端微服务化
- 微服务架构中的微前端
- 使用为服务架构管理前端
- 前端组件微服务化
关于Fundebug
Fundebug专一于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了7亿+错误事件,获得了Google、360、金山软件、百姓网等众多知名用户的承认。欢迎免费试用!
版权声明
转载时请注明做者Fundebug以及本文地址: https://blog.fundebug.com/2017/08/02/micro_frontend_development/