To simplify development and deployment, you want everything in the same artifact, so you put your React app "inside" your Spring Boot app, right? But what if you could create your React app as a standalone app and make cross-origin requests to your API? A client app that can point to any server makes it easy to test your current client code against other servers (e.g. test, staging, production). This session shows how to develop with Java 8, Spring Boot, React, and TypeScript. You'll learn how to create REST endpoints with Spring MVC, configure Spring Boot to allow CORS, and create a React app to display its data.

1. Matt Raible | @mraible
Bootiful Development with Spring Boot and React
April 23, 2019
Photo by Premnath Thirumalaisam
https://www.flickr.com/photos/premnath/9939139384

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

6. developer.okta.com

7. What About You?

8. Bootiful Development
http://bit.ly/boot-and-react

9. OAuth 2.0 Overview
Today’s Agenda
Why Spring Boot?
Demo: Developing with Spring Boot
Introduction to ES6 and TypeScript
Why React?
Demo: Developing with React
Introduction to PWAs and JHipster

10. Spring Boot
Automatically configures Spring whenever possible
Provides production-ready features such as metrics,
health checks and externalized configuration
Absolutely no code generation and no requirement for
XML configuration
Embeds Tomcat, Jetty or Undertow directly

11. SPRING INITIALIZR @ start.spring.io

13. @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> {
}

14. @spring_io
#springio17
Microservices with Spring Boot
https://developer.okta.com/blog/2017/06/15/build-microservices-architecture-spring-boot

15. @spring_io
#springio17
Secure Microservices with Spring Boot
https://developer.okta.com/blog/2018/02/13/secure-spring-microservices-with-oauth

16. Demo: Build a Spring Boot API

17. ES6, ES7 and TypeScript
ES5: es5.github.io
ES6: git.io/es6features
ES7: bit.ly/es7features
TS: www.typescriptlang.org
TSES7ES6ES5

18. TypeScript
$ npm install -g typescript
function greeter(person: string) {
return "Hello, " + person;
}
var user = "Jane User";
document.body.innerHTML = greeter(user);
$ tsc greeter.ts
https://www.typescriptlang.org/docs/tutorial.html

19. @spring_io
#springio17
bus.ts

20. “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

21. @spring_io
#springio17
Leading JavaScript Frameworks in 2019
angular.io
facebook.github.io/react
vuejs.org

23. “2018: The Year of React
React won the popularity battle in 2017.”

25. “React kept a firm grip on its lead in 2018.”

26. Crunch the Numbers

27. Hot Frameworks hotframeworks.com

28. Hot Frameworks hotframeworks.com

29. Jobs on Indeed (US)
April 2019
0
2,500
5,000
7,500
10,000
React Angular Vue Vanilla

30. Stack Overflow Tags
April 2019
0
45,000
90,000
135,000
180,000
React Angular Vue

31. GitHub Stars
April 2019
0
35,000
70,000
105,000
140,000
React Angular Vue

32. 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>

33. 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);

34. 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>
);
}

36. Learning React
https://vimeo.com/213710634

37. @spring_io
#springio17
React Courses on egghead.io
https://blog.kentcdodds.com/learn-react-fundamentals-and-advanced-patterns-eac90341c9db

38. @spring_io
#springio17
Progressive Web Apps

39. “We’ve failed on mobile”
— Alex Russell
https://youtu.be/K1SFnrf4jZo

40. Mobile Hates You!
How to fight back:
Implement PRPL
Get a ~$150-200 unlocked Android (e.g. Moto G4)
Use chrome://inspect && chrome://inspect?tracing
Lighthouse
DevTools Network & CPU Throttling

41. The PRPL Pattern
Push critical resources for the initial URL route
Render initial route
Pre-cache remaining routes
Lazy-load and create remaining routes on demand

42. Learn More about PWAs
https://developer.okta.com/blog/2017/07/20/the-ultimate-guide-to-progressive-web-applications

43. Demo: Build a React Client
class BeerList extends React.Component<{}, any> {
constructor(props: any) {
super(props);
this.state = {
beers: [],
isLoading: false
};
}
componentDidMount() {
this.setState({isLoading: true});
fetch('http://localhost:8080/good-beers')
.then(response => response.json())
.then(data => this.setState({beers: data, isLoading: false}));
}
render() {
const {beers, isLoading} = this.state;
…
}
}

44. @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.
and Vue! ✨

46. The JHipster Mini-Book
5.0.2 Released last week!
jhipster-book.com
21-points.com
@jhipster_book
Write your own InfoQ mini-book! github.com/mraible/infoq-mini-book

47. Action!
Try Spring Boot
Try React
Try Okta
Explore PWAs
Enjoy the bootiful experience!

48. DIY: Bootiful Development
http://bit.ly/boot-and-react

49. CRUD with React and Spring Boot
http://bit.ly/react-boot-crud

50. Bootiful React with a Java EE API
https://developer.okta.com/blog/2018/09/12/secure-java-ee-rest-api

51. developer.okta.com/blog
@oktadev

52. Questions?
Keep in touch!
raibledesigns.com
@mraible
Presentations
speakerdeck.com/mraible
Code
github.com/oktadeveloper