Bootiful Development with Spring Boot and React - RWX 2017
-
Upload
matt-raible -
Category
Software
-
view
62 -
download
0
Transcript of Bootiful Development with Spring Boot and React - RWX 2017
![Page 1: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/1.jpg)
Matt Raible | @mraible
Bootiful Development with Spring Boot and React
December 7, 2017 #RichWeb17
![Page 2: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/2.jpg)
![Page 3: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/3.jpg)
Blogger on raibledesigns.com
Web Developer and Java Champion
Father, Skier, Mountain Biker, Whitewater Rafter
Open Source Connoisseur
Who is Matt Raible?
Bus LoverOkta Developer Advocate
![Page 4: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/4.jpg)
![Page 5: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/5.jpg)
![Page 6: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/6.jpg)
![Page 8: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/8.jpg)
@spring_io #springio17
Okta Supports Authentication Standards
![Page 9: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/9.jpg)
What about You?
![Page 11: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/11.jpg)
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
![Page 12: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/12.jpg)
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
![Page 15: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/15.jpg)
@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> { }
![Page 16: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/16.jpg)
@spring_io #springio17
Microservices with Spring Boot
https://developer.okta.com/blog/2017/06/15/build-microservices-architecture-spring-boot
![Page 17: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/17.jpg)
Demo: Build a Spring Boot API
![Page 18: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/18.jpg)
ES6, ES7 and TypeScript
ES5: es5.github.io
ES6: git.io/es6features
ES7: bit.ly/es7features
TS: www.typescriptlang.org TSES7 ES6 ES5
![Page 19: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/19.jpg)
http://caniuse.com/#search=es5
![Page 20: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/20.jpg)
http://caniuse.com/#search=es6
![Page 21: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/21.jpg)
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
![Page 23: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/23.jpg)
TypeScript 2.3
![Page 24: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/24.jpg)
“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
![Page 25: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/25.jpg)
@spring_io #springio17
Leading JavaScript Frameworks in 2017
angular.io
facebook.github.io/react
vuejs.org
![Page 26: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/26.jpg)
![Page 27: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/27.jpg)
![Page 28: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/28.jpg)
“Angular and React dominate: Nothing else even comes close.”
![Page 29: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/29.jpg)
![Page 30: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/30.jpg)
Crunch the Numbers
![Page 31: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/31.jpg)
@spring_io #springio17
Hot Frameworks hotframeworks.com
![Page 32: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/32.jpg)
@spring_io #springio17
Jobs on Indeed (US)November 2017
0
2,000
4,000
6,000
8,000
React Angular Vue Polymer
![Page 33: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/33.jpg)
@spring_io #springio17
Stack Overflow Tags
November 2017
0
22,500
45,000
67,500
90,000
React Angular Vue Polymer
![Page 34: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/34.jpg)
Stack Overflow Trends
https://stackoverflow.blog/2017/05/09/introducing-stack-overflow-trends
![Page 35: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/35.jpg)
@spring_io #springio17
GitHub StarsNovember 2017
0
22,500
45,000
67,500
90,000
React Angular Vue Ember Polymer Backbone
![Page 36: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/36.jpg)
@spring_io #springio17
GitHub Star Growth
http://www.timqian.com/star-history
![Page 37: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/37.jpg)
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>
![Page 38: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/38.jpg)
Imperative Codeif (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);
![Page 39: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/39.jpg)
Declarative Codeif (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> ); }
![Page 40: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/40.jpg)
![Page 41: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/41.jpg)
![Page 42: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/42.jpg)
Create React App
![Page 43: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/43.jpg)
Create React App
![Page 44: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/44.jpg)
Ships with documentation!
![Page 45: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/45.jpg)
Learning React
https://vimeo.com/213710634
![Page 46: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/46.jpg)
@spring_io #springio17
Free React Courses on egghead.io
https://blog.kentcdodds.com/learn-react-fundamentals-and-advanced-patterns-eac90341c9db
![Page 47: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/47.jpg)
@spring_io #springio17
Progressive Web Apps
![Page 48: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/48.jpg)
![Page 50: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/50.jpg)
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
![Page 51: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/51.jpg)
The PRPL Pattern
Push
Render
Pre-cache
Lazy-load
![Page 52: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/52.jpg)
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
![Page 53: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/53.jpg)
Learn More about PWAs
https://developer.okta.com/blog/2017/07/20/the-ultimate-guide-to-progressive-web-applications
![Page 54: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/54.jpg)
Demo: Build a React Clientclass 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; … } }
![Page 55: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/55.jpg)
More Authentication with React
![Page 56: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/56.jpg)
@spring_io #springio17
JHipster jhipster.tech
![Page 57: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/57.jpg)
![Page 58: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/58.jpg)
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
![Page 59: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/59.jpg)
Action!
Try Spring Boot
Try React
Try Okta, I’ll buy you a 🍺!
Explore PWAs
Enjoy the bootiful experience!
![Page 60: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/60.jpg)
🔐 it down with Okta!
https://developer.okta.com/blog/2017/09/19/build-a-secure-notes-application-with-kotlin-typescript-and-okta
![Page 61: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/61.jpg)
@SpringBootApplication class NotesApplication
fun main(args: Array<String>) { 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<Note, Long>
![Page 64: Bootiful Development with Spring Boot and React - RWX 2017](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a6770f97f8b9a656a8b522d/html5/thumbnails/64.jpg)
Questions?Keep in touch!
raibledesigns.com
@mraible
Presentations
speakerdeck.com/mraible
Code
github.com/oktadeveloper