Post on 15-Apr-2017
REACTJS FOR GEOSPATIAL APPS
Just van den Broecke5-apr-2017
JavaKnights GatheringVandebron, Amsterdam
THREE CAPS
Open Geo-ICT Professional justobjects.nl
MemberOpenGeoGroep (NL)www.opengeogroep.nl
Secretary Board OSGeo.nl
1. Intro
Finding the ideal
JS framework
Agenda
Worked/working onProjects
The Quest
ReactJSfor
Geospatial Apps
ReactJS
Now
Agenda
Then
Projects
Pushlets 1998+Projects
Waag Society - 2004Projects
Frequentie 1550
Projects
GEOREFERENCING CHALLENGE
Frequentie 1550
Projects
GeoSkating 2005+Projects
GeoTracing 2006+Projects
7scenes.com 2007+Projects
7scenes.com 2007+Projects
Now
Agenda
Then
Projects
Heron Mapping ClientProjects
ExtJS Open Layers
GeoExt
Heron Framework
Heron Apps
Heron Mapping ClientProjects
Heron
PyWPS
WMS WFS WMTS TMS WPS CSWCustom
Proxy
Heron.cgiYour Scripts...
Client
API
Server
= Planned
NLExtract - OpenTopo - KademoProjects
SB4 - Wageningen - Restauratie Keienberg (Velp)
19e Eeuw Brouillon2015 - AHN2
1825 1783 - Hottinger
map5.nl - online mapsProjects
Voor
Na
SB4 - Wageningen - Restauratie Keienberg (Velp)
map5.nl - online mapsProjects
kadviewer.map5.nl - KadViewerProjects
Finding the ideal
JS framework
Agenda
Worked/working onProjects
The Quest
ReactJSfor
Geospatial Apps
ReactJS
JS Framework for Geo-AppsThe Quest
Open Sourcewith broad community
Declarative
Component-based
Mobile App support
Based on OpenLayers || Leaflet || [CesiumJS]
define app via config
Client-onlyserver-agnostic
join existing project
JS-Geo-Fwork - CandidatesThe Quest
Boundless SDK
map.geoadmin.ch
MapStore2
GeoMoose (v3)
Version1
Finding the ideal
JS framework
Agenda
Worked/working onProjects
The Quest(is never over)
ReactJSfor
Geospatial Apps
ReactJS
Modern JS Dev - Oh MyReactJS
Browserify WebPack
ES6
AMD
JSX
Babel
NodeNPM
TypeScript, CoffeeScript, PureScript, Elm, …
Mocha, Chai, Jasmine, Jest, Sinon, Ava,Tape, ..
ESLintES5
Flux, Redux,Mobx,..
SASS, SCSS, Less…
https://hackernoon.com/a-map-to-modern-javascript-development-2017-16d9eb86309c
ES2015
RequireJS
ReactJS - Essence IMHOReactJS
View-only - the “V” in MVCComponent-Container (View) Pattern
Not an MVC-like Framework
http://blog.andrewray.me/reactjs-for-stupid-people/
View-templates: HTML+JS = JSX
One-way dataflow
Virtual DOM
+React Native
Flux, Redux, MobX, …
Need State Management
https://www.robinwieruch.de/redux-mobx-confusion
Props and State
React in 7 MinsReactJS
https://egghead.io/lessons/react-react-in-7-minutes
Architecture - FluxReactJS
https://github.com/facebook/flux/tree/master/examples/flux-concepts
https://scotch.io/tutorials/getting-to-know-flux-the-react-js-architecture
React-NativeReactJS
https://facebook.github.io/react-native
Electron - PoCElectron
# Get cd ~/research/web/electron git clone https://github.com/electron/electron-quick-start quickstart cd quickstart
# Install npm install electron --save-dev npm install electron-packager --save-dev
# Run npm install npm start
# Package ./node_modules/.bin/electron-packager —help ./node_modules/.bin/electron-packager —-overwrite . quickstart cd quickstart-darwin-x64 open quickstart.app
# Specials to get KadViewer working - No Cross Domain Issues! OpenLayers.ProxyHost = undefined; Heron.globals.serviceUrl= 'http://kadviewer.map5.nl/cgi-bin/heron.cgi';
https://electron.atom.io