Slide 1
Slide 1 text
@spring_io
#springio17
Bootiful Development with
Spring Boot and Angular
Matt Raible
@mraible
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
@spring_io
#springio17
@spring_io
#springio17
Authentication Standards
Slide 6
Slide 6 text
@spring_io
#springio17
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
Slide 7
Slide 7 text
SPRING INITIALIZR @ start.spring.io
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
@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 {
}
Slide 10
Slide 10 text
@spring_io
#springio17
@spring_io
#springio17
Microservices with Spring Boot
Slide 11
Slide 11 text
@spring_io
#springio17
@spring_io
#springio17
Secure Microservices with Spring Boot
Slide 12
Slide 12 text
@spring_io
#springio17
Demo: Build a Spring Boot API
Slide 13
Slide 13 text
@spring_io
#springio17
ES6, ES7 and TypeScript
ES5: es5.github.io
ES6: git.io/es6features
ES7: bit.ly/es7features
TS: www.typescriptlang.org
TS
ES7
ES6
ES5
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
@spring_io
#springio17
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
Slide 17
Slide 17 text
@spring_io
#springio17
@spring_io
#springio17
bus.ts
Slide 18
Slide 18 text
@spring_io
#springio17
TypeScript 2.3
Slide 19
Slide 19 text
“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
Slide 20
Slide 20 text
@spring_io
#springio17
@spring_io
#springio17
Leading JavaScript Frameworks in 2017
angular.io
facebook.github.io/react
vuejs.org
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
@spring_io
#springio17
@spring_io
#springio17
Jobs on Indeed
May 2017
0
2,000
4,000
6,000
8,000
Angular Aurelia Backbone Ember Knockout React Vue
Slide 24
Slide 24 text
@spring_io
#springio17
@spring_io
#springio17
Stack Overflow Tags
May 2017
0
12,500
25,000
37,500
50,000
Angular Aurelia Backbone Knockout Ember React Vue
Slide 25
Slide 25 text
@spring_io
#springio17
@spring_io
#springio17
GitHub Stars
May 2017
0
17,500
35,000
52,500
70,000
Angular Aurelia Backbone Knockout Ember React Vue
Slide 26
Slide 26 text
@spring_io
#springio17
Hello World with Angular
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
Hello {{name}}
` }) export class AppComponent { name = 'World'; } https://angular.io/docs/ts/latest/quickstart.htmlSlide 27
Slide 27 text
@spring_io
#springio17
Hello World with Angular
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Slide 28
Slide 28 text
@spring_io
#springio17
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);
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
@spring_io
#springio17
Angular CLI
Slide 31
Slide 31 text
@spring_io
#springio17
Angular CLI
Slide 32
Slide 32 text
@spring_io
#springio17
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
Slide 33
Slide 33 text
@spring_io
#springio17
Demo: Build an Angular Client
export class BeerListComponent implements OnInit {
beers: Array;
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)
)
}
}
Slide 34
Slide 34 text
@spring_io
#springio17
Built-in Components
Slide 35
Slide 35 text
@spring_io
#springio17
The asterisk (*) effect
https://angular.io/docs/ts/latest/guide/structural-directives.html#!#asterisk
{{hero}}
{{hero}}
Slide 36
Slide 36 text
@spring_io
#springio17
The asterisk (*) effect
Our heroes are true!
Our heroes are true!
Slide 37
Slide 37 text
@spring_io
#springio17
Angular Forms
Template-Driven
import { FormsModule } from '@angular/forms';
Reactive Forms
import { ReactiveFormsModule } from '@angular/forms';
Slide 38
Slide 38 text
@spring_io
#springio17
Template-Driven Validation
Name
Name is required
Slide 39
Slide 39 text
@spring_io
#springio17
Reactive Forms Validation
Name
{{ formErrors.name }}
Slide 40
Slide 40 text
@spring_io
#springio17
Data Architectures
MVW / Two-way binding
Flux
Observables
Slide 41
Slide 41 text
@spring_io
#springio17
Observables and RxJS
Promises emit a single value whereas streams emit many values
Imperative code “pulls” data whereas reactive streams “push” data
RxJS is functional
Streams are composable
Slide 42
Slide 42 text
@spring_io
#springio17
Authentication with OpenID Connect
http://developer.okta.com
http://bit.ly/ng-okta
youtube.com/watch?v=Kb56GzQ2pSk
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
@spring_io
#springio17
ng-book 2
A comprehensive guide to developing with
Angular 4
Worth all your hard earned $$$
https://www.ng-book.com/2
“Thank you for the awesome book, it's the
bible for Angular.” — Vijay Ganta
Slide 45
Slide 45 text
@spring_io
#springio17
@spring_io
#springio17
Server-Side Java Support
Slide 46
Slide 46 text
@spring_io
#springio17
@spring_io
#springio17
Progressive Web Apps
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
“We’ve failed on mobile”
— Alex Russell
https://youtu.be/K1SFnrf4jZo
Slide 49
Slide 49 text
@spring_io
#springio17
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
Slide 50
Slide 50 text
@spring_io
#springio17
The PRPL Pattern
Push
Render
Pre-cache
Lazy-load
Slide 51
Slide 51 text
@spring_io
#springio17
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
Slide 52
Slide 52 text
developer.okta.com/blog
Slide 53
Slide 53 text
@spring_io
#springio17
@spring_io
#springio17
JHipster jhipster.github.io
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
@spring_io
#springio17
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
Slide 56
Slide 56 text
@spring_io
#springio17
Action!
Try Spring Boot
Try Angular
Explore PWAs
Enjoy the bootiful experience!
Slide 57
Slide 57 text
@spring_io
#springio17
Lab: Bootiful Development
http://bit.ly/boot-and-ng
Slide 58
Slide 58 text
@spring_io
#springio17
Questions?
Keep in touch!
raibledesigns.com
@mraible
Presentations
speakerdeck.com/mraible
Code
github.com/mraible/ng-demo