You have streaming data and want to expose it as reactive streams with Spring Boot. Great! Spring WebFlux makes that pretty easy. But what about the UI? Can you stream that data to the UI and have it be reactive and constantly updating too?
This session explores techniques for making your app fully reactive with Spring WebFlux and React. Mostly live coding, with plenty of time for Q & A in the midst of it all.
* Blog post: https://bit.ly/webflux-and-react
* Screencast: https://youtu.be/1xpwYe154Ys
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Full Stack Reactive with React and Spring WebFlux - Switzerland JUG 2020
1. Full Stack Reactive with React and Spring WebFlux
Matt Raible | @mraible
March 12, 2020
Photo by Lukas Schlagenhauf flickr.com/photos/lschlagenhauf/33223388493
2.
3.
4. Blogger on raibledesigns.com and
developer.okta.com/blog
Web Developer and Java Champion
Father, Skier, Mountain Biker,
Whitewater Rafter
Open Source Connoisseur
Who is Matt Raible?
Bus Lover
Okta Developer Advocate
11. OAuth 2.0 Overview
Today’s Agenda
What is reactive programming?
Introduction to Spring WebFlux
Developing an API with WebFlux
Handling Streaming Data with React
Securing WebFlux and React
26. “Node.js is a JavaScript runtime built on Chrome's V8
JavaScript engine. Node.js uses an event-driven, non-
blocking I/O model that makes it lightweight and
efficient. Node.js' package ecosystem, npm, is the
largest ecosystem of open source libraries in the world.”
https://nodejs.org
https://github.com/creationix/nvm
27. Hello World with React
http://codepen.io/gaearon/pen/ZpvBNJ?editors=0100
<div id="root"></div>
<script>
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
28. Imperative Code
if (count > 99) {
if (!hasFire()) {
addFire();
}
} else {
if (hasFire()) {
removeFire();
}
}
if (count === 0) {
if (hasBadge()) {
removeBadge();
}
return;
}
if (!hasBadge()) {
addBadge();
}
var countText = count > 99 ? "99+" : count.toString();
getBadge().setText(countText);
35. The JHipster Mini-Book
v5.0 Available Now!
jhipster-book.com
21-points.com
@jhipster_book
Write your own InfoQ mini-book! github.com/mraible/infoq-mini-book
41. Use the Source, Luke!
git clone https://github.com/oktadeveloper/okta-spring-webflux-react-
example.git
https://github.com/oktadeveloper/okta-spring-webflux-react-example