Compiling to JavaScript
It is great that we have our enhanced text editor application running in Dartium, but that is not what most web users have installed. What if I want to use it in my daily-driver web browser; for example, Firefox or Internet Explorer?
In order to run on the entire modern Web, Dart code can be compiled via a tool called dart2js (written in Dart) to high quality and performance JavaScript. This can be run as a pub command:
pub build --mode=release
We first encountered this tool when we toured the SDK's command-line tools in the previous chapter. For easy use during development, it is accessible from WebStorm.
In WebStorm's Project tab, right-click on the pubspec.yaml file, and select Pub: Build .... The mode option is then presented for Release or Debug—for production, choose Release. This creates a folder called build with the JavaScript version of the program. This can be served by any web server and used from any modern browser:
It may be surprising, if text was entered in the Dartium version, that the editor is blank when run from a regular browser. One downside of using local storage is that each web browser has its own independent storage and the user will have to re-enter data if they switch browsers, even if they are on the same computer.
Minification of JavaScript output
The output files from the dart2js compiler can get quite large if certain advanced Dart features are at play, such as mirrors, which are used for reflection (sometimes called introspection).
Fortunately, the default setting of the Dart editor is to produce a minified output. There is always the overhead of the Dart runtime in the JavaScript that is disproportionately large for small applications. As Dart has all the source code ahead of runtime and knowledge of the entire application, it can compile all the code (including packages), determine which are not required, and then, within the packages that are used, remove any parts that are not used.
This sophisticated technique is called tree shaking. Any unused code is shaken off and not included in the final application that is delivered to the end user, keeping it quick to load and execute. Compare this with JavaScript, where if a library is referenced, then the entire library is sent to the client for interpretation.