Post on 24-Jan-2018
Matt Raible | @mraible
Bootiful Development with Spring Boot and React
December 7, 2017 #RichWeb17
Blogger on raibledesigns.com
Web Developer and Java Champion
Father, Skier, Mountain Biker, Whitewater Rafter
Open Source Connoisseur
Who is Matt Raible?
Bus LoverOkta Developer Advocate
@spring_io #springio17
Okta Supports Authentication Standards
What about You?
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
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
@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> { }
@spring_io #springio17
Microservices with Spring Boot
https://developer.okta.com/blog/2017/06/15/build-microservices-architecture-spring-boot
Demo: Build a Spring Boot API
ES6, ES7 and TypeScript
ES5: es5.github.io
ES6: git.io/es6features
ES7: bit.ly/es7features
TS: www.typescriptlang.org TSES7 ES6 ES5
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
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
@spring_io #springio17
Leading JavaScript Frameworks in 2017
angular.io
facebook.github.io/react
vuejs.org
“Angular and React dominate: Nothing else even comes close.”
Crunch the Numbers
@spring_io #springio17
Hot Frameworks hotframeworks.com
@spring_io #springio17
Jobs on Indeed (US)November 2017
0
2,000
4,000
6,000
8,000
React Angular Vue Polymer
@spring_io #springio17
Stack Overflow Tags
November 2017
0
22,500
45,000
67,500
90,000
React Angular Vue Polymer
Stack Overflow Trends
https://stackoverflow.blog/2017/05/09/introducing-stack-overflow-trends
@spring_io #springio17
GitHub StarsNovember 2017
0
22,500
45,000
67,500
90,000
React Angular Vue Ember Polymer Backbone
@spring_io #springio17
GitHub Star Growth
http://www.timqian.com/star-history
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>
Imperative Codeif (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 Codeif (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
@spring_io #springio17
Free React Courses on egghead.io
https://blog.kentcdodds.com/learn-react-fundamentals-and-advanced-patterns-eac90341c9db
@spring_io #springio17
Progressive Web Apps
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 Clientclass 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
@spring_io #springio17
JHipster jhipster.tech
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>
Questions?Keep in touch!
raibledesigns.com
@mraible
Presentations
speakerdeck.com/mraible
Code
github.com/oktadeveloper