Thursday, October 27, 2016

No Place for Dart Language...


It is interesting to see that even Google cannot make Dart - after more than 5 years - as a real challange to JavaScript. At the end Dart is "just" another insignificant programming language and compiles those codes to JavaScript. In this point Microsoft is more intelligent by doing TypeScript which is nearer to JavaScript. Check this article for comparison between Dart and TypeScript: Why did the Angular team choose TypeScript over Dart?

If Google were to invest that amount of ressources for Dart in GWT (Java to JavaScript compiler), which is definitely a very good product and Java is still the number one programming language... I cannot imagine where we are today with GWT.

So I would stick to Java with GWT and if I need to write directly in JavaScript I would use TypeScript. No place for Dart. Just curious, Google seems to be very clear with its target, if a product is not successful, remove it (see iGoogle, Google Wave, etc.). This could also happen to Dart?

Monday, September 19, 2016

Platform Strategy: From Portlets to OpenSocial Gadgets to Progressive Web Apps: State of the Art

Introduction

As the world was still at Java's hand we often define what so called a component-based platform. I had this experience in the year 2000 with OpenUSS (Open University Support System). At that time I had an idea to develop a platform which is extendable using component architecture and J2EE technology (OpenUSS Component Architecture). After a while we saw the birth of portal and portlet technology. Everyone tried to build portlets which can be easily installed in a portal server, all Java based. Do you remember all those portals like Apache Jetspeed, Liferay, JBoss Portal, IBM Webshepe Portal, etc?

After the portal wave there was OpenSocial gadget which is not only specified for Java but generally available for different technology implementations. It uses HTML, JavaScript and REST completely independent from Java. Apache Shindig was an Open Source implementation for OpenSocial gadgets container. OpenSocial gadget was also the main technology for iGoogle, Orkut, MySpace, XING and StudiVZ. With OpenSocial you can integrate web apps in two different ways.

Today you still have those technologies like Portal, Portlet and OpenSocial gadgets but they are not very compelling any longer. iGoogle is dead and nobody wants to use portal and portlet technology in their new web apps. All important web apps today don't use those portals, portlets and gadgets anymore. The growth of these technologies is definitely going down to zero.

Platform

Generally a Platform consists nowadays of two elements:
  • Web App for web browsers: this is today still the most used application. Laptops, desktops, tablets and smart phones users use this type of application.
  • Native App for tablets, smart phones and wearables: only in a few cases you still need native apps for desktops and laptops as webapps are getting better everyday for this use case. The most targeted platforms for smart phones, tablets and wearables today are Android and iOS.
Let's take a look at both elements in detail.

Web Apps

As mentioned above we don't need those portals, portlets and gadgets anymore. Do we still in search for a component-based platform? Do we still need following requirements which were mostly answered by using portal, portlets and gadgets?
  • Aggregate content and applications
  • Integrate across applications
  • Provide a unified user interface
  • Support a unified web application development platform
  • Personalize content and services
  • Deploy a framework for publishing dynamic pages
The answer is yes but the main emphasis moves to different areas. The new trend in web app development is the so called Progressive Web Apps (PWA). Today is more important to concentrate on the user experience instead of the web app itself. Following are the definition of Progressive Web Apps (taken from Google Developers Code Lab):
  • Progressive - Works for every user, regardless of browser choice.    
  • Responsive - Fits any form factor: desktop, mobile and tablet.
  • Connectivity independent - Enhanced with service workers to work offline or on low-quality networks.
  • Native App-like - Feels like an app to the user with app-style interactions and navigation.
  • Fresh - Always up-to-date thanks to the service worker update process.
  • Safe - Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with.
  • Discoverable - Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it.
  • Re-engageable - Makes re-engagement easy through features like push notifications.
  • Installable - Allows users to "keep" apps they find most useful on their home screen without the hassle of an app store.
  • Linkable - Easily share via URL, does not require complex installation.
So the main emphasis was moving from:
  • Portals, portlets and gadgets which were defined to make the life of companies (which delivered the portals, portlets, gadgets) and developers (which write the portals, portlets, gadgets) easier to
  • Progressive Web Apps which make users happy.  
This does not mean that with a progressive web app we cannot deliver the requirements above. Let's take a look at all the requirement points in detail. 

(1) Aggregate content and applications and integrate across applications
With Progressive Web Apps this looks different. You won't have such an integration using portlets. Instead it will be an integration of many web apps using the same toolbar and each web app is working just like a standalone application. Here is a comparison.


Portal and Portlets Integration: netvibes with Portal and Portlets



In a Portal and Portlet integration each portlets can be maximized as a separate web app.
Progressive Web Apps Integration with Google Web Apps: Google+, Inbox, Search, etc.

In a Progressive Web Apps integration each icon defines a web app and it will be opened separately as a standalone web app to follow the rule of Native App-like.

I was a happy user of iGoogle (OpenSocial Gadgets solution from Google), before Google turned it off. In the beginning I thougt that I need to search for an alternative just like netvibes. At the end I don't miss it at all. If I need to get the information I mostly need it in a full screen mode. So at the end I always need the web app in a whole and not only in a small portlet.

(2) Provide a unified user interface
Both types can support a unified user interface. Progressive Web Apps use common UI model like Google Material Design or Bootstrap. Portal, Portlets and Gadgets have mostly a mechanism to use the skins within the Portal Container.

(3) Support a unified web application development platform
This is where Progressive Web Apps play their strength. As long as the web app uses HTML, JavaScript, CSS and REST it can be implemented in different technology stacks like Java, PHP, JavaScript and many more. Since you don't have any "Portal Container" in such a Progressive Web App, you can vertically use your chosen technology stack. Whereas Portal and Portlets deployment is based on a Portal Container. So if you use Tomcat as a container you will have to deploy your portlet inside that Container. Surely you can make a remote service call but it is not the standard case.

(4) Personalize content and services
This is where Portlet shows its strong character. You can turn off and on the portlets for your needs. If you see the Google toolbar above you can also personalized the content. So in this case the Progressive Web App can do the same thing with individual design of its web app. 

(5) Deploy a framework for publishing dynamic pages
This is also possible with both types and the trend goes to Microservice.

As a summary you can still fulfill the above requirements using Progressive Web Apps. Additionally you can build component-based web apps by using the standard Web Components. Some real world use cases for Progressive Web Apps can be seen here:

Native Apps

A platform strategy without taking care of the most used clients (mobile phones and tablets) is simple a failure. Here are the types of the client devices today with their operating systems:
  • Desktops and laptops with Windows, Linux and MacOS: in most cases you just need a web browser (Firefox, Internet Explorer, Edge, Chrome and Safari) with the web apps. There is no need to build native apps for each operating systems, just go for Progressive Web Apps. Here are some facts:
    • Google stops the development of Picasa client app and moves everything to the web with Google Photos.
    • Integrated Development Environment (IDE) like Eclipse would be the one thing that should be natively implemented to run on clients on the top of the operating systems. But this model will also change in the future since Eclipse is beginning using web app as its future IDE: Eclipse Che - Cloud IDE.
  • Tablets with Android and iOS: at the moment you need to build native apps for Android and iOS. But in many cases the web apps with Progressive Web Apps could be the solution since web apps can do almost the same thing as the native apps, especially with the arrival of HTML5.
  • Mobile phones with Android and iOS: as in the tablets area at the moment you need to build native apps for Android and iOS. Because of the screen size it is likely that we need to develop the native apps. But the Progressive Web Apps are doing better everyday (see the picture below and both examples above with Flipkart and Air Berlin).
  • Wearables, gadgets, cars and TV with Android Wear, Android Auto, Android TV, watchOS, Apple CarPlay and tvOS: this is the area where you have to write native apps since the smaller devices won't be able to run a web browser.
Progressive Web Apps with Material Design

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 ressources 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 based 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 wirh Native UI

What kind of tools and products does Java offer us to implement the technology above?
(1) Foundation
(2) Web Apps based on Progressive Web Apps
  • For this type of web apps you don't have a lot of alternatives in Java area. Framework like JSF or Grails is not real 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 a 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: 
  • There is a collection of best practices how to use GWT to implement Progressive Web Apps.So you can write Progressive Web Apps today completely in Java with GWT.
(3) 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.
(4) 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
  • 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:

(1) Foundation
  • If you use Java as your programming language leverage Spring Boot and Spring Clouds for your Microservice archtiecture 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.
(2) 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.
(3) 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 on 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

Monday, March 14, 2016

Programming Introduction for Primary School with ScratchJr, Pico Projector and Google Chromecast

Invitation

I was lucky that my daughter asked me whether I would answer all the questions of her classmates - most of them are nine years old - about my profession. They had "professions" as the topic of their general knowledge lesson. So my daughter told me that they invited teacher, school caretaker, stewardess, nurse and also me software developer. Her classmates and she would ask the invited person some questions. I directly said yes because I think that the new generation needs to be introduced in software stuff especially that the current professions will change a lot in the near future. Reuters had a very interesting article about how Robots and Artificial Intellegence will cost five millions jobs by 2020. In my opinion software development will be much more important by 2020, so this is my chance to introduce my profession to the kids in my daughter's class.

Preparation

In my preparation I thought that I need to show them something cool so I began to google and found this piece of IDE (Integrated Development Environment). Scratch is a great IDE for doing graphical programming language. With Scratch you can show your kids how to write a program in a simple manner. You also can find a tablet version called ScratchJr.

 
I myself really had a fun with this IDE. Now I need two things to be able to run my introduction.

(1) Content of my presentation: I need to prepare my presentation so that all the kids will understand me. For this purpose I'm lucky to have my wife as a primary school teacher. So I asked her how I could show them Scratch in an easy manner so they understand what software developer is doing the whole day. She told me that I have to involve them and create something cool. I also need to think about what are the requirements to become a good software developer. We took a look at Scratch and I should involve them in some these things:
  • I will choose the standard "cat" figure and do some movements with it.
  • One of the kids should choose how many steps the cat should walk to the left or to the right.
  • They also should record the cat sound alltogether.
  • They should choose the second character. 
  • Then the second character should walk and meet the cat somewhere and says "hello cat".
 Afterwards we declare what the requirements are to become a good software developer:
  • Math is a must.
  • Art and creativity are good foundation.
  • Endurance will help a lot.
That's it! Now I need to go to the next preparation point.  

(2) Technical possibilities in the classroom: to be able to show ScratchJr and programming in the classroom I need to prepare some technical things. It is a pitty that in the classroom there is no projector so I need to bring all the things by myself. Generally speaking, computer equipments (tablets, internet and projector) in primary schools in Germany look really horrible. In 2014 only six percent of primary schools in Germany has a tablet equipment in their classroom. Following gadgets will help me a lot:
  • An Android tablet with WiFi where I could install ScratchJr.
  • A small projector something like Aiptek Pico Projector.
  • A Google Chromecast: this is an important part so that I can connect from my tablet wirelessly to my small projector, no need to use HDMI cable. My Samsung tablet does not have a HDMI and neither a MHL (Mobile High-Definition Link) connector.
  • An Android mobile phone with internet access, so that the tablet and the Chromecast stick can find each other.
  • A power bank to supply the power for Chromecast and the Pico projector as I know that it would be impossible to get a power supply in the classroom.
Here is how my technical setup looks like:


I need to re-initialize the Google Chromecast to find the WiFi from my mobile phone but that was quite easy and just in a short time I could mirror my tablet screen with ScratchJr through Google Chromecast to my Pico projector. So I can use my tablet without any cable! Amazing, very easy and I really did not expect this.

One thing I recognize: I need to have a good internet connection from my mobile phone since Google Chromecast needs an internet connection.

At the end of the day I'm prepared with the content and the gadgets so I was really looking forward to show this to my daughter's class.

Execution

At the D-Day I was well prepared, every single gadgets was fully charged, as I know, without power supply I need to be secure that all the gadgets can work independently from the power supply. I also need to put my mobile in the near of the classroom's window to get a good internet connection. I also need helps from the kids to get some books to put the projector on the top of them, so that it can show the ScratchJr user interface just in the middle of their blackboard.

After showing them the ScratchJr and let them decide some things as I planned above, I got an interview round, so they could ask me all their questions about the profession as a software developer. Here are some questions:
  • How long do you need to study to be able to execute your profession?
  • In what age did you start programming?
  • Why do you like your profession?
  • What characteristics are important to do your profession?
  • Can I use iPad to play with ScratchJr?
  • I like to play games, do you know someone who also develops games?
  • Could you please tell the developers of Minecraft to solve some of my problems?
I had a lot of fun showing ScratchJr and answering all the questions for about 45 minutes.

End of Story

At the end, I think, I managed to excite the kids to see how easy graphical programming could be. ScratchJr or Scratch is the best IDE I found sofar for this purpose. It is quite similar to Android App Inventor which is designed for Android application development with graphical programming language. Google Chromecast and Pico projector help me a lot to tackle the infrastructure in the classroom. Without a demonstration with ScratchJr I won't be able to explain what a software developer is actually doing the whole day. At the end of this story I want to encourage all fathers and mothers who are software developers to show your children and their classmates that writing software is really cool! As Marc Andreessen said "software is eating the world", so we need more intelligent software developers!