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
   

   View Slide

2. View Slide

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
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. developer.okta.com
   

   View Slide

8. @spring_io
   #springio17
   Okta Supports Authentication Standards
   

   View Slide

9. What about You?
   

   View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

13. SPRING INITIALIZR @ start.spring.io
    

    View Slide

14. View Slide

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 {
    }
    

    View Slide

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

    View Slide

17. Demo: Build a Spring Boot API
    

    View Slide

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
    

    View Slide

19. http://caniuse.com/#search=es5
    

    View Slide

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

    View Slide

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
    

    View Slide

22. @spring_io
    #springio17
    bus.ts
    

    View Slide

23. TypeScript 2.3
    

    View Slide

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
    

    View Slide

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

    View Slide

26. View Slide

27. View Slide

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

    View Slide

29. View Slide

30. Crunch the Numbers
    

    View Slide

31. @spring_io
    #springio17
    Hot Frameworks hotframeworks.com
    

    View Slide

32. @spring_io
    #springio17
    Jobs on Indeed (US)
    November 2017
    0
    2,000
    4,000
    6,000
    8,000
    React Angular Vue Polymer
    

    View Slide

33. @spring_io
    #springio17
    Stack Overflow Tags
    November 2017
    0
    22,500
    45,000
    67,500
    90,000
    React Angular Vue Polymer
    

    View Slide

34. Stack Overflow Trends
    https://stackoverflow.blog/2017/05/09/introducing-stack-overflow-trends
    

    View Slide

35. @spring_io
    #springio17
    GitHub Stars
    November 2017
    0
    22,500
    45,000
    67,500
    90,000
    React Angular Vue Ember Polymer Backbone
    

    View Slide

36. @spring_io
    #springio17
    GitHub Star Growth
    http://www.timqian.com/star-history
    

    View Slide

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

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

    View Slide

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

    View Slide

40. View Slide

41. View Slide

42. Create React App
    

    View Slide

43. Create React App
    

    View Slide

44. Ships with documentation!
    

    View Slide

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

    View Slide

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

    View Slide

47. @spring_io
    #springio17
    Progressive Web Apps
    

    View Slide

48. View Slide

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

    View Slide

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
    

    View Slide

51. The PRPL Pattern
    Push
    
    Render
    
    Pre-cache
    
    Lazy-load
    

    View Slide

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
    

    View Slide

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

    View Slide

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;
    …
    }
    }
    

    View Slide

55. More Authentication with React
    

    View Slide

56. @spring_io
    #springio17
    JHipster jhipster.tech
    

    View Slide

57. View Slide

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
    

    View Slide

59. Action!
    Try Spring Boot
    
    Try React
    
    Try Okta, I’ll buy you a !
    
    Explore PWAs
    
    Enjoy the bootiful experience!
    

    View Slide

60. it down with Okta!
    https://developer.okta.com/blog/2017/09/19/build-a-secure-notes-application-with-kotlin-typescript-and-okta
    

    View Slide

61. @SpringBootApplication
    class NotesApplication
    fun main(args: Array) {
    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
    

    View Slide

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

    View Slide

63. developer.okta.com/blog
    

    View Slide

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

    View Slide