Download fri g04 1400 de Graef

Web GIS: from
Javascript to GWT
Pieter De Graef – Community Manager &
Lead Developer Geomajas
1
Agenda
•
•
•
•
•
2
Geomajas introduction
Problems: javascript, browsers, SVG, VML
Alternatives
GWT pros and cons
Conclusion
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
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
Geomajas
5
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
Problems all around!
• Browser compatibility
• SVG versus VML
• General Javascript quirks
7
Javascript quirks
• Let's start with an example...
• The following if statements are all evaluated
as false; we don't reach the bracket code.
•
•
•
•
8
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 */ }
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
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
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
Browser incompatibilities
12
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
13
• Still no single debugging environment!
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
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
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
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
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?
18
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
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
GWT
• In my humble opinion:
• the pros far outweigh the cons
• Cost benefit
• Easier to find programmers
21
Geomajas
• Geomajas current state:
• Modular design
• GWT integration has begun
• First version ready first quarter 2010
22
Geomajas
23
Conclusion
• Javascript:
• high learning curve
• Difficult to find experienced programmers
• GWT
• Low learning curve
• One language
• Time to deliver is faster
24
Conclusion
• Thank you for listening!
Website: http://www.geomajas.org/
Company: http://www.geosparc.com/
25