如何实现前端微服务化?

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

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

译者: Fundebug

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

对于网页应用,现代的开发方法使得前端部分变得越来越大,与之对应的后端反而变小。我们的网站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/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏韩伟的专栏

经典软件架构模式(二)

今天继续推送“经典软件架构模式(二)之管道和过滤器模式、MVC模式。 管道和过滤器模式 第三个案例是一个WEB的例子,但并不是简单的CGI加数据库,而是一个在...

3086
来自专栏京东技术

微信手Q node.js直出框架Hawaii剖析——京东前台技术委员会专题

手机京东技术团队 ? 作者简介 资深前端开发工程师 京东前台技术委员会委员 微信手Q运营产品前端开发组组长 目前负责微信手Q购物入口的前端基础建设及port...

3016
来自专栏即时通讯技术

IM开发基础知识补课(二):如何设计大量图片文件的服务端存储架构?

一个完善的IM系统中通常充斥着大量的图片内容,包括:用户头像、图片消息、相册、图片表情等等,那么在做服务端架构设计时该如何存储这些图片呢?

2304
来自专栏源码之家

搞定龙源期刊原貌版杂志的下载

2773
来自专栏编程微刊

小程序新方法 open-type获取头像昵称

小程序自上线以来,官方一直在调整API,因此也出现了一批被废弃的接口,作为程序员的我们,此时此刻千万不能为这不断的变化而感到头疼,应当与时俱进,不断的更新自己的...

2502
来自专栏更流畅、简洁的软件开发方式

【自然框架】—— 全貌

补充:忘记了一件很重要的事情,我建立了一个小组 http://space.cnblogs.com/group/nature/ 欢迎大家加入。我们可以组织一些话...

2277
来自专栏IT大咖说

通过QQ浏览器内核看browser性能优化

摘要 QQ浏览器内核架构组负责人,通过QQ浏览器X5内核在加载速度、流畅度方面所做的优化工作,带你了解浏览器内核的工作原理、展示前端优化的指导性原则、以及更佳的...

4795
来自专栏hbbliyong

opoa介绍

一 定义       One Page, One Application(后面缩写为OPOA,或者1P1A), 含义很简单:一个页面就是一个应用。不再使用ifr...

3147
来自专栏IT大咖说

前端老牌框架衰退,IMVC(同构 MVC)成未来趋势?

1682
来自专栏WeTest质量开放平台团队的专栏

面向亿万级用户的QQ一般做什么?——兴趣部落的Web同构直出分享

所以可以把直出定义为:“以node作为后端语言实现的服务端渲染并输出HTML字符串到客户端的一项技术”。这样浏览器渲染首屏的过程就由非直出下的先请求HTML,再...

952

扫码关注云+社区