Over a million developers have joined DZone.

From Portlets to OpenSocial Gadgets to Progressive Web Apps: Part II

Want to learn more about Portlets, OpenSocial Gadgets, and Progressive Web Apps? Look no further! Here is Part II of Lofi Dewanto's guide on all three.

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

Did you miss out on Part I? Click this link and read it here on DZone.

Implementation Technology with Java

Developing apps for different target systems is expensive. The idea of Progressive Web Apps is great since it saves you writing native apps for each operating system. But still in some cases — at least at the moment — we need to build native apps. For this purpose and to save resources there is the so-called Hybrid Application Development.

There are a lot of Hybrid Application Framework with HTML User Interface out there. The problem with this technique is that the HTML UI does not feel really native. Therefore there is a second type of Hybrid Application the so-called Hybrid Application Framework with Native UI. In this case, you still use the native UI in each operating system and use e.g. the same programming language to cover the rest. As Java is still the number one programming language it is wise to base your platform strategy on Java.

The graphic below shows a comparison between Progressive Web Apps, Hybrid Applications with HTML UI and Native UI in runtime.

Comparison Progressive Web Apps - Hybrid Apps with HTML UI - Hybrid Apps with Native UI

What kind of tools and products does Java offer us to implement the technology above?


Spring Boot and Spring Cloud for the Microservice Architecture. These Open Source products are really mature, production ready and easy to use.

Web Apps Based on Progressive Web Apps

For this type of web app you don't have a lot of alternatives in Java area. A framework like JSF or Grails is not really capable of implementing this feature since you need JavaScript which has to run on the browser side. Using pure Java instead of adding complexity in JavaScript with frameworks like AngularJS could be a plus. For this purpose you can choose following products:

  • GWT - This is still the best Java to JavaScript Open Source transpiler.
  • jsweet - A transpiler from Java to TypeScript/JavaScript. jsweet has different mechanisms of transformation the Java codes to JavaScript from GWT since jsweet uses its own Java libraries to manage the transformation.
  • ST-JS (Strongly Typed JavaScript) - A transpiler from Java to JavaScript, quite similar to jsweet.
  • TeaVM: A transpiler from Java bytecode to JavaScript.
  • DukeScript: A framework to create JavaScript application based on Java. Generally, DukeScript can talk directly from Java to the JavaScript code.
  • DoppioJVM: A Java Virtual Machine written in 100% JavaScript. The idea is to run Java apps in the browser with this virtual machine.
  • Java2Script Bridge RCP to RIA: A converter of Eclipse SWT to JavaScript.

GWT is the most mature product in this category and Google uses GWT in a lot of their products. GWT can be integrated with following UI frameworks: 

Native Apps With HTML UI

Using mGWT and mGWT PhoneGap with skins of Android and iOS: With the same technology Java, GWT and PhoneGap / Apache Cordova you can write a native app with HTML UI. Instead of using this technology you maybe should use Progressive Web Apps technology since HTML UI does not look native anyway. Progressive Web App is just the same and you can write it once for web and mobile.

Native Apps With Native UI

In Android you can implement the native UI just using Java, no special workaround needed.

In iOS, you need to use Objective-C to implement the native UI. Using Open Source product like J2ObjC (Java to Objective-C transpiler) will help a lot to reuse the Java codes

A product like Google Inbox use GWT and J2ObjC to deliver the same functionalities across operating systems (Web, Android, and iOS) on the same time.

Platform Strategy

So how can we define our platform strategy today? Following points are my summary:


If you use Java as your programming language leverage Spring Boot and Spring Clouds for your Microservice architecture implementation. But at the end, you can use different implementation technologies like Java, .NET, and others. It is just important to use the standards in the next point.

Server-side and Business Logic

Use RESTful and JSON for the communication between the mircoservices.

Authentication and Single Sign-On with OpenId Connect and OAuth 2 is a must in this platform strategy so that you are able to integrate all the microservices with all different implementation technologies.

User Interface

Portal and Portlets are dead. Use Progressive Web Apps for any possible apps. If you need to integrate many Progressive Web Apps just use an integration or tool bar just like what Google did with its products (see the Google+ picture above).

If you need Native Apps build them with Hybrid Application Framework with Native UI not HTML UI.

Open Source products to make your life easier for building Progressive Web Apps and Native Apps with Native UI in Java are following: GWT and J2ObjC. Consider them for better productivity and time to market.

A platform strategy today does not need to be based every single implementation in the same language, still if you have a small team emphasis on the same language and Java is still the top programming language available. The next picture at the end of this article shows state-of-the-art implementation technologies for a technical platform based on Java.

Implementation Technologies for a Platform Based on Java

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.


The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}