Slide 1

Slide 1 text

Bootiful Development with Spring Boot and Angular Matt Raible | Developer Advocate @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

@spring_io #springio17 Okta Supports Authentication Standards

Slide 4

Slide 4 text

What about You?

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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 8

Slide 8 text

SPRING INITIALIZR @ start.spring.io

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 Microservices with Spring Boot https://developer.okta.com/blog/2017/06/15/build-microservices-architecture-spring-boot

Slide 11

Slide 11 text

@spring_io #springio17 Secure Microservices with Spring Boot https://developer.okta.com/blog/2017/08/08/secure-spring-microservices

Slide 12

Slide 12 text

Demo: Build a Spring Boot API

Slide 13

Slide 13 text

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

http://caniuse.com/#search=es5

Slide 15

Slide 15 text

http://caniuse.com/#search=es6

Slide 16

Slide 16 text

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 bus.ts

Slide 18

Slide 18 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 eﬃcient. 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 19

Slide 19 text

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

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

@spring_io #springio17 Jobs on Indeed August 2017 0 1,750 3,500 5,250 7,000 Angular Aurelia Backbone Ember Knockout React Vue

Slide 23

Slide 23 text

@spring_io #springio17 Stack Overﬂow Tags August 2017 0 17,500 35,000 52,500 70,000 Angular Aurelia Backbone Knockout Ember React Vue

Slide 24

Slide 24 text

@spring_io #springio17 GitHub Stars August 2017 0 20,000 40,000 60,000 80,000 Angular Aurelia Backbone Knockout Ember React Vue

Slide 25

Slide 25 text

@spring_io #springio17 GitHub Star Growth

Slide 26

Slide 26 text

Hello World with Angular import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `

Hello {{name}}

` }) export class AppComponent { name = 'World'; }

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Angular CLI

Slide 31

Slide 31 text

Angular CLI

Slide 32

Slide 32 text

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

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 Progressive Web Apps

Slide 35

Slide 35 text

@spring_io #springio17 JHipster jhipster.github.io

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

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 38

Slide 38 text

Action! Try Spring Boot Try Angular Explore PWAs Enjoy the bootiful experience!

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

it down with Okta! https://scotch.io/tutorials/build-a-secure-notes-application-with-kotlin-typescript-and-okta

Slide 41

Slide 41 text

https://virtualjug.com/building-robust-apis-and-apps-with-spring-boot-and-angular/

Slide 42

Slide 42 text

developer.okta.com/blog

Slide 43

Slide 43 text

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