Software Engineering

Objective

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

Target Audience

Developers new to modern javascript frameworks and tooling

Source Documents

Closure Compiler
google-closure-library
closurecheatsheet

Summary

The Closure Compiler transpiler takes ECMAScript 2015 to optimized, minified ES3. The google-closure-library is notable because it is used to build Gmail and other top level google applications like Google Docs. The compiler is a Java application based on Rhino from Mozilla with an associated set of python tools sometimes refered to as closure build tools. The closure compiler was one of the first transpilers for ECMAScript and is constantly evolving, for exampe. the use of the python tools is now depreciated and the documentation appears to lag the actual state/capabilities of the latest version. To complicate the terminology there is now a pure javascript closure compiler with interfaces for webpack and gulp. However I encountered difficulties with the javascript compiler and the closure widgets. The compiler allows for compression, mangling and optimisation( dead code removal, function flattening and inlining).There is an Advanced mode which is aggressive (dead code removal allows for removing unused code across modules) and will often will break your application unles you implement the following,

• By configuring externs you can use the compiler with other frameworks like JQuery. Anything declared as an Extern is excluded from the optimisation.

• There is an annotation system to exclude properties from optimisation.

Result

See the Demo app for closure
The demo code has a number of configuration options see see top level readme for general instructions. In particular installing a local jre on windows to run the compiler if no jre is installed in the system.

Transpile

Use the following one line command to run the compiler

java -jar compiler.jar --compilation_level=ADVANCED --closure_entry_point=dev.app --only_closure_dependencies --js=./node_modules/google-closure-library --js src/main.js --js src/component.js --js_output_file dist/app.min.js

Test

open Test.html

Discussion

The Closure compiler knows about the semantics of JS and generates low-level wrappers and checks for the transpiled code. It implements the javascript semantics to achieve type safety. Consider the class component, and its constructor at line 15 and type inheritance at line 26.

The compiler also acts as a build tool assembling the application’s dependencies into a bundle. Consider the fragment from the compiler flag values

--js=./node_modules/google-closure-library --js src/main.js --js src/component.js

1. --js=./node_modules/google-closure-library imports the dependencies for main.js and component.js from the closure library
2. here component.js is a dependency of main.js see main line 46
3. the output file app.min.js contains the application’s entry point and all needed dependencies from the library as well as custom components.
4. the output file app.min.js is the single import required for the html

previously to assemble the dependencies you would use the python script depswriter.py but this is no longer required something not hilighted in the documentation

More Details

To clarify the relationships in the above code.

1. The python scripts are no longer required
2. The compiler can perform aggressive optimisations with externs and annotations for preserving type names when required
3. the compiler assembles a bundle with all included dependencies

Demo app for closure

Demo app for all series parts