Bootiful Development with Spring Boot and React - RWX 2017

Slide 1

Slide 1 text

Matt Raible | @mraible Bootiful Development with Spring Boot and React December 7, 2017 #RichWeb17

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

developer.okta.com

Slide 8

Slide 8 text

@spring_io #springio17 Okta Supports Authentication Standards

Slide 9

Slide 9 text

What about You?

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

SPRING INITIALIZR @ start.spring.io

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Demo: Build a Spring Boot API

Slide 18

Slide 18 text

ES6, ES7 and TypeScript ES5: es5.github.io ES6: git.io/es6features ES7: bit.ly/es7features TS: www.typescriptlang.org TS ES7 ES6 ES5

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

@spring_io #springio17 bus.ts

Slide 23

Slide 23 text

TypeScript 2.3

Slide 24

Slide 24 text

“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 eﬃcient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.” https://nodejs.org https://github.com/creationix/nvm

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

Crunch the Numbers

Slide 31

Slide 31 text

@spring_io #springio17 Hot Frameworks hotframeworks.com

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

@spring_io #springio17 Stack Overﬂow Tags November 2017 0 22,500 45,000 67,500 90,000 React Angular Vue Polymer

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Declarative Code if (count === 0) { return

; } else if (count <= 99) { return (

{count}

); } else { return (

99+

); }

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

Create React App

Slide 43

Slide 43 text

Create React App

Slide 44

Slide 44 text

Ships with documentation!

Slide 45

Slide 45 text

Learning React https://vimeo.com/213710634

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

@spring_io #springio17 Progressive Web Apps

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Mobile Hates You! How to ﬁght back: Implement PRPL Get a ~$150-200 unlocked Android (e.g. Moto G4) Use chrome://inspect && chrome://inspect?tracing Lighthouse DevTools Network & CPU Throttling

Slide 51

Slide 51 text

The PRPL Pattern Push Render Pre-cache Lazy-load

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

More Authentication with React

Slide 56

Slide 56 text

@spring_io #springio17 JHipster jhipster.tech

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

@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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

developer.okta.com/blog

Slide 64

Slide 64 text

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