1.
Matt Raible | @mraible
Bootiful Development w/ Spring Boot and Angular
December 4, 2018
https://www.flickr.com/photos/captainkimo/15356999583
#RWX2018

2.
Blogger on raibledesigns.com and
developer.okta.com/blog
Web Developer and Java Champion
Father, Skier, Mountain Biker,
Whitewater Rafter
Open Source Connoisseur
Who is Matt Raible?
Bus Lover
Okta Developer Advocate

3.
What about You?

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

5.
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

6.
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

7.
@spring_io
#springio17
Another Perspective
https://twitter.com/phillip_webb/status/641444531867680768
“You can’t make a delicious cake without the correct ingredients!”

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 JpaRepository<Blog, Long> {
}

10.
@spring_io
#springio17
Microservices with Spring Boot
https://developer.okta.com/blog/2017/06/15/build-microservices-architecture-spring-boot

11.
Demo: Build a Spring Boot API

12.
ES6, ES7 and TypeScript
ES5: es5.github.io
ES6: git.io/es6features
ES7: bit.ly/es7features
TS: www.typescriptlang.org
TSES7ES6ES5

13.
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

14.
@spring_io
#springio17
bus.ts

15.
“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

16.
@spring_io
#springio17
Leading JavaScript Frameworks in 2018
angular.io
facebook.github.io/react
vuejs.org

17.
“Angular and React dominate:
Nothing else even comes close.”

18.
Crunch the Numbers

19.
@spring_io
#springio17
Hot Frameworks hotframeworks.com

20.
@spring_io
#springio17
Jobs on Indeed (US)
December 2018
0
2,750
5,500
8,250
11,000
React Angular Vue

21.
@spring_io
#springio17
Stack Overflow Tags
December 2018
0
40,000
80,000
120,000
160,000
React Angular Vue

22.
@spring_io
#springio17
GitHub Stars
December 2018
0
32,500
65,000
97,500
130,000
React Angular Vue

23.
@spring_io
#springio17
GitHub Star Growth
http://www.timqian.com/star-history

24.
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>

25.
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 { }

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

27.
Angular CLI

28.
Angular CLI

29.
Angular CLI

30.
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

31.
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)
)
}
}

32.
@spring_io
#springio17
Progressive Web Apps

33.
“We’ve failed on mobile”
— Alex Russell
https://youtu.be/K1SFnrf4jZo

34.
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

35.
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

36.
Learn More about PWAs
https://developer.okta.com/blog/2017/07/20/the-ultimate-guide-to-progressive-web-applications

37.
@spring_io
#springio17
JHipster jhipster.tech
JHipster is a development platform to generate, develop and deploy
Spring Boot + Angular/React Web applications and Spring microservices.

38.
@spring_io
#springio17
Microservices with JHipster

39.
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

40.
Action!
Try Spring Boot
Try Angular
Try OIDC
Explore PWAs
Enjoy the bootifulness!

41.
Try Kotlin
https://developer.okta.com/blog/2017/09/19/build-a-secure-notes-application-with-kotlin-typescript-and-okta

42.
@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>

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

44.
@spring_io
#springio17
Angular 7 Goodness
https://developer.okta.com/blog/2018/12/04/angular-7-oidc-oauth2-pkce

45.
@spring_io
#springio17
Angular 7 + Spring Boot 2.1 Screencast
https://youtu.be/HoDzatvGDlI

46.
Security Books
https://developer.okta.com/books/api-securityhttps://www.oauth.com

47.
developer.okta.com/blog
@oktadev

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

49.
developer.okta.com