专栏首页Fundebug如何实现前端微服务化?

如何实现前端微服务化?

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

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

相关文章

  • JavaScript一团乱,这是好事

    JavaScript 从不移除旧的特性,新版本总是向后兼容。我希望我们能够把那些重复的旧的特性清理一下,但是保持兼容有太多的好处。我在本文会解释。

    Fundebug
  • 我为什么推荐Prettier来统一代码风格

    译者按: 关于代码风格,不同的人有不同的偏好,其实并没有什么绝对的对错。但是,有 2 条原则应该是对的: 少数服从多数;用工具统一风格。

    Fundebug
  • 计算机性能之殇(一)-- 天才冯·诺依曼与冯·诺依曼瓶颈

    本文的目标是在我有限的认知范围内,讨论一下人们为了提高性能做出的种种努力,这里面包含硬件层面的 CPU、RAM、磁盘,操作系统层面的并发、并行、事件驱动,软件层...

    Fundebug
  • 在互联网中关系型数据库是否不再那么重要

      强调互联网,这是因为本文所讨论的前提是互联网应用。与“传统”应用不同,互联网中的应用每天面临的是海量的数据、大量的请求以及对系统可靠性和响应速度有着更高的要...

    用户1148394
  • 图解机器学习(清晰的路线图)

    每当提到机器学习,大家总是被其中的各种各样的算法和方法搞晕,觉得无从下手。确实,机器学习的各种套路确实不少,但是如果掌握了正确的路径和方法,其实还是有迹可循的,...

    机器人网
  • HDFS 客户端读写超时时间解析

    前段我们Hadoop集群磁盘使用率比较高,部分硬盘空间使用超过了70%,这部分服务器的DataNode服务读写负载就比较高,造成部分数据同步任务因为读写超时而失...

    九州暮云
  • python3.6+scrapy+m

    py3study
  • UNPv1第五章:TCP客户服务器程序实例

    这个简单的例子是完成下述功能的一个回射服务器: 1. 客户从标准输入读一行文本,写到服务器上 2. 服务器读入此行,并回射给客户 3. 客户读...

    提莫队长
  • 响铃:互联网金融理财端寡头时代来临,到底谁该被剩下来?

      近日,互联网金融又遇大事,百度与中信银行成立直销银行:百信银行,这意味着BAT三大巨头均以不同形式拿到银行牌照。至此互联网金融“井喷式”发展过后,进入了新的...

    曾响铃
  • 计算机编程新人入行指导

    自加入公司以来,已经有6年的时间了,并且已经从一个新的电脑软件开发人员变成了一个老人。公司里有几个不同的项目,一些新同事会加入项目组,会有一些混乱和问题。这里有...

    企鹅号小编

扫码关注云+社区

领取腾讯云代金券