building an openlayers 3 map viewer with...

21
FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers 3 map viewer with React @PirminKalberer Sourcepole AG, Switzerland www.sourcepole.com

Upload: vodiep

Post on 14-May-2018

265 views

Category:

Documents


6 download

TRANSCRIPT

Page 1: Building an OpenLayers 3 map viewer with Reactblog.sourcepole.ch/assets/2015/foss4g2015_ol3_react.pdf · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers

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 Reactblog.sourcepole.ch/assets/2015/foss4g2015_ol3_react.pdf · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers

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 Reactblog.sourcepole.ch/assets/2015/foss4g2015_ol3_react.pdf · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers

FOSS4G Seoul 17.9.15 OpenLayers 3 + React

The „JQuery way“

Page 4: Building an OpenLayers 3 map viewer with Reactblog.sourcepole.ch/assets/2015/foss4g2015_ol3_react.pdf · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers

FOSS4G Seoul 17.9.15 OpenLayers 3 + React

The „JQuery way“ more complex

Page 5: Building an OpenLayers 3 map viewer with Reactblog.sourcepole.ch/assets/2015/foss4g2015_ol3_react.pdf · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers

FOSS4G Seoul 17.9.15 OpenLayers 3 + React

The MVC way

Page 6: Building an OpenLayers 3 map viewer with Reactblog.sourcepole.ch/assets/2015/foss4g2015_ol3_react.pdf · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers

FOSS4G Seoul 17.9.15 OpenLayers 3 + React

The MVC way – more complex

Page 7: Building an OpenLayers 3 map viewer with Reactblog.sourcepole.ch/assets/2015/foss4g2015_ol3_react.pdf · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers

FOSS4G Seoul 17.9.15 OpenLayers 3 + React

The React way

Page 8: Building an OpenLayers 3 map viewer with Reactblog.sourcepole.ch/assets/2015/foss4g2015_ol3_react.pdf · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers

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 Reactblog.sourcepole.ch/assets/2015/foss4g2015_ol3_react.pdf · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers

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 Reactblog.sourcepole.ch/assets/2015/foss4g2015_ol3_react.pdf · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers

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 Reactblog.sourcepole.ch/assets/2015/foss4g2015_ol3_react.pdf · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers

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 Reactblog.sourcepole.ch/assets/2015/foss4g2015_ol3_react.pdf · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers

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 Reactblog.sourcepole.ch/assets/2015/foss4g2015_ol3_react.pdf · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers

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 Reactblog.sourcepole.ch/assets/2015/foss4g2015_ol3_react.pdf · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers

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 Reactblog.sourcepole.ch/assets/2015/foss4g2015_ol3_react.pdf · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers

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 Reactblog.sourcepole.ch/assets/2015/foss4g2015_ol3_react.pdf · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers

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 Reactblog.sourcepole.ch/assets/2015/foss4g2015_ol3_react.pdf · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers

FOSS4G Seoul 17.9.15 OpenLayers 3 + React

Updating state

Page 18: Building an OpenLayers 3 map viewer with Reactblog.sourcepole.ch/assets/2015/foss4g2015_ol3_react.pdf · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers

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 Reactblog.sourcepole.ch/assets/2015/foss4g2015_ol3_react.pdf · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers

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 Reactblog.sourcepole.ch/assets/2015/foss4g2015_ol3_react.pdf · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers

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 Reactblog.sourcepole.ch/assets/2015/foss4g2015_ol3_react.pdf · FOSS4G Seoul 17.9.15 OpenLayers 3 + React FOSS4G 2015 Building an OpenLayers

FOSS4G Seoul 17.9.15 OpenLayers 3 + React

FOSS4G 2015

Thank you! - Questions?

@PirminKalberer@sourcepole