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

2

Agenda

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

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

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

Geomajas

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

Problems all around!

• Browser compatibility• SVG versus VML• General Javascript quirks

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

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

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 IEvar element = ev.srcElement ? ev.srcElement: ev.target;

}

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

Browser incompatibilities

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

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

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

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

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

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

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

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

GWT

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

22

Geomajas

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

23

Geomajas

24

Conclusion

• Javascript: – high learning curve– Difficult to find experienced programmers

• GWT– Low learning curve– One language– Time to deliver is faster

25

Conclusion

• Thank you for listening!

Website: http://www.geomajas.org/

Company: http://www.geosparc.com/