Bootiful Development with

Spring Boot and React

By Matt Raible
@mraible

+ =
🌅
Who is Matt Raible?
Father, Skier, Mountain Biker,
Whitewater Rafter

Open Source Connoisseur

Web Developer and Java Champion

Bus Lover
Okta Developer Advocate

Blogger on raibledesigns.com
developer.okta.com
Okta Supports Authentication Standards

@spring_io
#springio17
What about You?
Bootiful Development

http://bit.ly/boot-and-react
Today’s Agenda
Why Spring Boot?

Demo: Developing with Spring Boot

Introduction to ES6 and TypeScript

OAuth 2.0 Overview

Why React?

Demo: Developing with React

Introduction to PWAs and JHipster

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

SPRING INITIALIZR @ start.spring.io
@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> {
}
Microservices with Spring Boot

@spring_io
https://developer.okta.com/blog/2017/06/15/build-microservices-architecture-spring-boot #springio17
Demo: Build a Spring Boot API
ES6, ES7 and TypeScript
ES5: es5.github.io

ES6: git.io/es6features

ES7: bit.ly/es7features

ES5 ES6 ES7 TS

TS: www.typescriptlang.org
http://caniuse.com/#search=es5
http://caniuse.com/#search=es6
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
bus.ts

@spring_io
#springio17
TypeScript 2.3
“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
Leading JavaScript Frameworks in 2017

angular.io

facebook.github.io/react

vuejs.org
@spring_io
#springio17
 “Angular and React dominate:
Nothing else even comes close.”
Crunch the Numbers
Hot Frameworks hotframeworks.com

@spring_io
#springio17
Jobs on Indeed (US)
November 2017
8,000

6,000

4,000

2,000

0
React Angular Vue Polymer

@spring_io
#springio17
Stack Overflow Tags
November 2017
90,000

67,500

45,000

22,500

0
React Angular Vue Polymer
@spring_io
#springio17
Stack Overflow Trends

https://stackoverflow.blog/2017/05/09/introducing-stack-overflow-trends
GitHub Stars
November 2017
90,000

67,500

45,000

22,500

0
React Angular Vue Ember Polymer Backbone

@spring_io
#springio17
GitHub Star Growth

@spring_io
http://www.timqian.com/star-history #springio17
Hello World with React

<div id="root"></div>

<script>
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>

http://codepen.io/gaearon/pen/ZpvBNJ?editors=0100
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);
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>
);
}
Create React App
Create React App
Ships with documentation!
Learning React

https://vimeo.com/213710634
Progressive Web Apps

@spring_io
#springio17
“We’ve failed on mobile”

— Alex Russell

https://youtu.be/K1SFnrf4jZo
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

The PRPL Pattern
Push

Render

Pre-cache

Lazy-load
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

Learn More about PWAs

https://developer.okta.com/blog/2017/07/20/the-ultimate-guide-to-progressive-web-applications
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;
…
}
}
More Authentication with React
JHipster jhipster.tech

@spring_io
#springio17
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

Action!
Try Spring Boot

Try React

Try Okta, I’ll buy you a 🍺!

Explore PWAs

Enjoy the bootiful experience!

🔐 it down with Okta!

https://developer.okta.com/blog/2017/09/19/build-a-secure-notes-application-with-kotlin-typescript-and-okta
@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>
DIY: Bootiful Development

http://bit.ly/boot-and-react
developer.okta.com/blog
Questions?
Keep in touch!

raibledesigns.com

@mraible

Presentations

speakerdeck.com/mraible

Code

github.com/oktadeveloper