Bootiful Development w/ Spring Boot and Angular

Matt Raible | @mraible

December 4, 2018 #RWX2018
https://www.flickr.com/photos/captainkimo/15356999583
Who is Matt Raible?
Father, Skier, Mountain Biker,
Whitewater Rafter
Open Source Connoisseur

Web Developer and Java Champion

Okta Developer Advocate

Bus Lover
Blogger on raibledesigns.com and

developer.okta.com/blog
What about You?
Bootiful Development

http://bit.ly/boot-and-ng
Today’s Agenda
Why Spring Boot?

Demo: Developing with Spring Boot

Introduction to ES6 and TypeScript

OAuth 2.0 Overview

Why Angular?

Demo: Developing with Angular

Introduction to PWAs and JHipster

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

Another Perspective

“You can’t make a delicious cake without the correct ingredients!”

https://twitter.com/phillip_webb/status/641444531867680768 @spring_io
#springio17
SPRING INITIALIZR @ start.spring.io
@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> {
}
Microservices with Spring Boot

@spring_io
https://developer.okta.com/blog/2017/06/15/build-microservices-architecture-spring-boot #springio17
Demo: Build a Spring Boot API
ES6, ES7 and TypeScript
ES5: es5.github.io

ES6: git.io/es6features

ES7: bit.ly/es7features

ES5 ES6 ES7 TS

TS: www.typescriptlang.org
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
bus.ts

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

angular.io

facebook.github.io/react

vuejs.org
@spring_io
#springio17
 “Angular and React dominate:
Nothing else even comes close.”
Crunch the Numbers
Hot Frameworks hotframeworks.com

@spring_io
#springio17
Jobs on Indeed (US)
December 2018
11,000

8,250

5,500

2,750

0
React Angular Vue
@spring_io
#springio17
Stack Overflow Tags
December 2018
160,000

120,000

80,000

40,000

0
React Angular Vue
@spring_io
#springio17
GitHub Stars
December 2018
130,000

97,500

65,000

32,500

0
React Angular Vue
@spring_io
#springio17
GitHub Star Growth

@spring_io
http://www.timqian.com/star-history
#springio17
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>
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 { }
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);
Angular CLI
Angular CLI
Angular CLI
Get Started with Angular
Angular QuickStart

https://angular.io/guide/quickstart

Angular Seed

https://github.com/mgechev/angular-seed

Angular Seed Advanced

https://github.com/NathanWalker/angular-seed-advanced
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)
)
}
}
Progressive Web Apps

@spring_io
#springio17
“We’ve failed on mobile”

— Alex Russell

https://youtu.be/K1SFnrf4jZo
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

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

Learn More about PWAs

https://developer.okta.com/blog/2017/07/20/the-ultimate-guide-to-progressive-web-applications
JHipster jhipster.tech

JHipster is a development platform to generate, develop and deploy 

Spring Boot + Angular/React Web applications and Spring microservices. 

@spring_io
#springio17
Microservices with JHipster

@spring_io
#springio17
The JHipster Mini-Book
5.0 Release on November 14, 2018

jhipster-book.com

21-points.com

@jhipster_book

Write your own InfoQ mini-book! github.com/mraible/infoq-mini-book

Action!
Try Spring Boot

Try Angular

Try OIDC

Explore PWAs

Enjoy the bootifulness!

Try Kotlin

https://developer.okta.com/blog/2017/09/19/build-a-secure-notes-application-with-kotlin-typescript-and-okta
@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>
DIY: Bootiful Development

http://bit.ly/boot-and-ng
Angular 7 Goodness

@spring_io
https://developer.okta.com/blog/2018/12/04/angular-7-oidc-oauth2-pkce
#springio17
Angular 7 + Spring Boot 2.1 Screencast

@spring_io
https://youtu.be/HoDzatvGDlI
#springio17
Security Books

https://www.oauth.com https://developer.okta.com/books/api-security
developer.okta.com/blog

@oktadev
Questions?
Keep in touch!

raibledesigns.com

@mraible

Presentations

speakerdeck.com/mraible

Code

github.com/oktadeveloper
developer.okta.com