1. 1 Web GIS: from Javascript to GWT Pieter De Graef – Community Manager & Lead Developer Geomajas

2. 2 Agenda Geomajas introduction Problems: javascript, browsers, SVG, VML Alternatives GWT pros and cons Conclusion

3. 3 Introduction Geosparc commercially supports Geomajas, the Open Source GIS application framework, coupling the innovation of Open Source with the reliability of a true enterprise-class platform. www.geosparc.com

4. 4 Open Source GIS application framework It is downloadable at http://www.geomajas.org/ Integrated client-server architecture Geometry editing + validation Custom attribute definitions Advanced querying capabilities

5. 5 Geomajas

6. 6 History Start in 2007 Objective: create a generic GIS application framework Technological choices: Java Ajax – Dojo No browser plugins Open Source technologies such as GeoTools, Hibernate,...

7. 7 Problems all around! Browser compatibility SVG versus VML General Javascript quirks

8. 8 Javascript quirks Let's start with an example... The following if statements are all evaluated as false; we don't reach the bracket code. If (0) { /* 0 is evaluated as false */ } If (null) { /* null is evaluated as false */ } If (undefined) { /* evaluated as false */ } If ('') { /* empty string is evaluated as false */ }

9. 9 Javascript quirks Now let's try the following: False == 0 result is “true”, as expected False == '' result is “true”, as expected False == undefined result is “false”.... what the... ? False == null result is “false”.... what the... ?

10. 10 Browser incompatibilities Javascript differences between browsers Example: comma at the end of a list (FF <> IE) DOM document differences Example: IE style vs currentStyle vs runtimeStyle Example: obj.onclick = handlerFunctionName; function handlerFunctionName(ev){ var element = ev.srcElement ? ev.srcElement: ev.target; // for compatibility between IE and FF } Wrong! This fails in IE! function handlerFunctionName(ev){ ev = ev ? ev: event; // event is automagically created in IE var element = ev.srcElement ? ev.srcElement: ev.target; }

11. 11 Browser incompatibilities SVG support for Internet Explorer??? SVG versus VML Totally different DOM documents Totally different elements No floats in coordinate transformations Don't mix HTML and VML! Absolute position?...

12. 12 Browser incompatibilities

13. 13 Browser incompatibilities Granted that picture is a bit outdated (from 2006) 2009: Better tools Code completion finally! For ExtJS through “spket” (eclipse plugin exists as well) For Dojo through the Zend framework JsEclipse – since 2006 from Adobe Debugging Firebug (exists for Internet Explorer too - sloooow) Internet Explorer 8 debugger Still no single debugging environment!

14. 14 Search for alternatives Not just technical problems Javascript still is an extra language Javascript has a steep learning curve Difficult to find experienced javascript programmers Conclusion: creating projects with Javascript is expensive!

15. 15 Search for alternatives Other Ajax widget frameworks (ExtJS, SmartClient,...) Preferrably no Javascript.... Flex Requires plugin (95% spread) Very fast (can handle up to 10 times what VML can) Very slow bridge between Javascript and Flex Google Web Toolkit (GWT) Let's find out on the next slides....

16. 16 GWT What is it? Google Web Toolkit Javascript compiler: cross-browser! Supports Java 1.5 + annotations Widget library based upon Swing library Module based What license does it have? Apache license, version 2.0

17. 17 GWT – pros and cons PRO One language to work with: Java Strong typed language (actual OO design) Java 1.5 complient on client side, and no restrictions on server side. Plugins available for Eclipse and IntelliJ Debugging RPC: Deal only with pojo's; no XML / JSON No code reengineering at runtime (already compiled) No browser specific code. GWT generates it.

18. 18 GWT – pros and cons PRO Fast learning curve (java – swing based) Time to deliver is much faster Fixing bugs goes much faster then in typical jsp / javascript apps. Unit testing: standard Junit on both client and server Code size and execution speed much lesser Supported by a major company.... so is it heavensent?

19. 19 GWT – pros and cons CONS Concept of modules can be confusing Styling: CSS knowledge is still needed Separation between style and implementation is less clear No page type navigation (as in php or jsp) If you write one big fat module, download time can be higher. Alternative: more modules

20. 20 GWT – pros and cons CONS GWT compiler is slow compared to standard Java compiler Unusual approach, can be harder to sell Harder to use a wide range of browsers for actual testing Not possible to edit CSS while in hosted mode

21. 21 GWT In my humble opinion: the pros far outweigh the cons Cost benefit Easier to find programmers

22. 22 Geomajas Geomajas current state: Modular design GWT integration has begun First version ready first quarter 2010

23. 23 Geomajas

24. 24 Conclusion Javascript: high learning curve Difficult to find experienced programmers GWT Low learning curve One language Time to deliver is faster

25. 25 Conclusion Thank you for listening! Website: http://www.geomajas.org/ Company: http://www.geosparc.com/