Software Engineering

Objective

Simple demo code for transpiling to Javascript. Review the setup and configuration for different transpiler engines.

Target Audience

Java Developers new to modern javascript frameworks and tooling

Source Documents

gradle wrapper gradle-node-plugin jsweet transpiler
TypeScript language
TypeScript Declaration File
TypeScript type
TypeScript namespace
ECMA-262 6th Edition
ECMAScript 5

Summary

Writing high-performance JavaScript is a challenge, many tools and Javascript dialets exist, for new developers the nomenculture can be confusing and npm is Massive. This is part 1 of a series where a simple code for three(3) different transpiler engines is laid out.

Result

See the Demo app for jsweet
The demo code has a number of configuration options. See see top level readme for general instructions. The Demo app for jsweet needs node on the path. If you use the gradle wrapper then you will need to run the wrapper from the top level directory.

Transpile

1 build the java source `./gradlew :jsweet:build`
2 transpile  `./gradlew :jsweet:jsweet`  

Test

1 assemble the artifacts ./gradlew :jsweet:deployStatic
2 open Test.html in the jsweet module staging directory

The deployStatic task creates a staging directory with all the artifacts assembled.
Loading Test.html results with the correct relative paths for the bundled Javascript transpiled from Java.

Discussion

Typescript is a strongly-typed modular language. JSweet works by leveraging Typescripts type and module system. We can see this if we examine the output for each stage of the transpile pipeline

Java Package and class declarations

package app.dev.transpile
import ....
  class ConcurrentSpinner { ....
    public static void main(String[] args) { ....

Typescript internal namespace and class declarations

namespace app.dev.transpile { ...  
  export class ConcurrentSpinner { ...
    public static main(args : string[]) { ...    

javascript function declarations

(function (app) { ...
    var dev;
    (function (dev) { ...
        var transpile;
        (function (transpile) {
            var ConcurrentSpinner = (function () { ...
                function ConcurrentSpinner(spinner) { ...
    
                ConcurrentSpinner.main = function (args) { ....
                    window.onload = function (e) {
                        return new ConcurrentSpinner(document.getElementById("spinner"));

we can see a clean 1 to 1 mapping from the Java to the Typescript, things become slightly less clean from Typescript to Javascript with the javascript constructor function and the main method as a prototype extension. However this is just verbosity and the one to one map is maintained from Java to Javascript.

More Details

To clarify the relationships in the above code. Java’s strong types and packages map to Typescript cleanly. Typescript is a superset of ECMAScript 2015 ECMA-262 6th Edition. ECMAScript 2015 defines modules and class. Typescript was designed to transpile to what we today describe as Javascript but in this context we are refering to ECMAScript 5.

Javascript Fatigue

Using software engineering tools we need to harmonise the relationships between the javascript dialects. For large scale Javascript applications Java shops can use frameworks like jsweet and tools such as the gradle-node-plugin for rapid development using a large set of the more prominent elements found in npm is Massive. Microsoft’s Typescript is a bridge between ECMA-262 6th Edition, Java and ECMAScript 5. In the next part we will clarify the issues around transpiling of Google closure.

Demo app for jsweet

Demo app for all series parts