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

72a2082c6a4dd79ad68befb3db911616?s=128

Matt Raible
PRO

August 30, 2017
Tweet

Transcript

  1. Bootiful Development with Spring Boot and Angular Matt Raible |

    Developer Advocate @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. @spring_io #springio17 Okta Supports Authentication Standards

  4. What about You?

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

  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
  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
  8. SPRING INITIALIZR @ start.spring.io

  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 Microservices with Spring Boot https://developer.okta.com/blog/2017/06/15/build-microservices-architecture-spring-boot

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

  12. Demo: Build a Spring Boot API

  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
  14. http://caniuse.com/#search=es5

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

  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
  17. @spring_io #springio17 bus.ts

  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
  19. @spring_io #springio17 Leading JavaScript Frameworks in 2017 angular.io facebook.github.io/react vuejs.org

  20. None
  21. None
  22. @spring_io #springio17 Jobs on Indeed August 2017 0 1,750 3,500

    5,250 7,000 Angular Aurelia Backbone Ember Knockout React Vue
  23. @spring_io #springio17 Stack Overflow Tags August 2017 0 17,500 35,000

    52,500 70,000 Angular Aurelia Backbone Knockout Ember React Vue
  24. @spring_io #springio17 GitHub Stars August 2017 0 20,000 40,000 60,000

    80,000 Angular Aurelia Backbone Knockout Ember React Vue
  25. @spring_io #springio17 GitHub Star Growth

  26. 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>
  27. 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 { }
  28. 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. Angular CLI

  31. Angular CLI

  32. 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. 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 Progressive Web Apps

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

  36. None
  37. 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
  38. Action! Try Spring Boot Try Angular Explore PWAs Enjoy the

    bootiful experience!
  39. DIY: Bootiful Development http://bit.ly/boot-and-ng

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

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

  42. developer.okta.com/blog

  43. Questions? Keep in touch! raibledesigns.com @mraible Presentations speakerdeck.com/mraible Code github.com/oktadeveloper