Download as PDF, PPTX
![@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-dublinjug2018-180913000020/75/Bootiful-Development-with-Spring-Boot-and-React-Dublin-JUG-2018-14-2048.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-dublinjug2018-180913000020/75/Bootiful-Development-with-Spring-Boot-and-React-Dublin-JUG-2018-48-2048.jpg)
Uploaded byMatt Raible
Bootiful Development with Spring Boot and React - Dublin JUG 2018
The document outlines a presentation by Matt Raible on developing applications using Spring Boot and React, highlighting the integration of authentication and authorization standards. It covers essential topics like microservices, Progressive Web Apps (PWAs), and the use of TypeScript in modern web development. Additionally, it provides code snippets and resources for further exploration, including JHipster and securing applications with Okta.
More Related Content
Similar to Bootiful Development with Spring Boot and React - Dublin JUG 2018
![[DevDay 2017] ReactJS Hands on - Speaker: Binh Phan - Developer at mgm techno...](https://cdn.slidesharecdn.com/ss_thumbnails/binhphanreactjs-170420085708-thumbnail.jpg?width=640&height=640&fit=bounds)
Bootiful Development with Spring Boot and React - Dublin JUG 2018
- 1. Matt Raible |@mraible Bootiful Development with Spring Boot and React September 12, 2018 https://www.flickr.com/photos/zachwerner/7513254696
- 2. Blogger on raibledesigns.comand 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
- 6.
- 7.
- 8.
- 9.
- 10. OAuth 2.0 Overview Today’sAgenda Why Spring Boot? Demo: Developing with Spring Boot Introduction to ES6 and TypeScript Why React? Demo: Developing with React Introduction to PWAs and JHipster
- 11. Spring Boot Automatically configuresSpring 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
- 12. SPRING INITIALIZR @start.spring.io
- 14. @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> { }
- 15. @spring_io #springio17 Microservices with SpringBoot https://developer.okta.com/blog/2017/06/15/build-microservices-architecture-spring-boot
- 16. @spring_io #springio17 Secure Microservices withSpring Boot https://developer.okta.com/blog/2018/02/13/secure-spring-microservices-with-oauth
- 17. Demo: Build aSpring Boot API
- 18. ES6, ES7 andTypeScript ES5: es5.github.io ES6: git.io/es6features ES7: bit.ly/es7features TS: www.typescriptlang.org TSES7ES6ES5
- 19. 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.
- 21. “Node.js is aJavaScript 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
- 22. @spring_io #springio17 Leading JavaScript Frameworksin 2018 angular.io facebook.github.io/react vuejs.org
- 25. “Angular and Reactdominate: Nothing else even comes close.”
- 27.
- 28.
- 29. @spring_io #springio17 Jobs on Indeed(US) September 2018 0 2,500 5,000 7,500 10,000 React Angular Vue Vanilla
- 30. @spring_io #springio17 Stack Overflow Tags September2018 0 35,000 70,000 105,000 140,000 React Angular Vue
- 31.
- 32.
- 33. Hello World withReact http://codepen.io/gaearon/pen/ZpvBNJ?editors=0100 <div id="root"></div> <script> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') ); </script>
- 34. 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);
- 35. 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> ); }
- 38.
- 39.
- 40.
- 41.
- 42. @spring_io #springio17 React Courses onegghead.io https://blog.kentcdodds.com/learn-react-fundamentals-and-advanced-patterns-eac90341c9db
- 43.
- 44. “We’ve failed onmobile” — Alex Russell https://youtu.be/K1SFnrf4jZo
- 45. Mobile Hates You! Howto 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
- 46. The PRPL Pattern Pushcritical resources for the initial URL route Render initial route Pre-cache remaining routes Lazy-load and create remaining routes on demand
- 47. Learn More aboutPWAs https://developer.okta.com/blog/2017/07/20/the-ultimate-guide-to-progressive-web-applications
- 48. Demo: Build aReact 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; … } }
- 49.
- 50. @spring_io #springio17 JHipster jhipster.tech JHipster isa development platform to generate, develop and deploy Spring Boot + Angular/React Web applications and Spring microservices.
- 52. The JHipster Mini-Book 4.5Release on April 6, 2018 jhipster-book.com 21-points.com @jhipster_book Write your own InfoQ mini-book! github.com/mraible/infoq-mini-book
- 53. Action! Try Spring Boot TryReact Try Okta Explore PWAs Enjoy the bootiful experience!
- 54. 🔐 it downwith Okta! https://developer.okta.com/blog/2017/09/19/build-a-secure-notes-application-with-kotlin-typescript-and-okta
- 55. @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>
- 56.
- 57. CRUD with Reactand Spring Boot http://bit.ly/react-boot-crud
- 58. Bootiful React witha Java EE API https://developer.okta.com/blog/2018/09/12/secure-java-ee-rest-api
- 59.
- 60.