OpenLayers 3 uses the Closure Compiler to compile JavaScript to better JavaScript. Developed by Google, the Closure Compiler is more than just a code minifier. Variable and function names are not only shortened, based on static code analysis a number of optimizations are applied, like dead-code removal or function inlining. Of special interest is the type checking and a syntax check which allows to detect errors at an early stage which otherwise would only emerge during runtime.
You can use OpenLayers 3 without getting in touch with the Closure Compiler. But once you compile your application together with OpenLayers, you will benefit from a few interesting advantages. First, because the compiler removes unused code, only that part of OpenLayers that is actually used in your application, will be included in the build. Because only a fraction of the extensive functionality of OpenLayer is often required, the build size can be reduced considerably which results in faster loading times.
The compilation of your application together with OpenLayers also makes it easier to extend OpenLayers with custom components. Notably, the application code is also analyzed and checked by the Closure Compiler, so that you benefit for example from the type checking. This talk introduces the Closure Compiler, which offers a robust platform for the development of complex web-mapping applications with OpenLayers. Advantages, special characteristics and experiences from own projects are presented.
15. WHY TYPES?
Static type check
var point = new app.Point([0, 0]);
ERR! compile src/main.js:14: WARNING Function app.P
called with 1 argument(s). Function requires at lea
2 argument(s) and no more than 3 argument(s).
ERR! compile var p5 = new app.Point([0, 0]);
ERR! compile ^
ERR! compile
ERR! compile src/main.js:14: WARNING actual paramet
app.Point does not match formal parameter
ERR! compile found : Array
ERR! compile required: number
ERR! compile var p5 = new app.Point([0, 0])
ERR! compile 0 error(s), 2 warning(s)
ERR! compile 95.5% typed
17. USING EXTERNAL LIBRARIES
Compile with application
library must be compatible to Closure Compiler
Reference library outside compilation
compilation requires an externsfile
<script type="text/javascript" src="libs/jquery.min.j
<script type="text/javascript" src="build/app.js"></
20. SIMPLE EXAMPLE WITH OL3
goog.provide('app');
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.layer.Tile');
goog.require('ol.source.OSM');
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({source: new ol.source.OSM(
],
view: new ol.View({center: [0, 0], zoom: 4})
});
22. TOOLING
compiler.jar
Closure Compiler as Java CLI tool
closure-util
npm package, wrapper around compiler.jar, dev. server
closure-utilbuildconfig.jsondist/app.js
closure-utilserveconfig.json
23. WHY COMPILE WITH OPENLAYERS?
Only pay for what you use (build size)
Easier to extend OpenLayers
Benefit from the advantages of the Closure Compiler
(static/type checking, efficient code, ...)
27. RESOURCES: HOW TO GET STARTED
OpenLayers 3 Tutorial: Compiling Application with Closure
Compiler
Google Closure Documentation
Book: Closure - The Definitive Guide by Michael Bolin
Annotating JavaScript for the Closure Compiler
Google I/O 2011: JavaScript Programming in the Large with
Closure Tools
Externs files
Compiler options
closure-util
More resources
Examples used in this talk
28. FUTURE / ALTERNATIVES
Support for ES 6 modules in OpenLayers 3 (module
bundlers: tree-shaking)
Closure Compiler is a transpiler (ES 6 > ES 5)
TypeScript