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

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