Bootiful Development with Spring Boot and React - UberConf 2018

Bootiful Development with Spring Boot and React - UberConf 2018

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. If time allows we’ll cover authentication with OpenID Connect and deployment to Cloud Foundry.

Blog: https://developer.okta.com/blog/2017/12/06/bootiful-development-with-spring-boot-and-react
GitHub: https://github.com/oktadeveloper/spring-boot-react-example

72a2082c6a4dd79ad68befb3db911616?s=128

Matt Raible

July 20, 2018
Tweet

Transcript

  1. Matt Raible | @mraible Bootiful Development with Spring Boot and

    React July 20, 2018 https://www.flickr.com/photos/lhanaphotography/6107638907
  2. 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
  3. None
  4. None
  5. None
  6. developer.okta.com

  7. developer.okta.com + + = ❤

  8. @spring_io #springio17 Authentication/Authorization 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

  14. None
  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. @spring_io #springio17 Secure Microservices with Spring Boot https://developer.okta.com/blog/2018/02/13/secure-spring-microservices-with-oauth

  18. Demo: Build a Spring Boot API

  19. ES6, ES7 and TypeScript ES5: es5.github.io ES6: git.io/es6features ES7: bit.ly/es7features

    TS: www.typescriptlang.org TS ES7 ES6 ES5
  20. http://caniuse.com/#search=es5

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

  22. 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
  23. @spring_io #springio17 bus.ts

  24. TypeScript 2.3

  25. “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
  26. @spring_io #springio17 Leading JavaScript Frameworks in 2018 angular.io facebook.github.io/react vuejs.org

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

  30. None
  31. Crunch the Numbers

  32. @spring_io #springio17 Hot Frameworks hotframeworks.com

  33. @spring_io #springio17 Jobs on Indeed (US) July 2018 0 2,250

    4,500 6,750 9,000 React Angular Vue Vanilla
  34. @spring_io #springio17 Stack Overflow Tags July 2018 0 35,000 70,000

    105,000 140,000 React Angular Vue
  35. @spring_io #springio17 GitHub Stars July 2018 0 27,500 55,000 82,500

    110,000 React Angular Vue
  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> ); }
  40. None
  41. None
  42. Create React App

  43. Create React App

  44. Ships with documentation!

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

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

  47. @spring_io #springio17 Progressive Web Apps

  48. None
  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 + / = JHipster is a

    development platform to generate, develop and deploy Spring Boot + Angular/React Web applications and Spring microservices.
  57. None
  58. The JHipster Mini-Book 4.5 Release on April 6, 2018 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 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. CRUD with React and Spring Boot http://bit.ly/react-boot-crud

  64. developer.okta.com/blog

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