Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Full Stack Reactive with React and Spring WebFl...

Full Stack Reactive with React and Spring WebFlux - Switzerland JUG 2020

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: Full Stack Reactive with Spring WebFlux, WebSockets, and React
* Screencast of demo: https://youtu.be/1xpwYe154Ys

Matt Raible

March 11, 2020
Tweet

More Decks by Matt Raible

Other Decks in Programming

Transcript

  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. 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
  3. 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
  4. package com.example.io; import lombok.extern.log4j.Log4j2; import org.springframework.util.FileCopyUtils; import java.io.File; import java.io.FileInputStream;

    import java.io.IOException; import java.util.function.Consumer; @Log4j2 class Synchronous implements Reader { @Override public void read(File file, Consumer<BytesPayload> consumer) throws IOException { try (FileInputStream in = new FileInputStream(file)) { byte[] data = new byte[FileCopyUtils.BUFFER_SIZE]; int res; while ((res = in.read(data, 0, data.length)) != -1) { consumer.accept(BytesPayload.from(data, res)); } } } }
  5. class Asynchronous implements Reader, CompletionHandler<Integer, ByteBuffer> { private int bytesRead;

    private long position; private AsynchronousFileChannel fileChannel; private Consumer<BytesPayload> consumer; private final ExecutorService executorService = Executors.newFixedThreadPool(10); public void read(File file, Consumer<BytesPayload> c) throws IOException { this.consumer = c; Path path = file.toPath(); this.fileChannel = AsynchronousFileChannel.open(path, Collections.singleton(StandardOpenOption.READ), this.executorService); ByteBuffer buffer = ByteBuffer.allocate(FileCopyUtils.BUFFER_SIZE); this.fileChannel.read(buffer, position, buffer, this); while (this.bytesRead > 0) { this.position = this.position + this.bytesRead; this.fileChannel.read(buffer, this.position, buffer, this); } } @Override public void completed(Integer result, ByteBuffer buffer) { ... } }
  6. @Override public void completed(Integer result, ByteBuffer buffer) { this.bytesRead =

    result; if (this.bytesRead < 0) return; buffer.flip(); byte[] data = new byte[buffer.limit()]; buffer.get(data); consumer.accept(BytesPayload.from(data, data.length)); buffer.clear(); this.position = this.position + this.bytesRead; this.fileChannel.read(buffer, this.position, buffer, this); } @Override public void failed(Throwable exc, ByteBuffer attachment) { log.error(exc); }
  7. @SpringBootApplication public class DemoApplication { public static void main(String[] args)

    { SpringApplication.run(DemoApplication.class, args); } } @Entity class Blog { @Id @GeneratedValue private Long id; private String name; // getters, setters, toString(), etc } @RepositoryRestResource interface BlogRepository extends JpaRepository<Blog, Long> { }
  8. “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
  9. 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);
  10. Declarative Code if (count === 0) { return <div className="bell"/>;

    } else if (count <= 99) { return ( <div className="bell"> <span className="badge">{count}</span> </div> ); } else { return ( <div className="bell onFire"> <span className="badge">99+</span> </div> ); }
  11. Handling Streaming Data in React Polling with Interval Polling with

    RxJS WebSocket Server-Sent Events and EventSource RSocket
  12. Demo: Build a React Client class ProfileList extends React.Component<ProfileListProps, ProfileListState>

    { constructor(props: ProfileListProps) { super(props); this.state = { profiles: [], isLoading: false }; } async componentDidMount() { this.setState({isLoading: true}); const response = await fetch('http://localhost:8080/profiles', { headers: { Authorization: 'Bearer ' + this.props.authState.accessToken } }); const data = await response.json(); this.setState({profiles: data, isLoading: false}); } render() { const {profiles, isLoading} = this.state; ... } }
  13. @spring_io #springio17 JHipster jhipster.tech JHipster is a development platform to

    generate, develop and deploy Spring Boot + Angular/React Web applications and Spring microservices.