Bootiful Development with Spring Boot and React
1 like•3,119 views
The document presents an overview of developing web applications using Spring Boot and React, highlighting key features such as OAuth 2.0, microservices architecture, and the integration of TypeScript. It includes code examples and insights on using Progressive Web Apps (PWAs) while also discussing the JavaScript framework landscape in 2017. Additionally, it emphasizes the importance of secure authentication methods and encourages exploration of the technologies mentioned.
![@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> {
}](https://image.slidesharecdn.com/bootifuldevelopmentwithspringbootandreact-171213001036/85/Bootiful-Development-with-Spring-Boot-and-React-22-320.jpg)
![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;
…
}
}](https://image.slidesharecdn.com/bootifuldevelopmentwithspringbootandreact-171213001036/85/Bootiful-Development-with-Spring-Boot-and-React-60-320.jpg)
Bootiful Development with Spring Boot and React
- 1. Bootiful Development with Spring Boot and React By Matt Raible @mraible + = 🌅
- 3. Matt Raible
- 15. @spring_io #springio17 Okta Supports Authentication Standards
- 16. What about You?
- 18. 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
- 19. 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
- 20. SPRING INITIALIZR @ start.spring.io
- 22. @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> { }
- 23. @spring_io #springio17 Microservices with Spring Boot https://developer.okta.com/blog/2017/06/15/build-microservices-architecture-spring-boot
- 24. Demo: Build a Spring Boot API
- 25. ES6, ES7 and TypeScript ES5: es5.github.io ES6: git.io/es6features ES7: bit.ly/es7features TS: www.typescriptlang.org TSES7ES6ES5
- 28. 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
- 30. TypeScript 2.3
- 31. “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
- 32. @spring_io #springio17 Leading JavaScript Frameworks in 2017 angular.io facebook.github.io/react vuejs.org
- 35. “Angular and React dominate: Nothing else even comes close.”
- 39. @spring_io #springio17 Jobs on Indeed (US) November 2017 0 2,000 4,000 6,000 8,000 React Angular Vue Polymer
- 40. @spring_io #springio17 Stack Overflow Tags November 2017 0 22,500 45,000 67,500 90,000 React Angular Vue Polymer
- 42. @spring_io #springio17 GitHub Stars November 2017 0 22,500 45,000 67,500 90,000 React Angular Vue Ember Polymer Backbone
- 43. @spring_io #springio17 GitHub Star Growth http://www.timqian.com/star-history
- 44. 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>
- 45. 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);
- 46. Declarative Code if (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> ); }
- 49. Create React App
- 50. Create React App
- 55. “We’ve failed on mobile” — Alex Russell https://youtu.be/K1SFnrf4jZo
- 56. 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
- 57. The PRPL Pattern Push Render Pre-cache Lazy-load
- 58. 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
- 59. Learn More about PWAs https://developer.okta.com/blog/2017/07/20/the-ultimate-guide-to-progressive-web-applications
- 60. 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; … } }
- 61. More Authentication with React
- 64. 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
- 65. Action! Try Spring Boot Try React Try Okta, I’ll buy you a 🍺! Explore PWAs Enjoy the bootiful experience!
- 66. 🔐 it down with Okta! https://developer.okta.com/blog/2017/09/19/build-a-secure-notes-application-with-kotlin-typescript-and-okta
- 67. @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>