Java to Javascript overview

Here you can learn how to convert Java to readable Javascript in a customizable way, using a flexible framework builder.

It's built one very flexible and powerful web framework so far but has all of the building blocks for any custom environment.

The download size can be reduced a lot by splitting up some of the existing framework layers so that it's only included if you use those features.

Getting Started

This assumes you've installed the scc command in getting started.

First install the coreFramework bundle of layers in the bundles directory. From this directory:

(cd bundles; git clone https://github.com/stratacode/coreFramework)

Put the StrataCode/bin directory in your path. Create the file:

@sc.js.JSSettings(jsModuleFile="js/sample.js")
myLayer extends js.allInOne.main {
}

Put ordinary Java files in the myLayer directory, add a main with @sc.obj.MainSettings like this

public class Foo {
   // run when the web page loads
   @sc.obj.MainSettings
   public static void main(String[] args) {
      System.out.println("*** hello from javascript!");
   }
}

From this directory run:

 scc -v -a myLayerGroup.myLayer

it should open the browser to an index page and the JS console will contain the "System.out.println" calls made in the code.

See the generated javascript file in the module declared above: js/sample.js file from "Source" view in the browser, or on the file system in the build directory: build/myLayerGroup_myLayer/web/js/sample.js.

In this sample, the myLayer.sc file contains the @JSSettings annotation which affect how the files in that layer are converted to Javascript. All files in this layer are converted to JS and put into this module. All modules references by a given application are included automatically in the resulting page. Modules cannot extend classes in other moduls that already depend on the first module.

The 'main' class is added as an entry point during the build process and all referenced code is included in the "main.js" file, unless it's put into a module.

Look in bundles/coreFramework/js for the layers that control the Java to JS conversion.

TODO: The js.core layer could be split up to separate out the webFramework more cleanly to reduce the download size for java to js applications that don't use it.

The layer myLayerGroup.myLayer extends the js.allInOne.main layer which puts all of the code in your project into a single set of Javascript files. The web framework uses js.appPerPage.main. There should be a set of framework layers for Node.js as well.

Read the intro article

See the javadoc

Read more about customizing the generation in the framework documentation

Mapping Java classes to JS files

There are two basic ways this works. You can use the JSSettings(jsModuleFile=) annotation to specify a fixed Javascript file for a collection of classes (or individual class). This works great for libraries where you want to share the code between different applications, or want to control the file mapping.

If you do not assign a JSSettings(jsModuleFile) annotation, only code which is accessible via an entryPoint class is included in the JS file for the entry point. This is a nice way to selectively drag in only the code used and build up one big JS file with all of that code.

When you set jsLibraryFile on the JSSettings annotation, it is not converted, but instead the library file is expected to include a native implementation of the Java class (i.e. authored in JS).

There's a way to replace method and field names if there are any naming conflicts. If a class has a field and method with the same name, that's automatically handled by adding an _ to the field name.

Important Files

• js/jvsys.js - generated Java java.sys, java.util classes from Apache 8 Java classes in coreFramework/js/sys - Note these files are named '.scj' only for the IntelliJ plugin so they are mapped as StrataCode files, not the native Java engine.
• js/javasys.js - natively written Java classes java.sys, java.util classes (copied from coreFramework/js/core/js)

• js/sccore.js - core functions used in the generated JS templates (also from coreFramework/js/core/js)

• js/tags.js, - not used in this sample - the SC web framework. TODO: create a base-layer which does not include this and other SC framework JS files so the converter is usable without this dependency

• /home/myProj/bundles/coreFramework/js/prebuild/JSTypeTemplate.sctjs - this is a Stratacode template file which is used to generate a JS class from a high-level code model object. By replacing this template, you can change many aspects of the generated Javascript code, even how classes are defined. There is also handwritten code using these apis that might also need to be changed if this template is changed in an incompatible way. Other customizations can be done through annotations or by using the APIs provided in the StrataCode language runtime.

• /home/myProj/bundles/coreFramework/js/sys - the layer that contains the Java system files, used to build js/jvsys.js