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 an React app to display its data. If time allows we’ll cover authentication with OpenID Connect and deployment to Cloud Foundry. Blog post: https://developer.okta.com/blog/2017/12/06/bootiful-development-with-spring-boot-and-react Demo app: https://github.com/oktadeveloper/spring-boot-react-example

1. Matt Raible | @mraible
Bootiful Development with
Spring Boot and React
December 7, 2017 #RichWeb17

3. Blogger on raibledesigns.com
Web Developer and Java Champion
Father, Skier, Mountain Biker,
Whitewater Rafter
Open Source Connoisseur
Who is Matt Raible?
Bus Lover
Okta Developer Advocate

7. developer.okta.com

8. @spring_io
#springio17
Okta Supports Authentication Standards

9. What about You?

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

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

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

13. SPRING INITIALIZR @ start.spring.io

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

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

17. Demo: Build a Spring Boot API

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

19. http://caniuse.com/#search=es5

20. http://caniuse.com/#search=es6

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

22. @spring_io
#springio17
bus.ts

23. TypeScript 2.3

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

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

28. “Angular and React dominate:
Nothing else even comes close.”

30. Crunch the Numbers

31. @spring_io
#springio17
Hot Frameworks hotframeworks.com

32. @spring_io
#springio17
Jobs on Indeed (US)
November 2017
0
2,000
4,000
6,000
8,000
React Angular Vue Polymer

33. @spring_io
#springio17
Stack Overflow Tags
November 2017
0
22,500
45,000
67,500
90,000
React Angular Vue Polymer

34. Stack Overflow Trends
https://stackoverflow.blog/2017/05/09/introducing-stack-overflow-trends

35. @spring_io
#springio17
GitHub Stars
November 2017
0
22,500
45,000
67,500
90,000
React Angular Vue Ember Polymer Backbone

36. @spring_io
#springio17
GitHub Star Growth
http://www.timqian.com/star-history

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

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

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

42. Create React App

43. Create React App

44. Ships with documentation!

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

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

47. @spring_io
#springio17
Progressive Web Apps

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

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

51. The PRPL Pattern
Push
Render
Pre-cache
Lazy-load

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

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

54. 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;
…
}
}

55. More Authentication with React

56. @spring_io
#springio17
JHipster jhipster.tech

58. The JHipster Mini-Book
4.0 Release on Sep 22, 2017
jhipster-book.com
21-points.com
@jhipster_book
Write your own InfoQ mini-book! github.com/mraible/infoq-mini-book

59. Action!
Try Spring Boot
Try React
Try Okta, I’ll buy you a 🍺!
Explore PWAs
Enjoy the bootiful experience!

60. 🔐 it down with Okta!
https://developer.okta.com/blog/2017/09/19/build-a-secure-notes-application-with-kotlin-typescript-and-okta

61. @SpringBootApplication
class NotesApplication
fun main(args: Array<String>) {
SpringApplication.run(NotesApplication::class.java, *args)
}
@Entity
data class Note(@Id @GeneratedValue var id: Long? = null,
var text: String? = null,
@JsonIgnore var user: String? = null)
@RepositoryRestResource
interface NotesRepository : JpaRepository<Note, Long>

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

63. developer.okta.com/blog

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