Choosing the framework to an IDE type of web gui

Question

I'm pretty newbie (or maybe oldie) with GUI development. Now when digging in, there seems to be massive amount of different frameworks to use. Currently I have built a java application which scrapes all kind of file and application meta data to a PostgreSQL database. This part is now pretty much ready and the data (around 20000 rows) is sitting in server database waiting for further usage. I assume that eventually there could be hundreds of thousands of rows in the database in handful of tables, maybe million or two max.

One road would have been continuing with Java Swing/FX, but the front-end should be really OS independent and easily to approach which points to web based solutions. Seems that applets are pretty old stuff and also JSF have plenty of viable competitors by now. The requirements for the gui are:

• About four sections in a single page. Layout something like Eclipse or Netbeans IDE.
• One of the section has a traversable filesystem type of tree map eg. JsTree.
• The main section has an interactive graphical map with nodes and edges etc. Currently looking Graphstream as one candidate for this
• Simple detail information table on the bottom of the page.
• Three of the sections should interact with each other when user clicks something eg. clicking a node gives detailed information of it in the bottom section (triggering a query against database)
• Currently there are no plans to give user possibility to change the data she/he is viewing
• Trying to keep this in single page, but can probably grow to multiple pages in the future.
• Need to have some authorization system and also keeping it secure through viewing. Currently have only a user table in DB with hashed and salted passwords.

First thought was to build this purely on server; building all the tree maps etc based on user requests. However, with several users this probably would generate a significant load on the server side. Therefore thought if there would be just minimal amount of server side code logic, just to secure/isolate the database queries, forming the main HTML/CSS stuff and then have embedded Javascript logic drawing the graphics, interpreting user inputs etc. on the client side? Currently one mystery is that how would these two worlds communicate with each other, I mean how the javascript part request the information from the server side? Does it require websockets or could some of the server side application logic act like a REST/API interface to the javascript code? Maybe just have a jersey/swing REST middleware Java "something" between the database and web page providing JSON data to Javascript logic. Playing now with Hibernate but not sure if it would fit in to this scenario...

Have written code in Java, C, Python, JS and some ancient other languages + little Node.js, PHP and Perl. Prefering Java and JS, but if there's good reason using something else, it shouldn't be a problem. Currently using Netbeans (occasionally Eclipse) and have investigated some of the Web, JavaFX, HTML5, JSF, Maven example projects it has. Have also tried to research Spring, Hibernate, Vaadin, Wicket, JSF and whatnot frameworks. Everyone is telling how easy and superior they are, but the more I read/test these, the more it seems that they aren't always that helpful by creating all kind of extra code here and there. So after days of investigation, I'm still very lost with all these possibilities and before getting forever lost to this jungle, I thought that maybe some guru here could point out which path this n00b should take? Just trying to avoid the situation where half of the stuff is done and then need to change framework because missing some feature or maintenance is getting overwhelming.

Answer 1

Java Applets

The Java Applet route is nearly dead. All the web browser makers are phasing out support for Java Applet and similar plugin execution environments such as Flash and Silverlight because of horrendous security problems.

Likewise, within Java, Applet technology is now deprecated, and likely to be phased out eventually.

Swing/JavaFX

If you are already making progress in building a Swing/JavaFX app, there is no reason to not ship that. Such an app is certainly cross-platform. With Java Modularization being done in Java 9/10/11, you can use tools like jlink to create a customized build of a JVM to be bundled with your app as a single executable.

Vaadin

If you decide a web app is the way to go, and you already have Java skills, then Vaadin is the obvious choice. Vaadin runs in Java with the state of your app living on the server-side in the JVM. You write both your business logic and your user-interface code all in pure Java. The Vaadin framework installs a JavaScript library on the client thorough which a dynamically-created web-standards UI is rendered remotely on the client-side.

The communication between client and server is handled automatically using Java Servlet technology, HTTP, HTTP/2, and WebSocket, depending on the capability of your web browser, web server, and network capabilities.

As for sections of your UI layouts coordinating and reacting to user-interactions, that is the very purpose of Vaadin. User clicks a button or types in a field, Vaadin transmits that user-event to the server-side Java app where your code reacts and updates state of other widgets. Vaadin automatically communicates the new condition of those other widgets back to the web browser where their visual display is updated.

As for a tree widget, Vaadin 8 already provides two, a Tree and a GridTree.

As for your Java-based graph visualizer, that is a problem. With Vaadin, there is no Java on the client-side. The client-side uses only web standard technologies such as JavaScript, CSS, DOM, AJAX, etc. If your GraphStream library can run headless, then you should be able to render on the server-side with a finished image shipped to the web browser for display.

If you need interactivity, you will need to find a JavaScript tool equivalent to GraphStream. Such a tool can be wrapped as a Vaadin widget to be accessed on the server-side in Java. In Vaadin 8, this wrapping is done through GWT, Google Web Toolkit. In Vaadin 10 and later, known as Vaadin Flow, such wrapping becomes much easier by adoption of Web Components technology instead of GWT.

You mentioned Hibernate, but is irrelevant to your Question. That project is primarily for automating some interactions with a database. Has nothing to do directly with user-interface or the greater app. Some ancillary sub-projects such as Bean Validation implementation serve a purpose in between the UI and database.

Just trying to avoid the situation where half of the stuff is done and then need to change framework because missing some feature or maintenance is getting overwhelming.

With any choice in technology, you should focus on doing a throwaway proof-of-concept before embarking on the real implementation. Build a fake app that partially touches on all the areas planned in your app. Exercise each piece of technology to be sure it suits your needs. Once proven, discard that fake app and start again fresh with confidence that you can accomplish your mission.

Answer 2

Thanks @Basil for your comprehensive answer. Have been doing just like you said by trying different approaches with small amount of test data. First journey was PHP which I shortly discarded because PHP feels just somewhat clunky, security is little bit questionable and future maintenance with growing site complex can get tedious. Now have been playing with Vaadin some while and it feels quite a good option. Community support could be better and still little bit lost with its hierarchy, internal functionality and with all the new fancy Java notation 1.8 has brought to the table(!) :s

However, I'm still balancing between web gui and desktop app. Building a ide type of web app seems much more complicated than similar classical desktop app. Swing/JavaFX is therefore still on the table as fallback option if the web gui building gets too complicated.