Save 37% off PRO during our Black Friday Sale! »

Bootiful Development with Spring Boot and React - GIDS 2019

Bootiful Development with Spring Boot and React - GIDS 2019

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.

72a2082c6a4dd79ad68befb3db911616?s=128

Matt Raible
PRO

April 23, 2019
Tweet

Transcript

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

    React April 23, 2019 Photo by Premnath Thirumalaisam https://www.flickr.com/photos/premnath/9939139384
  2. Blogger on raibledesigns.com and developer.okta.com/blog 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. What About You?

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

  9. 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
  10. 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
  11. SPRING INITIALIZR @ start.spring.io

  12. None
  13. @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> { }
  14. @spring_io #springio17 Microservices with Spring Boot https://developer.okta.com/blog/2017/06/15/build-microservices-architecture-spring-boot

  15. @spring_io #springio17 Secure Microservices with Spring Boot https://developer.okta.com/blog/2018/02/13/secure-spring-microservices-with-oauth

  16. Demo: Build a Spring Boot API

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

    TS: www.typescriptlang.org TS ES7 ES6 ES5
  18. 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
  19. @spring_io #springio17 bus.ts

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

  22. None
  23. “2018: The Year of React React won the popularity battle

    in 2017.”
  24. None
  25. “React kept a firm grip on its lead in 2018.”

  26. Crunch the Numbers

  27. Hot Frameworks hotframeworks.com

  28. Hot Frameworks hotframeworks.com

  29. Jobs on Indeed (US) April 2019 0 2,500 5,000 7,500

    10,000 React Angular Vue Vanilla
  30. Stack Overflow Tags April 2019 0 45,000 90,000 135,000 180,000

    React Angular Vue
  31. GitHub Stars April 2019 0 35,000 70,000 105,000 140,000 React

    Angular Vue
  32. 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>
  33. 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);
  34. 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> ); }
  35. None
  36. Learning React https://vimeo.com/213710634

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

  38. @spring_io #springio17 Progressive Web Apps

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

  40. 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
  41. 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
  42. Learn More about PWAs https://developer.okta.com/blog/2017/07/20/the-ultimate-guide-to-progressive-web-applications

  43. 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; … } }
  44. @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. and Vue! ✨
  45. None
  46. The JHipster Mini-Book 5.0.2 Released last week! jhipster-book.com 21-points.com @jhipster_book

    Write your own InfoQ mini-book! github.com/mraible/infoq-mini-book
  47. Action! Try Spring Boot Try React Try Okta Explore PWAs

    Enjoy the bootiful experience!
  48. DIY: Bootiful Development http://bit.ly/boot-and-react

  49. CRUD with React and Spring Boot http://bit.ly/react-boot-crud

  50. Bootiful React with a Java EE API https://developer.okta.com/blog/2018/09/12/secure-java-ee-rest-api

  51. developer.okta.com/blog @oktadev

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