如何实现前端微服务化?

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

原文: 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 条评论
登录 后参与评论

相关文章

来自专栏双十二技术哥

组件化实践详解(一)

具体实施一项技术项目之前我们会首先确定对应的目标,之后的行动计划都会朝着目标一步步靠拢。

452
来自专栏web前端教室

[先行者计划]:《Vuex相关概念的讲解和介绍》-- 课堂笔记节选

vuex是什么东西? 官网对Vuex的定义,"Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。" 恩,从这句话可以看出,它应该是一种编写js的思...

1668
来自专栏老秦求学

深入理解计算机系统读书笔记之第一章:漫游

我是从豆瓣上看到好多人都在推荐这本书,于是就去借来读一读,昨天晚上用了好长时间来读这本书的第一章节,感觉这本书比较符合我(有些基础还不太明白,这本书详细的进行了...

2747
来自专栏云计算爱好者

逆向 AWS API 设计

由于AWS并没有像Google一样公开出一份API Design Guide,所以只能根据 API 的模样去逆向工程最初的设计考量。既然上一篇介绍了很多 RES...

2110
来自专栏IMWeb前端团队

数据字段防卫探索

数据字段防卫探索 这个标题不知道怎么取,估计没人看得懂,还是直接看背景吧 -_-!! 背景 某天,小Y借到一个需求:页面这里要展示一个列表,cgi数据字段是xx...

1745
来自专栏码洞

Shell文本处理编写单行指令的诀窍

小编编程资质一般,刚出道的时候使用的是windows来做程序开发,平时linux命令的知识仅限于在学校里玩ubuntu的时候学到的那丁点。在一次偶然看见项目的主...

592
来自专栏企鹅号快讯

实战:从Python分析17-18赛季NBA胜率超70%球队数据开始…

干货 观点 案例 资讯 我们 ? 撸主: Casey 岂安业务风险分析师 主要负责岂安科技RED.Q的数据分析和运营工作。 就在昨天,12月19日,科比再...

2147
来自专栏mukekeheart的iOS之旅

《从零开始做一个MEAN全栈项目》(2)

欢迎关注本人的微信公众号“前端小填填”,专注前端技术的基础和项目开发的学习。   上一节简单介绍了什么是MEAN全栈项目,这一节将简要介绍三个内容:(1)一个通...

3275
来自专栏猛牛哥的博客

集结号抢座挂的制作分析过程(一):座位内存的分析

2236
来自专栏Java技术栈

分享18道Java基础面试笔试题(面试实拍)

上图来自Java技术栈微信群里的群友分享,看起来比较基础,但不一定人人都答得上来。 图片比较模糊,小编把题目进行了文字化。 1.你最常上的两个技术站和最常使用的...

41111

扫码关注云+社区