Bootiful Development with Spring Boot and Angular - RWX 2018

72a2082c6a4dd79ad68befb3db911616?s=47 Matt Raible
December 04, 2018

Bootiful Development with Spring Boot and Angular - RWX 2018

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 11, Spring Boot, Angular 7, 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.



Matt Raible

December 04, 2018


  1. Matt Raible | @mraible Bootiful Development w/ Spring Boot and

    Angular December 4, 2018 #RWX2018
  2. Blogger on and 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. None
  6. What about You?

  7. Bootiful Development

  8. 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
  9. 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
  10. @spring_io #springio17 Another Perspective “You can’t make a delicious

    cake without the correct ingredients!”

  12. None
  13. @SpringBootApplication public class DemoApplication { public static void main(String[] args)

    {, args); } } @Entity class Blog { @Id @GeneratedValue private Long id; private String name; // getters, setters, toString(), etc } @RepositoryRestResource interface BlogRepository extends JpaRepository<Blog, Long> { }
  14. @spring_io #springio17 Microservices with Spring Boot

  15. Demo: Build a Spring Boot API

  16. ES6, ES7 and TypeScript ES5: ES6: ES7:

    TS: TS ES7 ES6 ES5
  17. TypeScript $ npm install -g typescript function greeter(person: string) {

    return "Hello, " + person;
 var user = "Jane User";
 document.body.innerHTML = greeter(user); $ tsc greeter.ts
  18. @spring_io #springio17 bus.ts

  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.”
  20. @spring_io #springio17 Leading JavaScript Frameworks in 2018

  21. None
  22. None
  23. “Angular and React dominate: Nothing else even comes close.”

  24. None
  25. Crunch the Numbers

  26. @spring_io #springio17 Hot Frameworks

  27. @spring_io #springio17 Jobs on Indeed (US) December 2018 0 2,750

    5,500 8,250 11,000 React Angular Vue
  28. @spring_io #springio17 Stack Overflow Tags December 2018 0 40,000 80,000

    120,000 160,000 React Angular Vue
  29. @spring_io #springio17 GitHub Stars December 2018 0 32,500 65,000 97,500

    130,000 React Angular Vue
  30. @spring_io #springio17 GitHub Star Growth

  31. 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>
  32. 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 { }
  33. 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);
  34. None
  35. Angular CLI

  36. Angular CLI

  37. Angular CLI

  38. Get Started with Angular Angular QuickStart Angular Seed

    Angular Seed Advanced
  39. 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.giphyUrl = url; }); } }, error => console.log(error) ) } }
  40. @spring_io #springio17 Progressive Web Apps

  41. “We’ve failed on mobile” — Alex Russell

  42. 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
  43. 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
  44. Learn More about PWAs

  45. @spring_io #springio17 JHipster JHipster is a development platform to

    generate, develop and deploy Spring Boot + Angular/React Web applications and Spring microservices.
  46. @spring_io #springio17 Microservices with JHipster

  47. None
  48. The JHipster Mini-Book 5.0 Release on November 14, 2018 @jhipster_book Write your own InfoQ mini-book!
  49. Action! Try Spring Boot Try Angular Try OIDC Explore PWAs

    Enjoy the bootifulness!
  50. Try Kotlin

  51. @SpringBootApplication class NotesApplication fun main(args: Array<String>) {, *args) }

    @Entity data class Note(@Id @GeneratedValue var id: Long? = null, var text: String? = null, @JsonIgnore var user: String? = null) @RepositoryRestResource interface NotesRepository : JpaRepository<Note, Long>
  52. DIY: Bootiful Development

  53. @spring_io #springio17 Angular 7 Goodness

  54. @spring_io #springio17 Angular 7 + Spring Boot 2.1 Screencast

  55. Security Books

  56. @oktadev

  57. Questions? Keep in touch! @mraible Presentations Code