angularjs组件间通讯_包含前端web组件的微服务

出品 | 行云创新

编译 | Summer

微服务和前端

微服务正变得越来越流行，许多人选择其作为从单体架构的过渡。然而，此趋势最大的限制来源于后端服务。虽然将它们分离成更小的独立部分很有意义，可以仅通过它们的APIs进行访问，但这一套不能照搬到前端。为什么呢？我认为答案在于我们正使用的技术。我们开发前端的模式并不是为了分割成更小的部分。

服务器端的渲染正逐渐成为历史。虽然企业可能不会同意这种说法，并持续推进服务器端框架“神奇的”转换，例如，将Java对象转换为HTML、JavaScript，但客户端架构将继续普及，服务器端的页面渲染将趋于遗忘。这就给我们留下了客户端框架。我们如今倾向于使用单页应用程序，如 AngularJS, React, ExtJS, ember.js 和其他被证明是前端开发的下一站的方式。然而，无论是否单页应用程式，大多数应用程序都在推广前端架构的一体化方法。

由于后端微服务化而前端仍是单体，我们搭建的服务不是真正基于每个服务都应提供完整功能的理念。我们应该应用垂直分解并构建小型松散耦合的应用程序。然而，在大多数用例中，我们忽略了这些服务中的视觉方面。

所有的前端功能(身份验证、库存、购物车等等)都是单个应用程序的一部分，和后端(大多时候通过HTTP)进行通信，后端被分离成许多微服务。这个趋势与单独的单体应用程序相比是一大进步。通过保持后端服务体量小、松耦合、为单一目的而设计和易拓展，我们在单体服务中遇到的一些问题趋于缓解。然而没有什么东西是完美的，微服务有着一系列问题，但是发现产品bug、测试、理解代码、转换框架甚至是编程语言、隔离、责任和其他事务变得更容易处理。我们需要付出的代价只是部署，但同时，容器(Docker和Rocket)以及不可变服务器的概念也大大改善了这一点。

如果我们看到微服务为后端提供的好处，如果我们能将这些好处也应用于前端并将微服务、设计出不仅包含后端逻辑也包含应用程序可视化部分的微服务，这难道不是一大进步吗？如果一位开发者或一个团队能够完全仅是开发一个功能并让其他人只需要接入该程序(将其导入应用程序中)，这难道不是一大利好吗？如果我们能够在此方式上做业务，前端(SPA与否)将会被简化，仅负责路由和决定导入哪些服务。

我不是说没有人以前后端都是其一部分的方式开发微服务。我知道有些项目就是那么做的。然而我并不相信将前端分离为几部分并与后端打包在一起的好处会超过这种方法的缺点。也就是说，直到我发现了Web Viktor Farcic组件。

Web组件

Web组件是一组基于W3C规范的标准，它们允许创建可导入Web应用的可重复使用组件。它们像是能嵌入任何Web页面的插件。

主要是基于WebKit的浏览器可支持；如Chrome, Opera 和 FireFox(手动配置更改)浏览器。通常，Microsoft Internet Explorer就落后无法实施。在浏览器本身不支持Web组件的情况下，可以使用 JavaScript Polyfills 实现兼容性。

Web组件由4个可以独立使用也可以分离的要素组成：

• 自定义元素

• 影子DOM

• HTML导入

• HTML模板

自定义元素

使用自定义元素，我们可以创建自己的自定义HTML标签和元素。每个要素会有自己的脚本和CSS样式。问题是我们为何在创建自定义标签功能已经存在的情况下仍需要自定义元素？在很长的一段时间内，我们能创建自己的标签，应用CSS样式，并通过脚本添加行为。比如，如果我们想创建一个书单，包括自定义元素和自定义标签，可得到如下图所示的结果：

除其他外，Web组件带来的是生命周期。它们允许我们定义自己正开发的组件的特殊行为。

我们可以在自定义元素中使用下列生命周期回调：

• 创建回调 createdCallback 定义组件注册时发生的行为

• 附加回调 attachedCallback 定义了当组件被插入到DOM中时发生的行为

• 分离回调 detachedCallback 定义了从DOM中移除元素时发生的行为

• 属性更改回调 attributeChangedCallback 定义添加、更改或删除元素属性时发生的行为

影子DOM

影子DOM允许我们将 JavaScript, CSS 和 HTML封装进一个Web组件。在此组件中，这些东西可从主要文档的DOM中分离出来。在某种程度上，这种分离与我们正用于创建API服务的很相似。一个API服务的用户不了解也不关心它的内部。对用户来说唯一重要的是它能够发出API请求。一个服务除了向其他服务的API发送请求外，不被允许访问“外部世界”。它们内部的行为不能从外部(除了被设计为允许)访问，也不能影响它们所在的DOM文档。Web组件间的主要通信方式是通过触发事件。

HTML导入

HTML导入是Web组件的打包机制。它们是告诉DOM Web组件位置的方法。在微服务语境下，导入可以是包括了我们想用的组件的服务的远程位置。

HTML模板

HTML模板要素可用于保存加载页面时不呈现的客户端内容。然而，它可以通过 JavaScript 实例化。可以被分割成在文档中使用的代码片段。

带前端的微服务

Web组件提供了一种优雅的方式创建可导入Web应用的前端模块。这些模块可以和后端一起打包成微服务。这样，我们构建的服务可以将逻辑和视觉表现一起完成打包。如果这种趋势流行，前端应用可以简化为路由，决定在不同Web组件之间展示和编排哪组组件。

既然我们储备了关于Web组件十分基础的信息，也渴望尝试一种开发微服务的新方法，我们可以开始构建一种包含了前端和后端的微服务。

Source：https://technologyconversations.com/2015/08/09/including-front-end-web-components-into-microservices/

推荐阅读

• 10 个简单小技巧助你快速成为Linux高手！

• SpringBoot一个依赖搞定Session共享，没有比这更简单的方案了！

• 19 个强大、有趣、好玩、又装B的 Linux 命令！

• 阿里开源 KT Connnect，轻量级云原生测试环境治理平台来啦！

• 咱们从头到尾说一次 Java 垃圾回收

• 抖音微博等短视频千万级高可用、高并发架构如何设计？

行云创新(CloudToGo)是国内一站式开发云的首创者，为开发者提供一站式的全云端开发环境，涵盖应用从架构设计、开发、交付、运维和运营全生命周期。

对开发、测试、运维提供统一支持；零门槛，用户不需要懂容器、K8S也能熟练使用；可定义灵活的应用交付策略，一键式交付到多云环境；以应用为中心、感知应用全方位状态，变被动响应为主动运维，实现应用状态的快速反馈。

目前为金融、保险、制造、教育、物流、电商等多个行业提供各种整体解决方案。