The document discusses integrating OpenLayers 3 with Google Closure Compiler to enhance JavaScript applications by optimizing code through static type checking and advanced optimization techniques. It covers the benefits of using a custom build for OpenLayers, how to handle common pitfalls, and provides examples of code compilation using Closure tools. Additionally, it outlines resources for getting started and potential future developments in OpenLayers.

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!