Isomorphic Web application using Java 8, Nashorn and React

I started with a little prototype on Isomorphic web applications. The goal is pretty straight forward: Create a Web application, based on open source software that can be compiled and run with as little effort as possible. The Web application should provide plain HTML that is readable without any java script (e.g. for search engines) but that can be enriched with Javascript without additional effort.

Technologies

I do not want to give deep introductions into the technologies, so please consult the documentations if you need deeper insight into any third party library, I will always link the websites.

Rendering

On of the goals is to render the website on the server to provide plain HTML output to the browser. Usually this leads to complexity when you wan’t to enrich the server generated HTML with JavaScript on the client. You need defined points where the JavaScript can modify the HTML, either using jQuery, Knockout or Angular bindings or whatever technology you are using. As soon as you want to load some data dynamically after page load, it is not in the initial HTML and therefore not visible for search engines.

In a normal setup you have most likely two view engines. For example JSP on the server and AngularJS (or just jQuery) on the client. For every peace of HTML you need to decide if you want to render it on the Server, on the Client or both. Rendering it on the Server makes it harder to modify for the Client. Rendering it on the Client requires JavaScript, Rendering it on Client and the Server would be optimal, but most likely means duplicated code.

This is where Facebook ReactJS comes handy. React helps to abstract the DOM structure from the actual DOM in the browser by providing a virtual (in memory) DOM, so it enables you to render a page on the server side and just pass the HTML to the client where the same JavaScript code can further Work on the real DOM. So we end up with a single view engine, that works as soon as we can execute JavaScript on our Server. With Java 8 and Nashorn this is possible.

Some of you might ask: Why not NodeJS? And I think the question is legit. The reason for me is simply that I already tried the same setup with NodeJS, but I strongly believe, that Java is still a more major technology and with Java 8 and Nashorn it is the way more enterprise ready approach.

Building

Since we are in the Java world, Maven is the tool of choice. In the first version it is only used for the Java dependency so building needs some more steps. But the goal is to create everything with a single „mvn clean install“.

To resolve JavaScript dependencies we use Bower. To package the JavaScript files into Bundles using Browserify and minimize it using UglifyJS we use the task runner Grunt.

In the next step Grunt can be executed during the Maven build process. Yet we need to call „grunt default“ to get the JavaScript dependencies and package our own sources.

Deployment

For deployment I like to use Docker. Yet I lack some experience with it. Especially getting it in place with Maven needs some more research on my side. So there is no Docker setup yet.

A minimal prototype

I created a public bitbucket repository where you can see the current source code. You can check out the tag tag Minimal_Serverside_Showcase.

I try to explain most things inside the readme files. But some additional words about the structure here:

In the root directory you will find all the files requered to build the project, like the pom.xml for Maven and Gruntfile.js and package.json for NPM and Grunt.

All sources are in the src folder like in a classical Java project. It contains a Java folder with all the java sources and a javascript folder with all the javascript sources, for both server and client side. The trick with browserify is, that we create two bundles: one for the server „server-bundle.js“, generated from „server.js“, and one for the client „client-bundle.js“, generated from „client.js“ both use some shared code from „shared.js“. Thats how we can provide e.g. a console implementation for nashorn that is not needed on client side and how we share the view between the server and client.

The resources folder contains the generated sources that are actually used by the application at runtime.

 

So that’s it for now. I might expand this blog post in future or write further articles when the prototype grows. Feel free to give some feedback or share some knowledge about the topic(s).

 

 

 

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *