使用Java和ReactJS服务器端渲染的微服务UI前端 [英] Microservices UI Frontend with Java and ReactJS Server Side Rendering

问题描述

我目前的设计是让客户端使用浏览器连接到我的（Java）Web API网关，Web API网关将调用每个（Java）微服务以获取其JSON数据并将其返回到发出请求的UI组件在客户端上。

My current design is to have clients connect to my (Java) Web API Gateway using a browser, the Web API Gateway will call each (Java) microservice to get their JSON data and return it to the UI component that made the request on the client.

唯一的客户端呈现将来自每个ReactJS UI组件，用于重复发送到网关的请求。

The only client side rendering will be from each ReactJS UI component for recurring requests to the gateway.

在服务器端，完整的HTML视图将在发送回客户端之前呈现。

On the server side the full HTML view will be rendered prior to being sent back to the client.

Client browser

     ▼ (Request Dashboard View)

Web API Gateway

     ▼ (Request microservice JSON data)

Microservice A JSON Data
Microservice B JSON Data
Microservice C JSON Data
Microservice D JSON Data

     ▼ (Return JSON Data to gateway)

Web API Gateway

     ▼ (Render HTML and return to Client)

Client browser

     ▼ (ReactJS UI Components request data from API Gateway)

这是不清楚的地方，是否最好让每个UI组件与Web API网关或它来自的微服务器进行通信以获取数据？

This is where it gets unclear, would it be best to have each UI component communicate with the Web API Gateway or the parent Microservice it came from to get data?

注意事项

• 让UI组件与Web API Gateway通信似乎是合理的但是将微服务耦合到网关，意味着在微服务上公开新的API，网关也需要更新。


• 让UI组件直接与其微服务通信以获取数据，这样就无需更新Web API网关，从而减少了它们的耦合。但这会将微服务暴露给来自客户端浏览器的外部调用。

设计决策

• 拥有用户界面API网关中的组件创建了一个UI整体，而不是让每个微服务负责其自己的UI组件。使用单片方法简化了解决方案，并且还避免了在客户端请求特定视图时必须聚合每个微服务UI组件的复杂性。

工具：

• Java


• Nashorn


• Dropwizard


• ReactJS


• Gradle


• Webpack


• NodeJS


• NPM

• Java
• Nashorn
• Dropwizard
• ReactJS
• Gradle
• Webpack
• NodeJS
• NPM

如何使用Java和ReactJS在Web API网关上聚合多个微服务ui组件，然后将此预呈现的HTML数据与JavaScript应用程序一起提供给客户端？

有用的参考资料：

• 使用Java 8进行服务器端渲染Nashhorn http://winterbe.com/ posts / 2015/02/16 / isomorphic-react-webapps-on-the-jvm /

• Server side rendering with Java 8 and Nashhorn http://winterbe.com/posts/2015/02/16/isomorphic-react-webapps-on-the-jvm/

推荐答案

问题

如何在Web API网关上的服务器端呈现期间聚合ReactJS UI组件。

How to aggregate ReactJS UI components during server side rendering on the Web API gateway.

解决方案

使用像 Mustache 注入每个ReactJS组件服务器端的呈现HTML输出，然后将此HTML提供给客户端。

Use a templating framework like Mustache to inject the rendered HTML output of each ReactJS component server side, then serve this HTML back to the client.

Github repo https://github.com / damorton / dropwizardheroku-webgateway

Github repo https://github.com/damorton/dropwizardheroku-webgateway

服务器端

我在Web API网关上实现的解决方案首先从微服务请求JSON数据，然后呈现ReactJS组件，同时从微服务中注入JSON数据 Props 。一旦我将完全呈现的ReactJS组件与数据作为HTML字符串，我使用Mustache模板将完全呈现的ReactJS组件HTML注入到Mustache模板中，然后将其返回给客户端。

The solution I implemented on the Web API gateway first requested the JSON data from the microservice, then rendered the ReactJS component while injecting the JSON data from the microservice as Props. Once I had the fully rendered ReactJS component with data as a HTML string I used Mustache templating to inject the fully rendered ReactJS component HTML into the Mustache template, then returned this to the client.

WebGatewayResource.java

@GET
@Produces(MediaType.TEXT_HTML)
public IndexView index() throws IOException {

    // Get events json data from Events microservice
    ApiResponse events = getEventsJsonData();

    // Render the Events component and pass in props
    @SuppressWarnings("unchecked")
    List<Object> eventsProps = (List<Object>) events.getList();
    String eventsComponent = this.nashornController.renderReactJsComponent(kEventsUiComponentRenderServerFunction, eventsProps);

    IndexView index = new IndexView(eventsComponent);
    return index;
}

注意： Dropwizard在Mustache周围执行了很多魔术模板化所以所需要的只是创建一个 index.mustache 文件，并在构造 IndexView 类时引用它。将此 View 返回给客户端会告诉Dropwizard呈现视图并返回HTML。

Note: Dropwizard performs alot of magic around Mustache templating so all that was needed was to create an index.mustache file and reference this when constructing the IndexView class. Returning this View to the client tells Dropwizard to render the view and return the HTML.

index.mustache

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Dropwizard Heroku Event Service</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom-server.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.min.js"></script>
</head>
<body>
  <h1>Events</h1>
  <div id="events">{{{eventsComponent}}}</div>
  <script type="text/javascript" src="assets/js/bundle.js"></script>
  <script type="text/javascript" src="assets/js/client.js"></script>
</body>
</html>

客户端

在客户端，要修复客户端和服务器端呈现的HTML不同的问题，因为最初安装组件时ReactJS组件的道具不可用，当页面加载到时，会调用javascript函数从网关请求JSON数据。

On the client side, to fix an issue with the client and server side rendered HTML being different due to the props for the ReactJS components not being available when the component was mounted initially, a javascript function is called when the page loads to request the JSON data from the gateway.

client.js

var loadEventsFromServer = function(eventsUrl) {
    axios.get(eventsUrl).then(function(res) {
        var data = res.data.list;       
        renderClientEvents(data);
    });
};

loadEventsFromServer('https://domain.webapigateway.com/events');

ReactJS

在安装组件时，不会重新呈现客户端HTML，React知道服务器端呈现中已存在的HTML，并且只在安装时为每个组件添加事件侦听器。这允许React单独更新其组件，并且还利用服务器端呈现。

The client side HTML is not re-rendered when the component is mounted, React is aware of the already existing HTML from the server side render and only adds the event listeners for each component when it mounts. This allows React to update its components individually, and also takes advantage of server side rendering.

这篇关于使用Java和ReactJS服务器端渲染的微服务UI前端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！