{"id":581,"date":"2017-07-31T09:09:56","date_gmt":"2017-07-31T07:09:56","guid":{"rendered":"http:\/\/h2916922.stratoserver.net:8084\/?p=581"},"modified":"2017-08-05T13:16:53","modified_gmt":"2017-08-05T11:16:53","slug":"an-approach-to-progressive-enhanchment-by-serialization-of-dtos","status":"publish","type":"post","link":"https:\/\/www.ivojonker.nl\/?p=581","title":{"rendered":"An approach to progressive enhanchment by serialization of DTOs to HTML."},"content":{"rendered":"<p><strong>TL;DR;\u00a0<\/strong>I&#8217;ve created a\u00a0serializer that converts DTO&#8217;s (PoJo&#8217;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&#8217;s would allow a data first (see<a href=\"https:\/\/en.wikipedia.org\/wiki\/Progressive_enhancement\"> Progressive Enhanchment<\/a>) approach. While the solution works and has potential, it does not produce a super fancy render &#8211; 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).<\/p>\n<p>More discussion will be needed on this concept.<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"350px\" id=\"progressiveIframeDemo\" src=\"http:\/\/h2916922.stratoserver.net:8084\/ivo\/wp-attachments\/progressiveEnhanchmentDemo\/rest\/pages\/userInfo.html\"><\/iframe><br \/>\n(Demo starts plain, adds CSS, then JS with a 2 sec interval)<\/p>\n<h3><\/h3>\n<h3>Intro<\/h3>\n<p>As i&#8217;m currently prototyping a new product\u00a0to reach a mvp status, i&#8217;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?<\/p>\n<p>One of the aspects\u00a0that i&#8217;m currently evaluating\u00a0is 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 (<a href=\"https:\/\/en.wikipedia.org\/wiki\/Progressive_enhancement\">wiki<\/a>).<\/p>\n<p>Besides looking at js-frameworks that are capable of server-side rendering (React and Vue (with Nuxt.js on op)), i&#8217;ve also been experimenting with the idea to create a set of serializers that would be able to <strong>directly serialize a PoJo\/DTO into viewable HTML, that in turn can be serialized\u00a0into JSON for use in advanced\/JavaScript-supported webpages.<\/strong><\/p>\n<p>&nbsp;<\/p>\n<h3><\/h3>\n<h3>Prototype: Converting PoJo\/DTO to HTML, and HTML to JSON.<\/h3>\n<p>So after spending roughly 3 hours i made\u00a0a prototype that just did that, consisting of roughly 3 components:<\/p>\n<ol>\n<li>PoJo -&gt; HTML serializer (Serializer.java)<br \/>\nThis basic serializer transforms PoJo&#8217;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&#8217;s, references to other PoJo&#8217;s and Collections\/Arrays.<\/li>\n<li>DataFormatDirective.java annotation.<br \/>\nA 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.<\/li>\n<li>HTML-&gt;JSON JavaScript-function<br \/>\nA function that, given a domnode can recognize the data encapsulated by the HTML and is able to convert it &#8216;back&#8217; \u00a0into 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.<\/li>\n<\/ol>\n<p><strong>Indicative design<\/strong><\/p>\n<h3><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-582\" src=\"http:\/\/h2916922.stratoserver.net:8084\/wp-content\/uploads\/2017\/08\/FormattedDataTransferObjectConcept-1024x594.png\" alt=\"Diagram to explain &quot;A concept to format DTO PoJo's into HTML for use in progressively enhanched websites&quot;\" width=\"1024\" height=\"594\" srcset=\"https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2017\/08\/FormattedDataTransferObjectConcept-1024x594.png 1024w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2017\/08\/FormattedDataTransferObjectConcept-300x174.png 300w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2017\/08\/FormattedDataTransferObjectConcept-768x446.png 768w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2017\/08\/FormattedDataTransferObjectConcept-750x435.png 750w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2017\/08\/FormattedDataTransferObjectConcept-400x232.png 400w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2017\/08\/FormattedDataTransferObjectConcept-430x250.png 430w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2017\/08\/FormattedDataTransferObjectConcept-150x87.png 150w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2017\/08\/FormattedDataTransferObjectConcept-100x58.png 100w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2017\/08\/FormattedDataTransferObjectConcept.png 1120w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/h3>\n<h3>Sample output:<\/h3>\n<p>Running the serializer with default options could result in something like the below:<\/p>\n<pre class=\"lang:xhtml decode:true\" title=\"Default output html\">&lt;div data-t=\"instance\"&gt;\r\n   &lt;div data-t=\"value\" data-f=\"id\"&gt;0&lt;\/div&gt;\r\n   &lt;div data-t=\"value\" data-f=\"name\"&gt;\"Dummy Jones\"&lt;\/div&gt;\r\n   &lt;div data-t=\"value\" data-f=\"email\"&gt;\"ivo@ivosmail.com\"&lt;\/div&gt;\r\n   &lt;div data-t=\"array\" data-f=\"friendsWith\"&gt;\r\n      &lt;div data-t=\"element\"&gt;\r\n         &lt;div data-t=\"instance\"&gt;\r\n            &lt;div data-t=\"value\" data-f=\"id\"&gt;100&lt;\/div&gt;\r\n            &lt;div data-t=\"value\" data-f=\"name\"&gt;\"John\"&lt;\/div&gt;\r\n            &lt;div data-t=\"value\" data-f=\"email\"&gt;\"John@johnsmail.com\"&lt;\/div&gt;\r\n            &lt;div data-t=\"array\" data-f=\"friendsWith\"&gt;null&lt;\/div&gt;\r\n         &lt;\/div&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div data-t=\"element\"&gt;\r\n         &lt;div data-t=\"instance\"&gt;\r\n            &lt;div data-t=\"value\" data-f=\"id\"&gt;100&lt;\/div&gt;\r\n            &lt;div data-t=\"value\" data-f=\"name\"&gt;\"Rose\"&lt;\/div&gt;\r\n            &lt;div data-t=\"value\" data-f=\"email\"&gt;\"Rose@Rosemail.com\"&lt;\/div&gt;\r\n            &lt;div data-t=\"array\" data-f=\"friendsWith\"&gt;null&lt;\/div&gt;\r\n         &lt;\/div&gt;\r\n      &lt;\/div&gt;\r\n   &lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>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.<\/p>\n<p>With JS enabled, the HTML can be converted to the following JSON, which &#8211; is the exact output the jax-rs api normally would return.<\/p>\n<pre class=\"lang:default decode:true\">{\r\n\t\"id\": 0,\r\n\t\"name\": \"Dummy Jones\",\r\n\t\"email\": \"ivo@ivosmail.com\",\r\n\t\"friendsWith\": [{\r\n\t\t\"id\": 100,\r\n\t\t\"name\": \"John\",\r\n\t\t\"email\": \"John@johnsmail.com\",\r\n\t\t\"friendsWith\": []\r\n\t}, {\r\n\t\t\"id\": 100,\r\n\t\t\"name\": \"Rose\",\r\n\t\t\"email\": \"Rose@Rosemail.com\",\r\n\t\t\"friendsWith\": []\r\n\t}]\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<h3>Download the code:<\/h3>\n<p>Will upload to github after a quick sanitize.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>TL;DR;\u00a0I&#8217;ve created a\u00a0serializer that converts DTO&#8217;s (PoJo&#8217;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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-581","post","type-post","status-publish","format-standard","hentry","category-geen-categorie"],"_links":{"self":[{"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=\/wp\/v2\/posts\/581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=581"}],"version-history":[{"count":12,"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=\/wp\/v2\/posts\/581\/revisions"}],"predecessor-version":[{"id":600,"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=\/wp\/v2\/posts\/581\/revisions\/600"}],"wp:attachment":[{"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=581"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=581"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}