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
   

   View Slide

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
   

   View Slide

3. View Slide

4. View Slide

5. @spring_io
   #springio17
   @spring_io
   #springio17
   Authentication Standards
   

   View Slide

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
   

   View Slide

7. SPRING INITIALIZR @ start.spring.io
   

   View Slide

8. View Slide

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 {
   }
   

   View Slide

10. @spring_io
    #springio17
    @spring_io
    #springio17
    Microservices with Spring Boot
    

    View Slide

11. @spring_io
    #springio17
    @spring_io
    #springio17
    Secure Microservices with Spring Boot
    

    View Slide

12. @spring_io
    #springio17
    Demo: Build a Spring Boot API
    

    View Slide

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
    

    View Slide

14. View Slide

15. View Slide

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
    

    View Slide

17. @spring_io
    #springio17
    @spring_io
    #springio17
    bus.ts
    

    View Slide

18. @spring_io
    #springio17
    TypeScript 2.3
    

    View Slide

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
    

    View Slide

20. @spring_io
    #springio17
    @spring_io
    #springio17
    Leading JavaScript Frameworks in 2017
    angular.io
    facebook.github.io/react
    vuejs.org
    

    View Slide

21. View Slide

22. View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

26. @spring_io
    #springio17
    Hello World with Angular
    import { Component } from '@angular/core';
    @Component({
    selector: 'my-app',
    template: `Hello {{name}}`
    })
    export class AppComponent {
    name = 'World';
    }
    
    https://angular.io/docs/ts/latest/quickstart.html
    

    View Slide

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 { }
    

    View Slide

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);
    

    View Slide

29. View Slide

30. @spring_io
    #springio17
    Angular CLI
    

    View Slide

31. @spring_io
    #springio17
    Angular CLI
    

    View Slide

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
    

    View Slide

33. @spring_io
    #springio17
    Demo: Build an Angular Client
    export class BeerListComponent implements OnInit {
    beers: Array;
    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)
    )
    }
    }
    

    View Slide

34. @spring_io
    #springio17
    Built-in Components
    
    
    
    
    
    
    let num = index">
    

    View Slide

35. @spring_io
    #springio17
    The asterisk (*) effect
    https://angular.io/docs/ts/latest/guide/structural-directives.html#!#asterisk
    {{hero}}
    {{hero}}
    

    View Slide

36. @spring_io
    #springio17
    The asterisk (*) effect
    
    
    
    Our heroes are true!
    
    
    
    
    Our heroes are true!
    
    
    

    View Slide

37. @spring_io
    #springio17
    Angular Forms
    Template-Driven
    
    import { FormsModule } from '@angular/forms';
    Reactive Forms
    
    import { ReactiveFormsModule } from '@angular/forms';
    

    View Slide

38. @spring_io
    #springio17
    Template-Driven Validation
    Name
    required
    [(ngModel)]="model.name" name="name"
    #name="ngModel" >
    class="alert alert-danger">
    Name is required
    
    

    View Slide

39. @spring_io
    #springio17
    Reactive Forms Validation
    
    Name
    formControlName="name" required>
    
    {{ formErrors.name }}
    
    
    

    View Slide

40. @spring_io
    #springio17
    Data Architectures
    MVW / Two-way binding
    
    Flux
    
    Observables
    

    View Slide

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
    

    View Slide

42. @spring_io
    #springio17
    Authentication with OpenID Connect
    http://developer.okta.com
    
    http://bit.ly/ng-okta
    
    youtube.com/watch?v=Kb56GzQ2pSk
    

    View Slide

43. View Slide

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
    

    View Slide

45. @spring_io
    #springio17
    @spring_io
    #springio17
    Server-Side Java Support
    

    View Slide

46. @spring_io
    #springio17
    @spring_io
    #springio17
    Progressive Web Apps
    

    View Slide

47. View Slide

48. “We’ve failed on mobile”
    
    — Alex Russell
    
    https://youtu.be/K1SFnrf4jZo
    

    View Slide

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
    

    View Slide

50. @spring_io
    #springio17
    The PRPL Pattern
    Push
    
    Render
    
    Pre-cache
    
    Lazy-load
    

    View Slide

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
    

    View Slide

52. developer.okta.com/blog
    

    View Slide

53. @spring_io
    #springio17
    @spring_io
    #springio17
    JHipster jhipster.github.io
    

    View Slide

54. View Slide

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
    

    View Slide

56. @spring_io
    #springio17
    Action!
    Try Spring Boot
    
    Try Angular
    
    Explore PWAs
    
    Enjoy the bootiful experience!
    

    View Slide

57. @spring_io
    #springio17
    Lab: Bootiful Development
    http://bit.ly/boot-and-ng
    

    View Slide

58. @spring_io
    #springio17
    Questions?
    Keep in touch!
    
    raibledesigns.com
    
    @mraible
    
    Presentations
    
    speakerdeck.com/mraible
    
    Code
    
    github.com/mraible/ng-demo
    

    View Slide