Jsonix - Talking to OGC Web Services in JSON

Talking to OGC Web Services
in JSON
Or How I Learned to Stop Worrying
and Love XML Processing in JavaScript
1

Hi, my name is …
Alexey Valikov
http://xing.to/va
https://github.com/highsource
@orless
2

… and I’m (also) into GIS and Web Mapping
GIS 2go
Internal apps for the Deutsche Bahn
3

Web Mapping means JavaScript
4

JavaScript speaks JSON
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [125.6, 10.1]
},
"properties": {
"name": "Dinagat Islands"
}
}
[ˈdʒeɪsən]
5

GIS-Services are based on OGC Standards
6

… specified by XML Schemas
More than 50 Schemas
More than 100 individual versions
Over 8MB and 800 individual XSD files
7

OGC Web Services speak XML
GetCapabilities
<wfs:WFS_Capabilities …
/>
GetFeature
<wfs:FeatureCollection …
/>
Client WFS Server
8

JS Apps have a communication problem
JS App WFS Server
{”JS”:”ON”} ???
XSD
9
<x:ml/>

Jsonix provides a solution
Mapping
10
WFS Server
{”JS”:”ON”}
Jsonix
XSD
<x:ml/>
JS App

What is Jsonix?
Jsonix is a powerful Open-Source JavaScript library
for XML↔JS conversion
https://github.com/highsource/jsonix
Bidirectional, type-safe, strongly-structured
Driven by declarative XML↔JS mappings…
… which can be generated from XML schemas
automatically
11

Further Jsonix features
Works in browsers
Works in Node.js
Works with AMD, CommonJS and without (globals)
Namespace-aware
Supports almost all of the XML Schema simple types
(including binary types and QNames)
Supports xsi:type
And much more
12

Jsonix Example
Parse WMS Capabilities
JSFiddle:
http://bit.do/jsonix-001
13

Parsing with Jsonix - Code Walk-Through
var getCapabilitiesUrl = …;
// First we create a context for XLink and WMS mappings
var context = new Jsonix.Context([XLink_1_0, WMS_1_3_0], …);
// Then we create an unmarshaller (parser)
var unmarshaller = context.createUnmarshaller();
// And finally use this unmarshaller
// to parse an XML document from the given URL
unmarshaller.unmarshalURL(getCapabilitiesUrl, function(result) {
// We’ll get results in a callback function
$('#json').html(JSON.stringify(result, null, 2));
});
14

Jsonix creates pretty JSON
<WMS_Capabilities …
version="1.3.0"
updateSequence="163">
<Service> … </Service>
<Capability>
<Request> … </Request>
<Exception> … </Exception>
<Layer>
…
<Layer queryable="1">…</Layer>
<Layer queryable="1" opaque="0">…</Layer>
…
</Layer>
</Capability>
</WMS_Capabilities>
{
"WMS_Capabilities": {
"version": "1.3.0",
"updateSequence": "163",
"service": { … },
"capability": {
"request": { … },
"exception": { … },
"layer": { … ,
"layer": [ … ]
}
}
}
}
15

… and can serialize this JSON back to XML
// Create (or reuse) the Jsonix Context
var context = new Jsonix.Context([XLink_1_0, WMS_1_3_0], …);
// Create a marshaller (serializer)
var marshaller = context.createMarshaller();
// Serialize JSON as XML string or DOM node
$('#xml').text(marshaller.marshalString(result));
16

The same thing without Jsonix?
OpenLayers 3: ol.format.
WMSCapabilities
JSFiddle:
17

Let’s take a closer look into the OL3 code
ol.format.WMSCapabilities
ca. 28 kB, ca 0.8 KLoC
Type-safe
Strongly-structured
Only parsing
Written manually
Super exciting code
18

Why yet another XML-JS tool?
19

Jsonix
is strongly-structured
and type-safe
And that’s unparalleled
20

What does “strongly-structured” mean?
version="1.3.0"
<Capability>
<Layer> …

<Layer queryable="1"> … </Layer>
</Layer>
</Capability>
</WMS_Capabilities>
How should the Layer element
be represented in JSON?
As a single element or as an array?
capability.layer.layer?
capability.layer.layer[0]?
You can’t decide it just based on
the XML instance
You have to know the schema
21

Jsonix is strongly-structured
Jsonix knows the structure of the XML from the mapping
… and respects the defined cardinalities, element orders,
properties, naming and so on
Jsonix always produces JSON and XML-structures which
respect the definitions from the mapping
22

Jsonix produces reliable structures
version="1.3.0"
<Capability>
<Layer> …
</Layer>
</Capability>
</WMS_Capabilities>
layer is an array:
capability.layer.layer[0]
Because the mapping says so:
23

Strong, reliable structures
===
simpler code
24

What does “type-safe” mean?
version="1.3.0"
<Capability>
<Layer> …
</Layer>
</Capability>
</WMS_Capabilities>
Which type should
queryable=”1” have in JSON?
String? Number? Boolean?
You can’t decide it just based on
the XML instance
You have to know the schema
25

Jsonix is type-safe
Jsonix knows types of elements
and attributes from the mapping
… and converts strings from/to
these types automatically
Jsonix always produces values in
JSON and XML according to the
types defined in the mapping
26

Jsonix converts the types automatically
version="1.3.0"
<Capability>
<Layer> …
</Layer>
</Capability>
</WMS_Capabilities>
queryable is a boolean:
{ "queryable" : true, … }
Because the mappings says so:
27

Safe, automatic type conversion
===
less work
28

Jsonix uses declarative mappings
Jsonix mappings are just descriptions of structures, not imperative programs
29

Mappings are essential
for strong structures
and safe typing
30

Jsonix can generate mappings from XSDs
Jsonix Runtime
XSD
Mapping
Jsonix Schema Compiler
{“JS”:”ON”} <x:ml/>
31

..as follows
java -jar jsonix-schema-compiler.jar
-catalog schemas/catalog.cat
schemas/ogc/wms/1.3.0/capabilities_1_3_0.xsd
-b schemas
-d mappings
Generates Jsonix mappings for WMS 1.3.0:
WMS_1_3_0_Full.js
GitHub:
32

Experimental: Generate JSON Schemas from XSDs
Jsonix Runtime
XSD
Mapping
Jsonix Schema Compiler
{“JS”:”ON”} <x:ml/>
33
JSON
Schema
Experimental java -jar jsonix-schema-compiler.jar
-generateJsonSchema …

Experimental: Validate JSON against generated JSON Schemas
Using the great “Another JSON Schema Validator” AJV
// Load JSON Schemas
var ajv = new Ajv();
ajv.addSchema(XMLSchemaJsonSchema, … ); ajv.addSchema(JsonixJsonSchema, … );
ajv.addSchema(XLink_1_0JsonSchema, 'http://www.w3.org/1999/xlink');
// Compile the validation function and validate
var validate = ajv.compile(WMS_1_3_0JsonSchema);
if (!validate(capabilitiesElement)) { console.log(validate.errors); }
34
[{
keyword: 'required',
dataPath: '.value.capability.request.getCapabilities.dcpType['0'].http',
message: 'property .http is required'
}, … ]

Compiling XSDs into mappings is hard
35
By
Alex
E.
Proimos
(http://www.flickr.
com/photos/proimos/4199675334/)
[CC
BY
2.0
(http://creativecommons.org/licenses/by/2.0)],
via
Wikimedia
Commons

Compiling XSDs into mappings is hard
We’ve huge number of schemas with complex
interdependencies
Schemas sometimes have errors
We have to resolve naming collisions
We’re often forced to customize generation or even
patch schemas
36

(Unofficial) OGC Schemas Project
https://github.com/highsource/ogc-schemas
Pre-generated mapping for OGC Schemas:
JS↔XML: Jsonix mappings
Java↔XML: JAXB classes
Available via npmjs.org and Maven Central
37

(Unofficial) OGC Schemas Project
Compiles over 30 OGC Schemas
with more than 80 single versions
OWS, WMS, SLD, GML, Filter,
WFS, WPS, WCS, WMC, SWE,
SPS, SOS, OM, SensorML, KML,
ISO 19139, CSW, and many
more…
… ready-to-use with Jsonix
38

Using pre-generated mappings
var mappings = [XLink_1_0, SMIL_2_0, SMIL_2_0_Language,
GML_3_1_1, OWS_1_0_0, Filter_1_1_0, DC_1_1, DCT, CSW_2_0_2];
// Create a Jsonix context
var context = new Jsonix.Context(mappings, {
namespacePrefixes: {
"http://www.opengis.net/cat/csw/2.0.2": "csw",
"http://www.opengis.net/ogc": "ogc",
"http://www.opengis.net/gml": "gml"
}
});
JSFiddle:
39

Takeaway
Jsonix is a powerful Open-Source JavaScript library for
XML↔JS conversion
Works in browsers as well as Node.js
Bidirectional, strongly-structured and type-safe
Uses declarative XML↔JS mappings
Mappings can be generated from XML Schemas
The (unofficial) OGC Schemas Project provides ready-to-use
pre-generated mapping for many OGC Schemas
40

Jsonix can drastically simplify
XML processing in JavaScript apps
and thus save a lot of development effort
https://github.com/highsource/jsonix
41

Jsonix - Talking to OGC Web Services in JSON

Recommended

Recommended

More Related Content

What's hot

What's hot (15)

Viewers also liked

Viewers also liked (6)

Similar to Jsonix - Talking to OGC Web Services in JSON

Similar to Jsonix - Talking to OGC Web Services in JSON (20)

Recently uploaded

Recently uploaded (20)

Jsonix - Talking to OGC Web Services in JSON