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

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

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

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 3

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 4

5. Geomajas 5

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

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

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 */ } 8

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 ... ? 9

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

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? • ... 11

12. Browser incompatibilities 12

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! 13

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! 14

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.... 15

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 16

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. 17

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 typicaljsp / 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? 18

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 19

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 20

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

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

23. Geomajas 23

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

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