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

Bootiful Development with Spring Boot and Angular - Oktane17

Bootiful Development with Spring Boot and Angular - Oktane17

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

YouTube: https://www.youtube.com/watch?v=MrrI3A80rtI

Matt Raible

August 30, 2017
Tweet

More Decks by Matt Raible

Other Decks in Programming

Transcript

  1. Bootiful Development with
    Spring Boot and Angular
    Matt Raible | Developer Advocate
    @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
    Okta Supports Authentication Standards

    View full-size slide

  4. What about You?

    View full-size slide

  5. Bootiful Development
    http://bit.ly/boot-and-ng

    View full-size slide

  6. 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

    View full-size slide

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

  8. SPRING INITIALIZR @ start.spring.io

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

  10. @spring_io
    #springio17
    Microservices with Spring Boot
    https://developer.okta.com/blog/2017/06/15/build-microservices-architecture-spring-boot

    View full-size slide

  11. @spring_io
    #springio17
    Secure Microservices with Spring Boot
    https://developer.okta.com/blog/2017/08/08/secure-spring-microservices

    View full-size slide

  12. Demo: Build a Spring Boot API

    View full-size slide

  13. 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

  14. http://caniuse.com/#search=es5

    View full-size slide

  15. http://caniuse.com/#search=es6

    View full-size slide

  16. 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

  17. @spring_io
    #springio17
    bus.ts

    View full-size slide

  18. “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

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

    View full-size slide

  20. @spring_io
    #springio17
    Jobs on Indeed
    August 2017
    0
    1,750
    3,500
    5,250
    7,000
    Angular Aurelia Backbone Ember Knockout React Vue

    View full-size slide

  21. @spring_io
    #springio17
    Stack Overflow Tags
    August 2017
    0
    17,500
    35,000
    52,500
    70,000
    Angular Aurelia Backbone Knockout Ember React Vue

    View full-size slide

  22. @spring_io
    #springio17
    GitHub Stars
    August 2017
    0
    20,000
    40,000
    60,000
    80,000
    Angular Aurelia Backbone Knockout Ember React Vue

    View full-size slide

  23. @spring_io
    #springio17
    GitHub Star Growth

    View full-size slide

  24. Hello World with Angular
    import { Component } from '@angular/core';
    @Component({
    selector: 'my-app',
    template: `Hello {{name}}`
    })
    export class AppComponent {
    name = 'World';
    }

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. 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

  28. 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

  29. @spring_io
    #springio17
    Progressive Web Apps

    View full-size slide

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

    View full-size slide

  31. 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

  32. Action!
    Try Spring Boot

    Try Angular

    Explore PWAs

    Enjoy the bootiful experience!

    View full-size slide

  33. DIY: Bootiful Development
    http://bit.ly/boot-and-ng

    View full-size slide

  34. it down with Okta!
    https://scotch.io/tutorials/build-a-secure-notes-application-with-kotlin-typescript-and-okta

    View full-size slide

  35. https://virtualjug.com/building-robust-apis-and-apps-with-spring-boot-and-angular/

    View full-size slide

  36. developer.okta.com/blog

    View full-size slide

  37. Questions?
    Keep in touch!

    raibledesigns.com

    @mraible

    Presentations

    speakerdeck.com/mraible

    Code

    github.com/oktadeveloper

    View full-size slide