Bootiful Development with Spring Boot and Angular - Spring IO 2017

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

72a2082c6a4dd79ad68befb3db911616?s=128

Matt Raible

May 18, 2017
Tweet

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
  3. None
  4. None
  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

  8. None
  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
  14. None
  15. None
  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
  21. None
  22. None
  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);
  29. None
  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

  43. None
  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

  47. None
  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

  54. None
  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