Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Matt Raible

May 18, 2017
Tweet

More Decks by Matt Raible

Other Decks in Technology

Transcript

  1. @spring_io
    #springio17
    Bootiful Development with
    Spring Boot and Angular

    Matt Raible
    @mraible

    View full-size 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 full-size slide

  3. @spring_io
    #springio17
    @spring_io
    #springio17
    Authentication Standards

    View full-size slide

  4. @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 full-size slide

  5. SPRING INITIALIZR @ start.spring.io

    View full-size slide

  6. @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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. @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 full-size slide

  11. @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 full-size slide

  12. @spring_io
    #springio17
    @spring_io
    #springio17
    bus.ts

    View full-size slide

  13. @spring_io
    #springio17
    TypeScript 2.3

    View full-size slide

  14. “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 full-size slide

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

    View full-size slide

  16. @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 full-size slide

  17. @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 full-size slide

  18. @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 full-size slide

  19. @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 full-size slide

  20. @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 full-size slide

  21. @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 full-size slide

  22. @spring_io
    #springio17
    Angular CLI

    View full-size slide

  23. @spring_io
    #springio17
    Angular CLI

    View full-size slide

  24. @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 full-size slide

  25. @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 full-size slide

  26. @spring_io
    #springio17
    Built-in Components






    let num = index">

    View full-size slide

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

    View full-size slide

  28. @spring_io
    #springio17
    The asterisk (*) effect



    Our heroes are true!




    Our heroes are true!


    View full-size slide

  29. @spring_io
    #springio17
    Angular Forms
    Template-Driven

    import { FormsModule } from '@angular/forms';
    Reactive Forms

    import { ReactiveFormsModule } from '@angular/forms';

    View full-size slide

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

    View full-size slide

  31. @spring_io
    #springio17
    Reactive Forms Validation

    Name
    formControlName="name" required>

    {{ formErrors.name }}


    View full-size slide

  32. @spring_io
    #springio17
    Data Architectures
    MVW / Two-way binding

    Flux

    Observables

    View full-size slide

  33. @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 full-size slide

  34. @spring_io
    #springio17
    Authentication with OpenID Connect
    http://developer.okta.com

    http://bit.ly/ng-okta

    youtube.com/watch?v=Kb56GzQ2pSk

    View full-size slide

  35. @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 full-size slide

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

    View full-size slide

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

    View full-size slide

  38. “We’ve failed on mobile”

    — Alex Russell

    https://youtu.be/K1SFnrf4jZo

    View full-size slide

  39. @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 full-size slide

  40. @spring_io
    #springio17
    The PRPL Pattern
    Push

    Render

    Pre-cache

    Lazy-load

    View full-size slide

  41. @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 full-size slide

  42. developer.okta.com/blog

    View full-size slide

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

    View full-size slide

  44. @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 full-size slide

  45. @spring_io
    #springio17
    Action!
    Try Spring Boot

    Try Angular

    Explore PWAs

    Enjoy the bootiful experience!

    View full-size slide

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

    View full-size slide

  47. @spring_io
    #springio17
    Questions?
    Keep in touch!

    raibledesigns.com

    @mraible

    Presentations

    speakerdeck.com/mraible

    Code

    github.com/mraible/ng-demo

    View full-size slide