Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Matt Raible

April 23, 2019
Tweet

More Decks by Matt Raible

Other Decks in Programming

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

    View full-size slide

  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

    View full-size slide

  3. developer.okta.com

    View full-size slide

  4. What About You?

    View full-size slide

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

    View full-size slide

  6. 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

    View full-size slide

  7. 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

    View full-size slide

  8. SPRING INITIALIZR @ start.spring.io

    View full-size slide

  9. @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 {
    }

    View full-size slide

  10. @spring_io
    #springio17
    Microservices with Spring Boot
    https://developer.okta.com/blog/2017/06/15/build-microservices-architecture-spring-boot

    View full-size slide

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

    View full-size slide

  12. Demo: Build a Spring Boot API

    View full-size slide

  13. ES6, ES7 and TypeScript
    ES5: es5.github.io

    ES6: git.io/es6features

    ES7: bit.ly/es7features

    TS: www.typescriptlang.org
    TS
    ES7
    ES6
    ES5

    View full-size slide

  14. 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

    View full-size slide

  15. @spring_io
    #springio17
    bus.ts

    View full-size slide

  16. “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

    View full-size slide

  17. @spring_io
    #springio17
    Leading JavaScript Frameworks in 2019
    angular.io
    facebook.github.io/react
    vuejs.org

    View full-size slide

  18. “2018: The Year of React
    React won the popularity battle in 2017.”

    View full-size slide

  19. “React kept a firm grip on its lead in 2018.”

    View full-size slide

  20. Crunch the Numbers

    View full-size slide

  21. Hot Frameworks hotframeworks.com

    View full-size slide

  22. Hot Frameworks hotframeworks.com

    View full-size slide

  23. Jobs on Indeed (US)
    April 2019
    0
    2,500
    5,000
    7,500
    10,000
    React Angular Vue Vanilla

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. Hello World with React
    http://codepen.io/gaearon/pen/ZpvBNJ?editors=0100

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

    View full-size slide

  27. 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);

    View full-size slide

  28. Declarative Code
    if (count === 0) {
    return ;
    } else if (count <= 99) {
    return (

    {count}

    );
    } else {
    return (

    99+

    );
    }

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. @spring_io
    #springio17
    Progressive Web Apps

    View full-size slide

  32. “We’ve failed on mobile”

    — Alex Russell

    https://youtu.be/K1SFnrf4jZo

    View full-size slide

  33. 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

    View full-size slide

  34. 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

    View full-size slide

  35. Learn More about PWAs
    https://developer.okta.com/blog/2017/07/20/the-ultimate-guide-to-progressive-web-applications

    View full-size slide

  36. 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;

    }
    }

    View full-size slide

  37. @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! ✨

    View full-size slide

  38. 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

    View full-size slide

  39. Action!
    Try Spring Boot

    Try React

    Try Okta

    Explore PWAs

    Enjoy the bootiful experience!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  43. developer.okta.com/blog
    @oktadev

    View full-size slide

  44. Questions?
    Keep in touch!

    raibledesigns.com

    @mraible

    Presentations

    speakerdeck.com/mraible

    Code

    github.com/oktadeveloper

    View full-size slide