Displaying HTML in a Web Client from a REST Microservice

We've been talking about a NixMash Distributed Application called Listreme, online at listreme.com. Here are prior NixMash posts about it. Listreme displays tweets from Twitter User Lists after filtering them by various criteria. Here is a sample web page displaying a filtered U.S. News and Politics User List. In this post we will cover how we're displaying the stream of tweets shown below in our Web Module from a Twitter REST Microservice.

The Twitter Microservice Output

For review here's the project layout and the various modules. In this post we'll be looking at the TwitterService and Web modules.

TwitterService delivers Twitter Data with REST, typically in JSON format and looking like the following output for User Lists.

While the TwitterService REST Module can output all data in JSON, for the purposes of this particular client and function we're going to produce HTML with Mustache templating. The data we'll be sending for a single tweet will look like this.

The Web Client is retrieving the HTML from TwitterService as any other resource. Below is the TwitterService method that delivers the HTML. A few points to mention is that all resource paths that output HTML are prefixed with /html. Also note that we are producing MediaType.TEXT_HTML with a UTF-8 Character Set.

On the Web Client

We're going to start in the JavaScript where we retrieve data with Ajax from a local Url /rest/tweets. The double-curl brackets are used with Mustache to add the current User List to the Url.

The Web Controller

Still in the Web Client we start the process of retrieving the HTML data from the TwitterService REST Module in a Web Controller.

Next stop in our Web Client is the Service Layer getRestPagedHtmlTweets() where the core of our logic is a reusable getRestHtml(path) method. We use Jersey JAX-RS to build a REST Client to the TwitterService REST Resource and since we're retrieving HTML simply read the Response as a String.

We return the HTML to the JavaScript Ajax function via the Web Controller path of /rest/tweets and we've got a web page full of tweets!