![Page 1: Building an OpenLayers 3 map viewer with React · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers 3 map viewer with React @PirminKalberer Sourcepole AG,](https://reader030.vdocuments.us/reader030/viewer/2022040414/5f16db4ffdc5fc4ff74efec4/html5/thumbnails/1.jpg)
FOSS4G Seoul 17.9.15 OpenLayers 3 + React
FOSS4G 2015
Building an OpenLayers 3 map viewer with React
@PirminKalbererSourcepole AG, Switzerlandwww.sourcepole.com
![Page 2: Building an OpenLayers 3 map viewer with React · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers 3 map viewer with React @PirminKalberer Sourcepole AG,](https://reader030.vdocuments.us/reader030/viewer/2022040414/5f16db4ffdc5fc4ff74efec4/html5/thumbnails/2.jpg)
FOSS4G Seoul 17.9.15 OpenLayers 3 + React
Map/Table Example
> https://github.com/pka/ol3-react-example
![Page 3: Building an OpenLayers 3 map viewer with React · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers 3 map viewer with React @PirminKalberer Sourcepole AG,](https://reader030.vdocuments.us/reader030/viewer/2022040414/5f16db4ffdc5fc4ff74efec4/html5/thumbnails/3.jpg)
FOSS4G Seoul 17.9.15 OpenLayers 3 + React
The „JQuery way“
![Page 4: Building an OpenLayers 3 map viewer with React · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers 3 map viewer with React @PirminKalberer Sourcepole AG,](https://reader030.vdocuments.us/reader030/viewer/2022040414/5f16db4ffdc5fc4ff74efec4/html5/thumbnails/4.jpg)
FOSS4G Seoul 17.9.15 OpenLayers 3 + React
The „JQuery way“ more complex
![Page 5: Building an OpenLayers 3 map viewer with React · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers 3 map viewer with React @PirminKalberer Sourcepole AG,](https://reader030.vdocuments.us/reader030/viewer/2022040414/5f16db4ffdc5fc4ff74efec4/html5/thumbnails/5.jpg)
FOSS4G Seoul 17.9.15 OpenLayers 3 + React
The MVC way
![Page 6: Building an OpenLayers 3 map viewer with React · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers 3 map viewer with React @PirminKalberer Sourcepole AG,](https://reader030.vdocuments.us/reader030/viewer/2022040414/5f16db4ffdc5fc4ff74efec4/html5/thumbnails/6.jpg)
FOSS4G Seoul 17.9.15 OpenLayers 3 + React
The MVC way – more complex
![Page 7: Building an OpenLayers 3 map viewer with React · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers 3 map viewer with React @PirminKalberer Sourcepole AG,](https://reader030.vdocuments.us/reader030/viewer/2022040414/5f16db4ffdc5fc4ff74efec4/html5/thumbnails/7.jpg)
FOSS4G Seoul 17.9.15 OpenLayers 3 + React
The React way
![Page 8: Building an OpenLayers 3 map viewer with React · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers 3 map viewer with React @PirminKalberer Sourcepole AG,](https://reader030.vdocuments.us/reader030/viewer/2022040414/5f16db4ffdc5fc4ff74efec4/html5/thumbnails/8.jpg)
FOSS4G Seoul 17.9.15 OpenLayers 3 + React
React
> http://facebook.github.io/react/> The V in MVC> Components, not templates
> Display logic and markup are thighly coupled> Re-render, don't mutate the DOM> Fast Virtual DOM> Components are reusable, composable, unit
testable> Concepts: https://youtu.be/x7cQ3mrcKaY
![Page 9: Building an OpenLayers 3 map viewer with React · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers 3 map viewer with React @PirminKalberer Sourcepole AG,](https://reader030.vdocuments.us/reader030/viewer/2022040414/5f16db4ffdc5fc4ff74efec4/html5/thumbnails/9.jpg)
FOSS4G Seoul 17.9.15 OpenLayers 3 + React
React Component
var MyComponent = React.createClass({ render: function(){ return ( <h1>Hello {this.props.name}!</h1> ); }});
React.render(<MyComponent name="World" />, document.getElementById('myDiv'));
![Page 10: Building an OpenLayers 3 map viewer with React · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers 3 map viewer with React @PirminKalberer Sourcepole AG,](https://reader030.vdocuments.us/reader030/viewer/2022040414/5f16db4ffdc5fc4ff74efec4/html5/thumbnails/10.jpg)
FOSS4G Seoul 17.9.15 OpenLayers 3 + React
JSX
> JSX:
render () { return ( <h1>Hello {this.props.name}!</h1> );
> Javascript:
render () { return React.createElement("div", null, "Hello ", this.props.name); }
![Page 11: Building an OpenLayers 3 map viewer with React · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers 3 map viewer with React @PirminKalberer Sourcepole AG,](https://reader030.vdocuments.us/reader030/viewer/2022040414/5f16db4ffdc5fc4ff74efec4/html5/thumbnails/11.jpg)
FOSS4G Seoul 17.9.15 OpenLayers 3 + React
Lists and events
var PlaceList = React.createClass( { render: function() { var placeNodes = this.props.places.map(function (place) { return ( <li onClick={onSelectClick}>{place}</li>; }; return ( <ul> {placeNodes} </ul> ); }});
![Page 12: Building an OpenLayers 3 map viewer with React · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers 3 map viewer with React @PirminKalberer Sourcepole AG,](https://reader030.vdocuments.us/reader030/viewer/2022040414/5f16db4ffdc5fc4ff74efec4/html5/thumbnails/12.jpg)
FOSS4G Seoul 17.9.15 OpenLayers 3 + React
Composing components
> CommentBox> CommentList
> Comment> CommentForm
var CommentBox = React.createClass({ render: function() { return ( <div className="commentBox"> <h1>Comments</h1> <CommentList /> <CommentForm /> </div> ); }});
![Page 13: Building an OpenLayers 3 map viewer with React · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers 3 map viewer with React @PirminKalberer Sourcepole AG,](https://reader030.vdocuments.us/reader030/viewer/2022040414/5f16db4ffdc5fc4ff74efec4/html5/thumbnails/13.jpg)
FOSS4G Seoul 17.9.15 OpenLayers 3 + React
Props / State
> Props> Read-only attributes
> State> State is set using the setState method.
Calling setState triggers UI updates.> Re-render the whole app once the state
changes> Unidirectional Data Flow> Data is guaranteed up to date> Virtual DOM: makes re-rendering on every
change fast
![Page 14: Building an OpenLayers 3 map viewer with React · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers 3 map viewer with React @PirminKalberer Sourcepole AG,](https://reader030.vdocuments.us/reader030/viewer/2022040414/5f16db4ffdc5fc4ff74efec4/html5/thumbnails/14.jpg)
FOSS4G Seoul 17.9.15 OpenLayers 3 + React
Virtual DOM
> On every update React builds a new virtual DOM subtree
> … diffs it with the old one> … computes the minimal set of DOM
mutations and puts them in a queue> … and batch executes all updates
![Page 15: Building an OpenLayers 3 map viewer with React · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers 3 map viewer with React @PirminKalberer Sourcepole AG,](https://reader030.vdocuments.us/reader030/viewer/2022040414/5f16db4ffdc5fc4ff74efec4/html5/thumbnails/15.jpg)
FOSS4G Seoul 17.9.15 OpenLayers 3 + React
Redux
> Flux: application architecture> Pattern rather than framework> Unidirectional data flow> http://facebook.github.io/flux/
> Redux: “Reduced” Flux implementation> http://rackt.github.io/redux/
> Single store> Central state State history, etc.→> Middleware (Logging, etc.)
![Page 16: Building an OpenLayers 3 map viewer with React · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers 3 map viewer with React @PirminKalberer Sourcepole AG,](https://reader030.vdocuments.us/reader030/viewer/2022040414/5f16db4ffdc5fc4ff74efec4/html5/thumbnails/16.jpg)
FOSS4G Seoul 17.9.15 OpenLayers 3 + React
React with OpenLayers
> HTML:<body> <div id="olmap"/> <div id="reactcomponents"/></body>
> React state:> visible places> selected place
> React component:var PlaceList = React.createClass( { render: function() { return (
<ul>{...}</ul> );
![Page 17: Building an OpenLayers 3 map viewer with React · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers 3 map viewer with React @PirminKalberer Sourcepole AG,](https://reader030.vdocuments.us/reader030/viewer/2022040414/5f16db4ffdc5fc4ff74efec4/html5/thumbnails/17.jpg)
FOSS4G Seoul 17.9.15 OpenLayers 3 + React
Updating state
![Page 18: Building an OpenLayers 3 map viewer with React · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers 3 map viewer with React @PirminKalberer Sourcepole AG,](https://reader030.vdocuments.us/reader030/viewer/2022040414/5f16db4ffdc5fc4ff74efec4/html5/thumbnails/18.jpg)
FOSS4G Seoul 17.9.15 OpenLayers 3 + React
Updating State
> OL React State→
function updateVisiblePlaces() { var visiblePlaces = placeLayer.getSource().getFeaturesInExtent(extent) ... store.dispatch(visiblePlacesAction(visiblePlaces))}placeLayer.on('change', updateVisiblePlaces);
> React Component State + OL update→
onSelectClick: function(e) { dispatch(selectAction(itemId)); // Update map updateSelection(itemId)}
> Alternative approach: use Redux middleware for updating state in OL
![Page 19: Building an OpenLayers 3 map viewer with React · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers 3 map viewer with React @PirminKalberer Sourcepole AG,](https://reader030.vdocuments.us/reader030/viewer/2022040414/5f16db4ffdc5fc4ff74efec4/html5/thumbnails/19.jpg)
FOSS4G Seoul 17.9.15 OpenLayers 3 + React
Hot reloading
> Presentation at ReactEurope 2015:https://youtu.be/xsSnOQynTHs
> Save change in source (JS, CSS, …) →Updated view in browser> Keeps application state> State history: Undo/Redo> State snapshots for unit testing
![Page 20: Building an OpenLayers 3 map viewer with React · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers 3 map viewer with React @PirminKalberer Sourcepole AG,](https://reader030.vdocuments.us/reader030/viewer/2022040414/5f16db4ffdc5fc4ff74efec4/html5/thumbnails/20.jpg)
FOSS4G Seoul 17.9.15 OpenLayers 3 + React
Complete code example
> https://github.com/pka/ol3-react-example
![Page 21: Building an OpenLayers 3 map viewer with React · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers 3 map viewer with React @PirminKalberer Sourcepole AG,](https://reader030.vdocuments.us/reader030/viewer/2022040414/5f16db4ffdc5fc4ff74efec4/html5/thumbnails/21.jpg)
FOSS4G Seoul 17.9.15 OpenLayers 3 + React
FOSS4G 2015
Thank you! - Questions?
@PirminKalberer@sourcepole