bootiful development with spring boot and angular - connect.tech 2017

Matt Raible | @mraibleBootiful Development w/ Spring Boot and Angular

September 20, 2017 Connect.Tech

https://www.flickr.com/photos/rockmixer/2806330093

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

@spring_io #springio17

Okta Supports Authentication Standards

What about You?

Bootiful Development

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

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

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

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

@spring_io #springio17

Microservices with Spring Boot

https://developer.okta.com/blog/2017/06/15/build-microservices-architecture-spring-boot

@spring_io #springio17

Secure Microservices with Spring Boot

https://developer.okta.com/blog/2017/08/08/secure-spring-microservices

Demo: Build a Spring Boot API

ES6, ES7 and TypeScript

ES5: es5.github.io

ES6: git.io/es6features

ES7: bit.ly/es7features

TS: www.typescriptlang.org TSES7 ES6 ES5

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

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

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

@spring_io #springio17

bus.ts

“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

@spring_io #springio17

Leading JavaScript Frameworks in 2017

angular.io

facebook.github.io/react

vuejs.org

@spring_io #springio17

Jobs on IndeedSeptember 2017

0

1,750

3,500

5,250

7,000

Angular Aurelia Backbone Ember Knockout React Vue

@spring_io #springio17

Stack Overflow Tags

September 2017

0

20,000

40,000

60,000

80,000

Angular Aurelia Backbone Knockout Ember React Vue

@spring_io #springio17

GitHub StarsSeptember 2017

0

20,000

40,000

60,000

80,000

Angular Aurelia Backbone Knockout Ember React Vue

@spring_io #springio17

GitHub Star Growth

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

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

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

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

@spring_io #springio17

Progressive Web Apps

@spring_io #springio17

JHipster jhipster.github.io

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

Action!

Try Spring Boot

Try Angular

Explore PWAs

Enjoy the bootiful experience!

🔐 it down with Okta!

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

developer.okta.com/blog

Questions?Keep in touch!

raibledesigns.com

@mraible

Presentations

speakerdeck.com/mraible

Code

github.com/oktadeveloper