Web GIS: from Javascript to GWT Pieter De Graef – Community Manager & Lead Developer Geomajas
description
Transcript of 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/