Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Bootiful Development with Spring Boot and Angular - RWX 2018

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige

Hier ansehen

1 von 58 Anzeige

Bootiful Development with Spring Boot and Angular - RWX 2018

Herunterladen, um offline zu lesen

To simplify development and deployment, you want everything in the same artifact, so you put on your Angular app “inside” and your Spring Boot app, right? But what if you could create your Angular app as a standalone app and make cross-origin requests to your API?

This session shows how to develop with Java 11, Spring Boot, Angular 7, and TypeScript. You'll learn how to create REST endpoints with Spring MVC, Spring Data REST, configure Spring Boot to allow CORS, and create an Angular app to display its data.

Blog: https://developer.okta.com/blog/2017/04/26/bootiful-development-with-spring-boot-and-angular
GitHub: https://github.com/oktadeveloper/spring-boot-angular-example
Screencast: https://www.youtube.com/watch?v=GhBwKT7EJsY

To simplify development and deployment, you want everything in the same artifact, so you put on your Angular app “inside” and your Spring Boot app, right? But what if you could create your Angular app as a standalone app and make cross-origin requests to your API?

This session shows how to develop with Java 11, Spring Boot, Angular 7, and TypeScript. You'll learn how to create REST endpoints with Spring MVC, Spring Data REST, configure Spring Boot to allow CORS, and create an Angular app to display its data.

Blog: https://developer.okta.com/blog/2017/04/26/bootiful-development-with-spring-boot-and-angular
GitHub: https://github.com/oktadeveloper/spring-boot-angular-example
Screencast: https://www.youtube.com/watch?v=GhBwKT7EJsY

Anzeige
Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Ähnlich wie Bootiful Development with Spring Boot and Angular - RWX 2018 (20)

Anzeige

Weitere von Matt Raible (20)

Aktuellste (20)

Anzeige

Bootiful Development with Spring Boot and Angular - RWX 2018

  1. 1. Matt Raible | @mraible Bootiful Development w/ Spring Boot and Angular December 4, 2018 https://www.flickr.com/photos/captainkimo/15356999583 #RWX2018
  2. 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
  3. 3. What about You?
  4. 4. Bootiful Development http://bit.ly/boot-and-ng
  5. 5. OAuth 2.0 Overview Today’s Agenda Why Spring Boot? Demo: Developing with Spring Boot Introduction to ES6 and TypeScript Why Angular? Demo: Developing with Angular Introduction to PWAs and JHipster
  6. 6. 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
  7. 7. @spring_io #springio17 Another Perspective https://twitter.com/phillip_webb/status/641444531867680768 “You can’t make a delicious cake without the correct ingredients!”
  8. 8. SPRING INITIALIZR @ start.spring.io
  9. 9. @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> { }
  10. 10. @spring_io #springio17 Microservices with Spring Boot https://developer.okta.com/blog/2017/06/15/build-microservices-architecture-spring-boot
  11. 11. Demo: Build a Spring Boot API
  12. 12. ES6, ES7 and TypeScript ES5: es5.github.io ES6: git.io/es6features ES7: bit.ly/es7features TS: www.typescriptlang.org TSES7ES6ES5
  13. 13. 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
  14. 14. @spring_io #springio17 bus.ts
  15. 15. “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
  16. 16. @spring_io #springio17 Leading JavaScript Frameworks in 2018 angular.io facebook.github.io/react vuejs.org
  17. 17. “Angular and React dominate: Nothing else even comes close.”
  18. 18. Crunch the Numbers
  19. 19. @spring_io #springio17 Hot Frameworks hotframeworks.com
  20. 20. @spring_io #springio17 Jobs on Indeed (US) December 2018 0 2,750 5,500 8,250 11,000 React Angular Vue
  21. 21. @spring_io #springio17 Stack Overflow Tags December 2018 0 40,000 80,000 120,000 160,000 React Angular Vue
  22. 22. @spring_io #springio17 GitHub Stars December 2018 0 32,500 65,000 97,500 130,000 React Angular Vue
  23. 23. @spring_io #springio17 GitHub Star Growth http://www.timqian.com/star-history
  24. 24. Hello World with Angular import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>` }) export class AppComponent { name = 'World'; } <my-app></my-app>
  25. 25. Hello World with Angular import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
  26. 26. Hello World with Angular import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if (environment.production) { enableProdMode(); } platformBrowserDynamic().bootstrapModule(AppModule);
  27. 27. Angular CLI
  28. 28. Angular CLI
  29. 29. Angular CLI
  30. 30. Get Started with Angular Angular QuickStart https://angular.io/guide/quickstart Angular Seed https://github.com/mgechev/angular-seed Angular Seed Advanced https://github.com/NathanWalker/angular-seed-advanced
  31. 31. Demo: Build an Angular Client export class BeerListComponent implements OnInit { beers: Array<any>; constructor(private beerService: BeerService, private giphyService: GiphyService) { } ngOnInit() { this.beerService.getAll().subscribe( data => { this.beers = data; for (let beer of this.beers) { this.giphyService.get(beer.name).subscribe(url => { beer.giphyUrl = url; }); } }, error => console.log(error) ) } }
  32. 32. @spring_io #springio17 Progressive Web Apps
  33. 33. “We’ve failed on mobile” — Alex Russell https://youtu.be/K1SFnrf4jZo
  34. 34. 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
  35. 35. 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
  36. 36. Learn More about PWAs https://developer.okta.com/blog/2017/07/20/the-ultimate-guide-to-progressive-web-applications
  37. 37. @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. 
  38. 38. @spring_io #springio17 Microservices with JHipster
  39. 39. The JHipster Mini-Book 5.0 Release on November 14, 2018 jhipster-book.com 21-points.com @jhipster_book Write your own InfoQ mini-book! github.com/mraible/infoq-mini-book
  40. 40. Action! Try Spring Boot Try Angular Try OIDC Explore PWAs Enjoy the bootifulness!
  41. 41. Try Kotlin https://developer.okta.com/blog/2017/09/19/build-a-secure-notes-application-with-kotlin-typescript-and-okta
  42. 42. @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>
  43. 43. DIY: Bootiful Development http://bit.ly/boot-and-ng
  44. 44. @spring_io #springio17 Angular 7 Goodness https://developer.okta.com/blog/2018/12/04/angular-7-oidc-oauth2-pkce
  45. 45. @spring_io #springio17 Angular 7 + Spring Boot 2.1 Screencast https://youtu.be/HoDzatvGDlI
  46. 46. Security Books https://developer.okta.com/books/api-securityhttps://www.oauth.com
  47. 47. developer.okta.com/blog @oktadev
  48. 48. Questions? Keep in touch! raibledesigns.com @mraible Presentations speakerdeck.com/mraible Code github.com/oktadeveloper
  49. 49. developer.okta.com

×