Bootiful Development with Spring Boot and Angular - Spring IO 2017

To simplify development and deployment, you want everything in the same artifact, so you put your Angular app “inside” 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? A client app that can point to any server makes it easy to test your current client code against other servers (e.g. test, staging, production). This workshop shows how to develop with Java 8, Spring Boot, Angular 4, 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. If time allows we’ll cover microservices, security/authentication, continuous integration, and deployment to Cloud Foundry.

Prerequisites: Java 8, Maven 3.5.0, Node.js 6.9.5, Chrome (higher versions ok)

Install Angular CLI: npm install -g @angular/cli

Optional: Yarn instead of npm

Tutorial used for workshop: http://developer.okta.com/blog/2017/04/26/bootiful-development-with-spring-boot-and-angular

Transcript

1. @spring_io #springio17 Bootiful Development with Spring Boot and Angular 
 Matt Raible @mraible
2. Blogger on raibledesigns.com Web Developer and Java Champion Father, Skier, Mountain Biker, Whitewater Rafter Open Source Connoisseur Who is Matt Raible? Bus Lover Okta Developer Advocate
5. @spring_io #springio17 @spring_io #springio17 Authentication Standards
6. @spring_io #springio17 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. SPRING INITIALIZR @ start.spring.io
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 PagingAndSortingRepository<Blog, Long> { }
10. @spring_io #springio17 @spring_io #springio17 Microservices with Spring Boot
11. @spring_io #springio17 @spring_io #springio17 Secure Microservices with Spring Boot
12. @spring_io #springio17 Demo: Build a Spring Boot API
13. @spring_io #springio17 ES6, ES7 and TypeScript ES5: es5.github.io ES6: git.io/es6features ES7: bit.ly/es7features TS: www.typescriptlang.org TS ES7 ES6 ES5
16. @spring_io #springio17 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
17. @spring_io #springio17 @spring_io #springio17 bus.ts
18. @spring_io #springio17 TypeScript 2.3
19. “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
20. @spring_io #springio17 @spring_io #springio17 Leading JavaScript Frameworks in 2017 angular.io facebook.github.io/react vuejs.org
23. @spring_io #springio17 @spring_io #springio17 Jobs on Indeed May 2017 0 2,000 4,000 6,000 8,000 Angular Aurelia Backbone Ember Knockout React Vue
24. @spring_io #springio17 @spring_io #springio17 Stack Overflow Tags May 2017 0 12,500 25,000 37,500 50,000 Angular Aurelia Backbone Knockout Ember React Vue
25. @spring_io #springio17 @spring_io #springio17 GitHub Stars May 2017 0 17,500 35,000 52,500 70,000 Angular Aurelia Backbone Knockout Ember React Vue
26. @spring_io #springio17 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> https://angular.io/docs/ts/latest/quickstart.html
27. @spring_io #springio17 Hello World with Angular import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
28. @spring_io #springio17 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);
30. @spring_io #springio17 Angular CLI
31. @spring_io #springio17 Angular CLI
32. @spring_io #springio17 Get Started with Angular Angular QuickStart https://angular.io/docs/ts/latest/quickstart.html Angular Seed https://github.com/mgechev/angular-seed Angular Seed Advanced https://github.com/NathanWalker/angular-seed-advanced
33. @spring_io #springio17 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) ) } }
34. @spring_io #springio17 Built-in Components <div *ngIf="str == 'yes'"></div> <div [ngSwitch]="myVar"> <div *ngSwitchWhen="'A'"></div> </div> <div [ngStyle]="{color: colorinput.value}"></div> <div [ngClass]="{bordered: true}"></div> <div *ngFor="let item of items; let num = index"></div>
35. @spring_io #springio17 The asterisk (*) effect https://angular.io/docs/ts/latest/guide/structural-directives.html#!#asterisk <div *ngIf="hero">{{hero}}</div> <div *ngFor="let hero of heroes">{{hero}}</div>
36. @spring_io #springio17 The asterisk (*) effect <!-- Examples (A) and (B) are the same --> <!-- (A) *ngIf paragraph --> <p *ngIf="condition"> Our heroes are true! </p> <!-- (B) [ngIf] with template --> <template [ngIf]="condition"> <p> Our heroes are true! </p> </template>
37. @spring_io #springio17 Angular Forms Template-Driven import { FormsModule } from '@angular/forms'; Reactive Forms import { ReactiveFormsModule } from '@angular/forms';
38. @spring_io #springio17 Template-Driven Validation <label for="name">Name</label> <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name" #name="ngModel" > <div [hidden]="name.valid || name.pristine" class="alert alert-danger"> Name is required </div>
39. @spring_io #springio17 Reactive Forms Validation <form [formGroup]="heroForm" *ngIf="active" (ngSubmit)="onSubmit()"> <label for="name">Name</label> <input type="text" id="name" class="form-control" formControlName="name" required> <div *ngIf="formErrors.name" class="alert alert-danger"> {{ formErrors.name }} </div> </form>
40. @spring_io #springio17 Data Architectures MVW / Two-way binding Flux Observables
41. @spring_io #springio17 Observables and RxJS Promises emit a single value whereas streams emit many values Imperative code “pulls” data whereas reactive streams “push” data RxJS is functional Streams are composable
42. @spring_io #springio17 Authentication with OpenID Connect http://developer.okta.com http://bit.ly/ng-okta youtube.com/watch?v=Kb56GzQ2pSk
44. @spring_io #springio17 ng-book 2 A comprehensive guide to developing with Angular 4 Worth all your hard earned $$$ https://www.ng-book.com/2 “Thank you for the awesome book, it's the bible for Angular.” — Vijay Ganta
45. @spring_io #springio17 @spring_io #springio17 Server-Side Java Support
46. @spring_io #springio17 @spring_io #springio17 Progressive Web Apps
48. “We’ve failed on mobile” — Alex Russell https://youtu.be/K1SFnrf4jZo
49. @spring_io #springio17 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
50. @spring_io #springio17 The PRPL Pattern Push Render Pre-cache Lazy-load
51. @spring_io #springio17 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
52. developer.okta.com/blog
53. @spring_io #springio17 @spring_io #springio17 JHipster jhipster.github.io
55. @spring_io #springio17 The JHipster Mini-Book 2.0 Release on Dec 5, 2016 jhipster-book.com 21-points.com @jhipster_book Write your own InfoQ mini-book! github.com/mraible/infoq-mini-book
56. @spring_io #springio17 Action! Try Spring Boot Try Angular Explore PWAs Enjoy the bootiful experience!
57. @spring_io #springio17 Lab: Bootiful Development http://bit.ly/boot-and-ng
58. @spring_io #springio17 Questions? Keep in touch! raibledesigns.com @mraible Presentations speakerdeck.com/mraible Code github.com/mraible/ng-demo