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

Bootiful Development with Spring Boot and React - SpringOne 2017

Bootiful Development with Spring Boot and React - SpringOne 2017

YouTube: https://youtu.be/P6rwKHnXUJI

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

Matt Raible

December 06, 2017
Tweet

More Decks by Matt Raible

Other Decks in Programming

Transcript

  1. Bootiful Development with
    Spring Boot and React
    By Matt Raible
    @mraible
    + =

    View full-size slide

  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

    View full-size slide

  3. developer.okta.com

    View full-size slide

  4. @spring_io
    #springio17
    Okta Supports Authentication Standards

    View full-size slide

  5. What about You?

    View full-size slide

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

    View full-size slide

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

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

  9. SPRING INITIALIZR @ start.spring.io

    View full-size slide

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

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

    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. http://caniuse.com/#search=es5

    View full-size slide

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

    View full-size slide

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

  17. @spring_io
    #springio17
    bus.ts

    View full-size slide

  18. TypeScript 2.3

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

  22. Crunch the Numbers

    View full-size slide

  23. @spring_io
    #springio17
    Hot Frameworks hotframeworks.com

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

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

    {count}

    );
    } else {
    return (

    99+

    );
    }

    View full-size slide

  32. Create React App

    View full-size slide

  33. Create React App

    View full-size slide

  34. Ships with documentation!

    View full-size slide

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

    View full-size slide

  36. @spring_io
    #springio17
    Progressive Web Apps

    View full-size slide

  37. “We’ve failed on mobile”

    — Alex Russell

    https://youtu.be/K1SFnrf4jZo

    View full-size slide

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

  39. The PRPL Pattern
    Push

    Render

    Pre-cache

    Lazy-load

    View full-size slide

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

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

    View full-size slide

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

  43. More Authentication with React

    View full-size slide

  44. @spring_io
    #springio17
    JHipster jhipster.tech

    View full-size slide

  45. 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 full-size slide

  46. Action!
    Try Spring Boot

    Try React

    Try Okta, I’ll buy you a !

    Explore PWAs

    Enjoy the bootiful experience!

    View full-size slide

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

    View full-size slide

  48. @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 full-size slide

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

    View full-size slide

  50. developer.okta.com/blog

    View full-size slide

  51. Questions?
    Keep in touch!

    raibledesigns.com

    @mraible

    Presentations

    speakerdeck.com/mraible

    Code

    github.com/oktadeveloper

    View full-size slide