Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

OpenLayers 3 & Google Closure Compiler

701 views

Published on

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.

Published in: Software
  • Be the first to comment

  • Be the first to like this

OpenLayers 3 & Google Closure Compiler

  1. 1. Faster, smaller, better Compiling your application together with OpenLayers 3     Tobias Sauerwein - Guillaume Beraudo Camptocamp  
  2. 2. CAMPTOCAMP
  3. 3. How do you like your OpenLayers?     full build (ol.js) custom build compiled with application  
  4. 4. JavaScript development today
  5. 5. CHALLENGES OF WRITING LARGE JS APPLICATIONS namespaces/modules? visibility control? type checking? static checking? testing?
  6. 6. GOOGLE CLOSURE TOOLS Google Closure Compiler Google Closure Library
  7. 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. 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. 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. 10. EXPORTS <button onclick="app.doSomething()">...</button   How to prevent that app.doSomethingis renamed or removed?   /**  * @export  */ app.doSomething = function() {     ... };
  11. 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. 12. JSDOC TAGS: A SELECTION @const@constructor@enum@export @extends@final@implements@interface @nosideeffects@param@private @protected@return@throws@type...   Reference
  13. 13. Why bother with types?
  14. 14. WHY TYPES? Understanding code entries.forEach(function(entry) {   entry.data.validate(); }); What does this code do?
  15. 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. 16. WHY TYPES? IDE integration, refactorings
  17. 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. 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. 19. And OpenLayers?
  20. 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. 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. 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. 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. 24. BUILD SIZES
  25. 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. 26. Learning curve?
  27. 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. 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. 29. THIS TALK Slides bit.ly/ol3-closure   Find us on GitHub/Twitter Tobias: @tsauerwein Guillaume: @gberaudo
  30. 30. CREDITS FOR THESE GREAT PHOTOS!

×