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.

1. Faster, smaller, better
Compiling your application together with
OpenLayers 3
Tobias Sauerwein - Guillaume Beraudo
Camptocamp

2. CAMPTOCAMP

3. How do you like your OpenLayers?
full build
(ol.js)
custom build compiled
with
application

4. JavaScript
development today

5. CHALLENGES OF WRITING LARGE JS APPLICATIONS
namespaces/modules?
visibility control?
type checking?
static checking?
testing?

6. GOOGLE CLOSURE TOOLS
Google Closure Compiler
Google Closure Library

7. GOOGLE CLOSURE COMPILER
compiles JavaScript to better JavaScript
code checks (syntax, variable references)
checks for common pitfalls
static type checking
Transpiler (ES 6 > ES 5)
advanced optimizations (inlining, dead-code)

8. DEAD-CODE REMOVAL + INLINING
goog.provide('app');
app.printHello = function() {
console.log('Hello');
};
app.someUnusedFunction = function() {
console.log('Unused function');
};
app.run = function() {
app.printHello();
};
app.run();
Compiled
(function(){console.log("Hello");})();

9. RENAMING
goog.provide('app');
function hello(o) {
alert('Hello, ' + o.firstName + ' ' + o.last
}
app.run = function() {
var person = {firstName: 'New', lastName:
hello(person);
console.log(person);
};
app.run();
Compiled (pretty_print)
(function(){var a = {a:"New", b:"user"};
alert("Hello, " + a.a + " " + a.b);
console.log(a);
})();

10. EXPORTS
<button onclick="app.doSomething()">...</button
How to prevent that app.doSomethingis renamed or removed?
/**
* @export
*/
app.doSomething = function() {
...
};

11. TYPE ANNOTATIONS
/**
* @constructor
* @param {number} x X.
* @param {number} y Y.
* @param {number=} opt_z Z.
*/
app.Point = function(x, y, opt_z) { ... };
/**
* @param {!app.Point} other An other point.
* @return {number} The distance.
*/
app.Point.prototype.distanceTo = function(other)

12. JSDOC TAGS: A SELECTION
@const@constructor@enum@export
@extends@final@implements@interface
@nosideeffects@param@private
@protected@return@throws@type...
Reference

13. Why bother with types?

14. WHY TYPES?
Understanding code
entries.forEach(function(entry) {
entry.data.validate();
});
What does this code do?

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

16. WHY TYPES?
IDE integration, refactorings

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"></

18. EXTERNS FILES
var map = L.map('map').setView([0, 0], 13);
ERR! compile src/main.js:4: ERROR ­ variable L is und
externsfile
/** @const */
var L = {};
/**
* @param {string} div
* @return {LeafletMap}
*/
L.map = function(div) {};
/** @constructor */
var LeafletMap = function() {};
...

19. And OpenLayers?

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})
});

21. COMPILER CONFIGURATION
{
"lib": [
"node_modules/openlayers/src/**/*.js",
"node_modules/openlayers/build/ol.ext/**/*.js",
"src/**/*.js"
],
"compile": {
"closure_entry_point": "app",
"externs": [
"node_modules/openlayers/externs/bingmaps.js",
...
],
"define": ["ol.ENABLE_DOM=false", "ol.ENABLE_WEBGL=false
"compilation_level": "ADVANCED",
"output_wrapper": "(function(){%output%})();",
...
}
}

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, ...)

24. BUILD SIZES

25. EXAMPLE PROJECTS
(ol3 + Cesium)
(ol3 + Angular)
(ol3 + ngeo + Angular)
(ol3 + Angular + Cesium)
(ol3 + ngeo + Angular + Cesium)
(ol3 + ngeo +
Angular)
...
openlayers/ol3
openlayers/ol3-cesium
camptocamp/ngeo
Geoportail-Luxembourg/geoportailv3
geoadmin/mf-geoadmin3
SwitzerlandMobility
camptocamp/provelobern_bicyclerouteplanner

26. Learning curve?

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

29. THIS TALK
Slides
bit.ly/ol3-closure
Find us on GitHub/Twitter
Tobias: @tsauerwein
Guillaume: @gberaudo

31. CREDITS FOR THESE GREAT PHOTOS!