Bootiful Development with Spring Boot and React - GIDS 2019
0 likes211 views
The document presents a guide on developing applications using Spring Boot and React, emphasizing features such as production-ready capabilities and support for JSON. It covers various topics including ES6, TypeScript, Progressive Web Apps (PWAs), and microservices architecture. Additionally, it provides tutorials and resources for utilizing these technologies effectively in projects.
![@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-gids2019-190424025318/85/Bootiful-Development-with-Spring-Boot-and-React-GIDS-2019-13-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-gids2019-190424025318/85/Bootiful-Development-with-Spring-Boot-and-React-GIDS-2019-43-320.jpg)
Bootiful Development with Spring Boot and React - GIDS 2019
- 1. Matt Raible | @mraible Bootiful Development with Spring Boot and React April 23, 2019 Photo by Premnath Thirumalaisam https://www.flickr.com/photos/premnath/9939139384
- 2. Blogger on raibledesigns.com and developer.okta.com/blog Web Developer and Java Champion Father, Skier, Mountain Biker, Whitewater Rafter Open Source Connoisseur Who is Matt Raible? Bus Lover Okta Developer Advocate
- 8. Bootiful Development http://bit.ly/boot-and-react
- 9. 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
- 10. 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
- 11. SPRING INITIALIZR @ start.spring.io
- 13. @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> { }
- 14. @spring_io #springio17 Microservices with Spring Boot https://developer.okta.com/blog/2017/06/15/build-microservices-architecture-spring-boot
- 15. @spring_io #springio17 Secure Microservices with Spring Boot https://developer.okta.com/blog/2018/02/13/secure-spring-microservices-with-oauth
- 16. Demo: Build a Spring Boot API
- 17. ES6, ES7 and TypeScript ES5: es5.github.io ES6: git.io/es6features ES7: bit.ly/es7features TS: www.typescriptlang.org TSES7ES6ES5
- 18. 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
- 20. “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
- 21. @spring_io #springio17 Leading JavaScript Frameworks in 2019 angular.io facebook.github.io/react vuejs.org
- 23. “2018: The Year of React React won the popularity battle in 2017.”
- 25. “React kept a firm grip on its lead in 2018.”
- 29. Jobs on Indeed (US) April 2019 0 2,500 5,000 7,500 10,000 React Angular Vue Vanilla
- 30. Stack Overflow Tags April 2019 0 45,000 90,000 135,000 180,000 React Angular Vue
- 31. GitHub Stars April 2019 0 35,000 70,000 105,000 140,000 React Angular Vue
- 32. 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>
- 33. 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);
- 34. 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> ); }
- 37. @spring_io #springio17 React Courses on egghead.io https://blog.kentcdodds.com/learn-react-fundamentals-and-advanced-patterns-eac90341c9db
- 39. “We’ve failed on mobile” — Alex Russell https://youtu.be/K1SFnrf4jZo
- 40. 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
- 41. 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
- 42. Learn More about PWAs https://developer.okta.com/blog/2017/07/20/the-ultimate-guide-to-progressive-web-applications
- 43. 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; … } }
- 44. @spring_io #springio17 JHipster jhipster.tech JHipster is a development platform to generate, develop and deploy Spring Boot + Angular/React Web applications and Spring microservices. and Vue! ✨
- 46. The JHipster Mini-Book 5.0.2 Released last week! jhipster-book.com 21-points.com @jhipster_book Write your own InfoQ mini-book! github.com/mraible/infoq-mini-book
- 47. Action! Try Spring Boot Try React Try Okta Explore PWAs Enjoy the bootiful experience!
- 49. CRUD with React and Spring Boot http://bit.ly/react-boot-crud
- 50. Bootiful React with a Java EE API https://developer.okta.com/blog/2018/09/12/secure-java-ee-rest-api