bootiful development with spring boot and angular - connect.tech 2017
TRANSCRIPT
![Page 1: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/1.jpg)
Matt Raible | @mraibleBootiful Development w/ Spring Boot and Angular
September 20, 2017 Connect.Tech
https://www.flickr.com/photos/rockmixer/2806330093
![Page 2: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/2.jpg)
Blogger on raibledesigns.com
Web Developer and Java Champion
Father, Skier, Mountain Biker, Whitewater Rafter
Open Source Connoisseur
Who is Matt Raible?
Bus LoverOkta Developer Advocate
![Page 3: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/3.jpg)
![Page 4: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/4.jpg)
@spring_io #springio17
Okta Supports Authentication Standards
![Page 5: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/5.jpg)
What about You?
![Page 6: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/6.jpg)
Bootiful Development
http://bit.ly/boot-and-ng
![Page 7: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/7.jpg)
OAuth 2.0 Overview
Today’s AgendaWhy Spring Boot?
Demo: Developing with Spring Boot
Introduction to ES6 and TypeScript
Why Angular?
Demo: Developing with Angular
Introduction to PWAs and JHipster
![Page 8: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/8.jpg)
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
![Page 11: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/11.jpg)
@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 JpaRepository<Blog, Long> { }
![Page 12: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/12.jpg)
@spring_io #springio17
Microservices with Spring Boot
https://developer.okta.com/blog/2017/06/15/build-microservices-architecture-spring-boot
![Page 13: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/13.jpg)
@spring_io #springio17
Secure Microservices with Spring Boot
https://developer.okta.com/blog/2017/08/08/secure-spring-microservices
![Page 14: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/14.jpg)
Demo: Build a Spring Boot API
![Page 15: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/15.jpg)
ES6, ES7 and TypeScript
ES5: es5.github.io
ES6: git.io/es6features
ES7: bit.ly/es7features
TS: www.typescriptlang.org TSES7 ES6 ES5
![Page 16: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/16.jpg)
http://caniuse.com/#search=es5
![Page 17: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/17.jpg)
http://caniuse.com/#search=es6
![Page 18: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/18.jpg)
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
![Page 20: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/20.jpg)
“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
![Page 21: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/21.jpg)
@spring_io #springio17
Leading JavaScript Frameworks in 2017
angular.io
facebook.github.io/react
vuejs.org
![Page 22: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/22.jpg)
![Page 23: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/23.jpg)
![Page 24: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/24.jpg)
@spring_io #springio17
Jobs on IndeedSeptember 2017
0
1,750
3,500
5,250
7,000
Angular Aurelia Backbone Ember Knockout React Vue
![Page 25: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/25.jpg)
@spring_io #springio17
Stack Overflow Tags
September 2017
0
20,000
40,000
60,000
80,000
Angular Aurelia Backbone Knockout Ember React Vue
![Page 26: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/26.jpg)
@spring_io #springio17
GitHub StarsSeptember 2017
0
20,000
40,000
60,000
80,000
Angular Aurelia Backbone Knockout Ember React Vue
![Page 27: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/27.jpg)
@spring_io #springio17
GitHub Star Growth
![Page 28: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/28.jpg)
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>
![Page 29: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/29.jpg)
Hello World with Angularimport { 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 { }
![Page 30: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/30.jpg)
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);
![Page 31: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/31.jpg)
![Page 32: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/32.jpg)
Angular CLI
![Page 33: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/33.jpg)
Angular CLI
![Page 34: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/34.jpg)
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
![Page 35: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/35.jpg)
Demo: Build an Angular Clientexport 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) ) } }
![Page 36: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/36.jpg)
@spring_io #springio17
Progressive Web Apps
![Page 37: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/37.jpg)
@spring_io #springio17
JHipster jhipster.github.io
![Page 38: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/38.jpg)
![Page 39: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/39.jpg)
The JHipster Mini-Book
4.0 Release on Sep 22, 2017
jhipster-book.com
21-points.com
@jhipster_book
Write your own InfoQ mini-book! github.com/mraible/infoq-mini-book
![Page 40: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/40.jpg)
Action!
Try Spring Boot
Try Angular
Explore PWAs
Enjoy the bootiful experience!
![Page 41: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/41.jpg)
🔐 it down with Okta!
https://developer.okta.com/blog/2017/09/19/build-a-secure-notes-application-with-kotlin-typescript-and-okta
![Page 42: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/42.jpg)
@SpringBootApplication class NotesApplication
fun main(args: Array<String>) { SpringApplication.run(NotesApplication::class.java, *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>
![Page 43: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/43.jpg)
DIY: Bootiful Development
http://bit.ly/boot-and-ng
![Page 45: Bootiful Development with Spring Boot and Angular - Connect.Tech 2017](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a6770247f8b9aa3028b499b/html5/thumbnails/45.jpg)
Questions?Keep in touch!
raibledesigns.com
@mraible
Presentations
speakerdeck.com/mraible
Code
github.com/oktadeveloper