Bootiful Development with Spring Boot and React - RWX 2017

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

Transcript

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 TS ES7 ES6 ES5
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