将前端Web组件包含在微服务中

2018-11-02 11:45

Tag: 前端

微服务和前端

微服务正变得越来越流行,许多人选择从单片架构过渡。但是,这种方法主要限于后端服务。虽然将它们分成可以仅通过其API访问的较小的独立部分是很有意义的,但同样不适用于前端。这是为什么?我认为答案在于我们正在使用的技术。我们开发前端的方式并不是为了分成更小的部分。

服务器端渲染正在成为历史。虽然企业可能不同意该声明并继续推动“神奇地”转换的服务器端框架,例如,Java对象转换为HTML和JavaScript,但客户端框架将继续增加流行度,慢慢地将服务器端页面呈现置于遗忘状态。这让我们留下了客户端框架。单页应用程序是我们今天倾向于使用的。AngularJSReactExtJSember.js等被证明是前端开发演进的下一步。但是,单页应用程序与否,大多数都是推动前端架构的单片方法。

由于后端被拆分为微服务而前端是单片式的,我们正在构建的服务并没有真正坚持每个应该提供完整功能的想法。我们应该应用垂直分解并构建小的松耦合应用程序。但是,在大多数情况下,我们在这些服务中缺少视觉方面。

FE-整体

所有前端功能(身份验证,库存,购物车等)都是单个应用程序的一部分,并与后端(大部分时间通过HTTP)进行通信,后端被分成微服务。与单个单片应用程序相比,这种方法是一个很大的进步。通过保持小型,松散耦合的后端服务,专为单一目的而且易于扩展,我们对整体结构的一些问题得到了缓解。虽然没有什么是理想的,微服务有自己的问题,找到生产错误,测试,理解代码,改变框架甚至语言,隔离,责任和其他事情变得更容易处理。我们必须支付的价格是部署,但是使用容器(Docker和Rocket)以及不可变服务器的概念也大大改善了。

如果我们看到微服务提供后端带来的好处,那么如果我们能够将这些优势应用到前端并且设计微服务不仅可以完成后端逻辑而且还可以完成视觉部分,那么这不是一个进步吗?我们的申请?如果开发人员或团队可以完全开发某个功能并让其他人将其导入应用程序,那会不会有益?如果我们能够以这种方式开展业务,那么前端(SPA或不是SPA)将被简化为仅负责路由和决定导入哪些服务的脚手架。

女士

我并不是说没有人以这样的方式开发微服务,前端和后端都是其中的一部分。我知道有些项目可以做到这一点。然而,我并不相信将前端分成几部分并将它们与后端组合在一起的好处是这种方法的缺点。也就是说,直到我发现Web组件。

Web组件

Web组件是作为W3C规范提出的一组标准。它们允许创建可导入Web应用程序的可重用组件。它们就像可以导入任何网页的小部件。

它们目前在基于WebKit的浏览器中受支持; Chrome,Opera和FireFox(手动配置更改)。像往常一样,Microsoft Internet Explorer落后并没有实现它们。如果浏览器本身不支持Web组件,则使用JavaScript Polyfill完成兼容性。

Web组件由4个主要元素组成,可以单独使用或全部一起使用:

自定义元素

使用自定义元素,我们可以创建自己的自定义HTML标记和元素。每个元素都可以拥有自己的脚本和CSS样式。可能出现的问题是,当创建自定义标签的能力已经存在时,为什么我们需要自定义元素?很长一段时间以来,我们可以创建自己的标签,应用CSS样式并通过脚本添加行为。例如,如果我们想创建一个包含自定义元素和自定义标签的书籍列表,我们最终会得到类似的内容。

<books-list></books-list>

除了其他方面,Web组件带来的是生命周期回调。它们允许我们定义特定于我们正在开发的组件的行为。

我们可以使用以下生命周期回调与自定义元素:

暗影DOM

Shadow DOM允许我们将JavaScript,CSS和HTML封装在Web组件中。在组件内部时,这些东西与主文档的DOM分开。在某种程度上,这种分离类似于我们在构建API服务时使用的分离。API服务的消费者不知道也不关心其内部。对消费者而言唯一重要的是它可以提出的API请求。除了向其他服务的API发出请求之外,此类服务无法访问“外部世界”。在Web组件中可以观察到类似的功能。它们的内部行为无法从外部访问(除非设计允许),也不能影响它们所在的DOM文档.Web组件之间的主要通信方式是触发事件。

HTML导入

HTML Imports是Web组件的打包机制。它们是告诉DOM Web组件位置的方法。在微服务的上下文中,导入可以是包含我们想要使用的组件的服务的远程位置。

<link rel="import" href="/services/books/books-list.html">

HTML模板

HTML模板元素可用于保存在加载页面时不会呈现的客户端内容。但是,它可以通过JavaScript实例化。它是可以在文档中使用的代码片段。

带前端的微服务

Web组件提供了一种非常优雅的方式来创建可以导入到Web应用程序中的前端部分。这些部件可以与后端一起打包到微服务中。这样,我们正在构建的服务可以完成,逻辑和可视化表示包装在一起。如果采用这种方法,可以将前端应用程序简化为路由,决定在不同Web组件之间显示哪些组件以及事件编排。

现在我们已经配备了(非常)有关Web组件的基本信息,并希望尝试一种新的方法来开发微服务,我们可以开始构建包含前端和后端的微服务。

开发具有聚合物Web组件和测试驱动开发的前端微服务系列中,我们将探索将本文的讨论付诸实践的方法之一。我们将使用Polymer,Google库来创建Web组件,DockerDocker Compose以及更多的工具和库。开发将使用测试驱动开发(TDD)方法完成。


推荐相关阅读