STG javascript-backend-visualization

The core idea behinds this repo is to create a tooling for graphical analyze jsexes generated by GHC javascript-backend. Currently it does not produce commonjs/umd/amdjs compatible modules, so, it complicates answering on the quesion why something is used by anything. We need a way how to determing answers on such quesions if we want to deal with large bundle sizes.

Motivation

This project started as an attempt to shed the light on reasons why javascript hello-world bundle requires unicode table to have built-in. At first glance we should not have it built-in, we just want to write "Hello, World!" into the console. We do not query unicode table here for anything. Just printing the text. So, why should we pay 3.5mb additionaly for printing "Hello, World!"?

How to use generated output?

Take a look into /out directory. It contains generated files for easier changes tracking.

Special notes over implementation details

We prevent inlining some functions such h$rawStringData for easier unicode extraction. We need extract unicode because its volume too hight to be processed by python tool. Sorry, I am not a good Python developer. :-)

Functions such as h$o, h$sti, h$stc, h$stl threated specially: arguments passed to them are connected to the graph same as it would be a functional call dependency.

Graph data contains special tag meta= over edges to uncover which connection type is used. It is named as such special functions or call when usual function call is used to determine the call graph dependency.

How to generate output?

Installation

To make scripts work you need to have

1. Builded GHC javascript-backend (with emscripted)
2. Google Closure Compiler

Generate

If you have all tools installed and prepared above you can try to execute the following (suppose ghc sources located at one level above and has folder name ghc-js):

./trace_gv.sh ../ghc-js/_build/stage1/bin/javascript-unknown-ghcjs-ghc

It will regenerate out with new actual content.

• out/all.js Origin generated bundle by GHC javascript-backend.
• out/all.no_comments.js Origin generated bundle by GHC javascript-backend but with stripped comments by Google Closure Compiler.
  • out/all.no_comments.js.tree Google Closure Compiler AST.
  • out/all.no_comments.js.gv Call graph with attention to STG references reconstructed from AST.
• out/all.min.js Minified bundle by Google Closure Compiler from out/all.js with ADVANCED_OPTIMIZATIONS enabled.
  • out/all.min.js.tree Google Closure Compiler AST for minified bundle.
  • out/all.min.js.gv Call graph with attention to STG references reconstructed from minified bundle AST.

Usage

The most intetesting part is contained in files out/all.no_comments.js.gv and out/all.min.js.gv. You can use Gephi to open them for visual navigation and manipulation.

Visuals

Depending on what you are making, it can be a good idea to include screenshots or even a video (you'll frequently see GIFs rather than actual videos). Tools like ttygif can help, but check out Asciinema for a more sophisticated method.

Roadmap

For the future it would be nice to extract characters accumulated count over code entities and append this information to graph nodes. It would allow to visually show how much each code entity takes in overall bundle size.

Contributing

If you find this project useful for your own research let me known what can be added or improved via tickets. MRs are welcome as well.

Project status

Probably no much changes are expected there. The project had single aim and was created to dump research results.

License

Apache License 2.0