TL;DR; I’ve created a serializer that converts DTO’s (PoJo’s) into HTML (backend) that in turn can be translated to a JSON object to be used by JS enabled browsers (e.g. upgrade snippet to Widget). These mechanic’s would allow a data first (see Progressive Enhanchment) approach. While the solution works and has potential, it does not produce a super fancy render – as it follows the PoJo data-structure and therefore is limited. These limitations could be canceled though by the use of additional directives (e.g. using different tags, including boiler-plating).

More discussion will be needed on this concept.

(Demo starts plain, adds CSS, then JS with a 2 sec interval)

Intro

As i’m currently prototyping a new product to reach a mvp status, i’m also thinking about the future. What technology stack would i use? Would i stick to familiar technologies? Or should i invest time in newer technologies better technologies? How would my architecture look like? What should be the most important aspects of the architecture?

One of the aspects that i’m currently evaluating is on how to realize a data-first approach as part of the requirement to adopt a data-first approach as part of a progressive enhancement approach (wiki).

Besides looking at js-frameworks that are capable of server-side rendering (React and Vue (with Nuxt.js on op)), i’ve also been experimenting with the idea to create a set of serializers that would be able to directly serialize a PoJo/DTO into viewable HTML, that in turn can be serialized into JSON for use in advanced/JavaScript-supported webpages.

 

Prototype: Converting PoJo/DTO to HTML, and HTML to JSON.

So after spending roughly 3 hours i made a prototype that just did that, consisting of roughly 3 components:

1. PoJo -> HTML serializer (Serializer.java)
   This basic serializer transforms PoJo’s into basic HTML, taking into account any Class/Field annotations to add additional attributes (e.g. classes) or change the tags used.Supports simple PoJo’s, references to other PoJo’s and Collections/Arrays.
2. DataFormatDirective.java annotation.
   A simple annotation that can be used to direct how a certain PoJo should be serialized. This prototype only supports tag and additionalAttrs. To change the tag to be used, and to provide additional attributes respectively.
3. HTML->JSON JavaScript-function
   A function that, given a domnode can recognize the data encapsulated by the HTML and is able to convert it ‘back’  into the same JSON that we would normally be the result of a webservice-call.This allows any JavaScript browser to use the data hidden in the HTML in the same way it would do if it were to access a webservice.

Indicative design

Sample output:

Running the serializer with default options could result in something like the below:

<div data-t="instance">
   <div data-t="value" data-f="id">0</div>
   <div data-t="value" data-f="name">"Dummy Jones"</div>
   <div data-t="value" data-f="email">"ivo@ivosmail.com"</div>
   <div data-t="array" data-f="friendsWith">
      <div data-t="element">
         <div data-t="instance">
            <div data-t="value" data-f="id">100</div>
            <div data-t="value" data-f="name">"John"</div>
            <div data-t="value" data-f="email">"John@johnsmail.com"</div>
            <div data-t="array" data-f="friendsWith">null</div>
         </div>
      </div>
      <div data-t="element">
         <div data-t="instance">
            <div data-t="value" data-f="id">100</div>
            <div data-t="value" data-f="name">"Rose"</div>
            <div data-t="value" data-f="email">"Rose@Rosemail.com"</div>
            <div data-t="array" data-f="friendsWith">null</div>
         </div>
      </div>
   </div>
</div>

Which without any js/css will result in a pretty dull render. The @annotation however, might be used to change the tag (default=div), add attributes, or even add boiler plating.

With JS enabled, the HTML can be converted to the following JSON, which – is the exact output the jax-rs api normally would return.

{
	"id": 0,
	"name": "Dummy Jones",
	"email": "ivo@ivosmail.com",
	"friendsWith": [{
		"id": 100,
		"name": "John",
		"email": "John@johnsmail.com",
		"friendsWith": []
	}, {
		"id": 100,
		"name": "Rose",
		"email": "Rose@Rosemail.com",
		"friendsWith": []
	}]
}

 

Download the code:

Will upload to github after a quick sanitize.