Micronaut For Single Page Apps

A MICRONAUT
WALKS INTO A SPA
MICRONAUT FOR SINGLE-PAGE-APPS

A MICRONAUT WALKS INTO A SPA
ABOUT ME
▸ Zachary Klein is a Senior Software Engineer
at OCI. He has been practicing web
development since 2010 and frontend
development since 2015. He’s a
contributor to both the Grails and
Micronaut frameworks, a conference
speaker and an occasional instructor in
OCI’s training practice.
▸ Zachary’s home base is in St Louis, MO,
along with his wife, Beth, and their three
children.

▸ Brief Introduction to Micronaut
▸ Restful Backends
▸ Gateways
▸ Security with JWT
▸ Building with Gradle
▸ Deploying a SPA in a JAR
AGENDA
AND GRAPHQL?

BRIEF INTRODUCTION TO MICRONAUT

▸ Designed with Microservices in mind
▸ Reactive HTTP server built on Netty
▸ AOT (Ahead of Time) Compilation for DI, AOP, and
conﬁguration
▸ Declarative HTTP Client
▸ “Natively” Cloud-Native: service-discovery, LB,
circuit-breakers, tracing, and more
▸ Support for Java, Kotlin and Groovy
MICRONAUT

MICRONAUT: GETTING STARTED
~ curl -s "https://get.sdkman.io" | bash
~ source "$HOME/.sdkman/bin/sdkman-init.sh"
~ sdk install micronaut
~ mn create-app hello-world

MICRONAUT CLI
▸ Language defaults to Java
▸ Use --lang to specify groovy or kotlin
▸ Build tool defaults to Gradle
▸ Use --build to specify maven
▸ Run mn without arguments to enter interactive
mode - includes tab-completion

@Controller("/")
class HelloController {
@Get("/hello/{name}")
String hello(String name) {
return "Hello " + name;
}
}
MICRONAUT: CONTROLLERS & CLIENTS
@Client("/")
interface HelloClient {
@Get("/hello/{name}")
String hello(String name);
// Implementation generated
// at compile time
}

MICRONAUT: DEPENDENCY INJECTION
@Singleton //Bean definition generated at compile time
class WeatherService {
Integer currentTemp() { //... }
}
@Controller('/weather')
class WeatherController {
@Inject WeatherService weatherService
//DI computed at compile time
@Get("/")
HttpResponse<Integer> currentTemp() {
HttpResponse.ok(weatherService.currentTemp())
}
}

MICRONAUT: CLOUD NATIVE
//Lookup client from service-discovery registry
@Client(id="billing", path=“/billing")
interface BillingClient { ... }
//Automatically retry failing calls
@Client("https://api.external.service")
@Retryable(attempts = '3', delay = '5ms')
interface ExternalApiClient { ... }
//Immediately fail after set number of failures
//Begin accepting calls after `reset` interval
@Singleton
@CircuitBreaker(attempts = '5', reset = '300ms')
class MyService { ... }
SERVICE DISCOVERY
RETRYABLE
CIRCUIT BREAKERS

MICRONAUT: CLOUD NATIVE
▸ Cloud-Aware Environment Detection
▸ Cloud Provider Integration - AWS, GCP, Spring
Cloud
▸ Metrics & Monitoring
▸ Distributed Conﬁguration
▸ Distributed Tracing

https://angular.io https://vuejs.org https://reactjs.org
~ vue create my-project~ ng new my-dream-app ~ npx create-react-app my-app

▸ Declarative Routes via method annotations:
▸ @Get, @Put, @Post, @Delete
▸ JSON binding/rendering via Jackson
▸ Request Arguments via annotations:
▸ @Header, @Body, @CookieValue, @QueryValue
MICRONAUT & REST

JACKSON: JSON BINDING
public class Author {
private String name;
@JsonSerialize(MySerializer.class)
private Date birthday;
}
@Post(“/")
public HttpResponse<Author> save(
@Body Author author) {
if(bookRepository.save(author)) {
return HttpResponse.ok();
} else {
/* handle error */
}
}
https://www.baeldung.com/jackson-annotations
fetch("http://localhost:8080/
author/", {
method: "POST",
headers: new Headers({
"Content-Type":
"application/json"
}),
body: JSON.stringify({
name: "Author's Name",
birthday: "01/31/1985"
})
})
JAVASCRIPT

JACKSON: JSON RENDERING
{
“name": "Title Here”,
"author": {
"name": "Author"
},
"pages": 150,
"tags": [
"tech",
"bestseller"
]
}
@JsonIgnoreProperties({"id", "version"})
public class Book {
private Long id;
private Long version;
@JsonProperty(“name")
private String title;
private Author author;
private Integer pages;
private List<String> tags;
}
@Get("/{id}")
public Book show(Serializable id) {
return bookRepository.get(id);
}
https://www.baeldung.com/jackson-annotations
JSON

@Controller("/book")
class BookController {
@Post
HttpResponse<BookDetails> save(@Valid @Body BookDetails bookDetails) { /* .. */}
@Put
HttpResponse<BookDetails> update(@Valid @Body BookDetails bookDetails) { /* .. */}
@Delete("/{id}")
HttpResponse delete(Serializable id) { /* .. */}
@Get(“{?max,offset}")
@Transactional(readOnly = false)
HttpResponse<List<Book>> list(@Nullable Integer max, @Nullable Integer offset) { /* .. */}
@Get("/{id}")
@Transactional(readOnly = true)
HttpResponse<BookDetails> get(Serializable id) { /* .. */}
HttpResponse<Integer> count() { /* .. */}
}
REST CONTROLLER
BOOKCONTROLLER.JAVA

import { customHeaders } from "../security/SecurityUtils";
import { composeResourceURL } from "../rest/ClientUtils";
const list = (max, offset, callback, errorCallback) => {
fetch(composeResourceURL(“book","/", { max, offset }), {
method: "GET",
headers: customHeaders()
})
.then(response => response.json())
.then(json => callback(json))
.catch(error => errorCallback(error));
};
const get = (id, callback, errorCallback) => {
/* .. */
};
const save = (resource, callback, errorCallback) => {
/* .. */
};
const update = (resource, callback, errorCallback) => {
/* .. */
};
const remove = (id, callback, errorCallback) => {
/* .. */
};
export default { list, count, get, save, update, remove };
JAVASCRIPT CLIENT
BOOKCLIENT.JS
▸ Framework-agnostic client
▸ Using the fetch API (axios
is another popular option)
▸ Based on callback
functions (async/await is
another option)
▸ customHeaders() function
could return Authorization
headers, tenantId for
multi-tenancy, etc)

JAVASCRIPT CLIENT const composeResourceURL = (resource, append, params) => {
if (params !== null) {
append = `${append}${composeParams(params)}`;
}
return `${process.env.SERVER_URL}/${resource}/${append}`;
};
const composeParams = params => {
let paramString = "";
const paramKeys = Object.keys(params);
if (paramKeys.length > 0) {
paramString = "?";
paramKeys.map(key => {
const paramValue = params[key];
if (paramValue !== null && paramValue !== undefined) {
if (paramString !== "?") {
paramString = `${paramString}&`;
}
paramString = `${paramString}${key}=${params[key]}`;
}
});
}
return paramString;
};
export default { composeResourceURL };
CLIENTUTILS.JS
▸ General purpose REST
client functions
▸ Compose restful URL
with resource name,
path, parameters
▸ Compose URL
parameters from object
▸ Resolve Gateway URL
via Node environment
variable (e.g, SERVER_URL)

ENABLING CORS
▸ CORS support included in
Micronaut
▸ Disabled by default
▸ Can specify allowed
origins, methods, headers,
max age, and more.
micronaut:
application:
name: my-app
server:
cors:
enabled: true
APPLICATION.YML

▸ An alternative to REST
▸ Server provides a schema that
describes exposed resources
▸ Schema defines queries and mutations
▸ Clients can request only the resources
& fields they want
▸ Client libraries can intelligently merge
queries for efficiency
GRAPHQL
https://medium.freecodecamp.org/so-whats-this-graphql-thing-i-keep-hearing-about-baf4d36c20cf?gi=e256cd305c64

MICRONAUT & GRAPHQL

▸ micronaut-graphql library - contributed by Marcel Overdijk
▸ Wraps graphql-java and provides a default controller for accepting
queries & mutations
▸ The GraphQL schema still needs to be created, either manually via the
graphql-java API, or an integration library such as GORM for GraphQL
▸ Packages the GraphiQL in-browser IDE for exploring the GraphQL schema
▸ Example Projects: https://github.com/micronaut-projects/micronaut-
graphql/tree/master/examples/
MICRONAUT & GRAPHQL
dependencies {
compile “io.micronaut.graphql:micronaut-graphql”
}
BUILD.GRADLE

▸ Architectural pattern for microservice-based systems
▸ Expose a single client-facing API (for SPA, mobile, etc)
▸ Minimizing integration points - decoupling
▸ https://microservices.io/patterns/apigateway.html
GATEWAYS

BillingMailAnalyticsInventory
Frontend

Billing
Frontend
MailAnalyticsInventory
Gateway

▸ Version by URL: @Get("/v1/user/profile")
▸ Using conﬁg property:
@Value("${core.api.version}")
String version
@Get("/${version}/user/profile")
‣ Client-facing versioning can be separate from versioning
within the microservice architecture
VERSIONING AN API
core:
api:
version: v1
APPLICATION.YML

BillingMailAnalyticsInventory
Frontend
Gateway
V1
Gateway
V2

▸ Partition your API
▸ Support different
client experiences/
functions (e.g, admin
vs customer)
MULTIPLE GATEWAYS
Billing
Web
MailAnalyticsInventory
Gateway
Admin Web
Admin
Gateway
Mobile
Mobile
Gateway

MICRONAUT PETSTORE
https://github.com/micronaut-projects/micronaut-examples/tree/master/petstore

JWTI: JSON WEB TOKEN
‣ Open standard for representing
claims securely between two parties
‣ Tokens can be signed with either a
secret or public/private key
‣ Standard approach for stateless
authentication
‣ Ideal for transmitting authentication
& authorization data between
microservices and single-page-apps

MICRONAUT SECURITY
▸ Core Micronaut Library - supports JWT, Session, Basic Auth
▸ Annotation-based API & conﬁg-based URL mappings
▸ Support for token propagation
▸ Supports RFC 6750 Bearer Token
▸ JWTs can be read from cookie
dependencies {
compile "io.micronaut:micronaut-security-jwt"
}
micronaut:
security:
enabled: true
token:
jwt:
enabled: true
signatures:
secret:
generator:
secret: changeMe
APPLICATION.YML
BUILD.GRADLE

@SECURED ANNOTATION
▸ @Secured annotation applied
to controllers and methods
▸ All routes blocked by default
▸ Can require authentication
and/or authorization (role-
based)
▸ Alternative: JSR-250 security
annotations are also
supported: @PermitAll,
@RolesAllowed, @DenyAll
import java.security.Principal;
@Secured("isAuthenticated()")
@Controller("/")
public class HomeController {
@Get("/")
String index(Principal principal) {
return principal.getName();
}
@Secured({"ROLE_ADMIN", "ROLE_X"})
@Get("/classified")
String classified() {
return /* REDACTED */;
}
}

‣ Unauthorized request is made to API
‣ Responds with 401
‣ Client POSTs to login endpoint
‣ Server responds with JWT
‣ Client includes access token in the
Authorization header for subsequent
requests
‣ Server validates the incoming token
‣ If authorized, server responds with
resource
MICRONAUT JWT SECURITY

‣ POST credentials to the /
login endpoint
‣ Retrieve access token
from JWT and store in
application state, a
cookie, or local storage*
JAVASCRIPT JWT SECURITY const login = (credentials, callback, errorCallback) => {
fetch(`${process.env.SERVER_URL}/login`, {
method: "POST",
headers: new Headers({
Accept: "application/json",
"Content-Type": "application/json",
}),
body: JSON.stringify(credentials)
})
.then(response => {
if (response.ok) {
return response.json();
} else {
throw Error(response.statusText);
}
})
.then(json => callback(json))
.catch(error => errorCallback(error));
};
export default { login };
AUTHCLIENT.JS
import AuthClient from “./AuthClient";
AuthClient.login(
{ username: this.username, password: this.password },
json => /* handle login success */,
error => console.error(error)
);
*Local storage is not inherently secure:
https://www.rdegges.com/2018/please-stop-using-local-storage/

‣ Use custom Headers
object to include access
token (if using Bearer)
JAVASCRIPT JWT SECURITY
const securedHeaders = () => {
return new Headers({
Authorization: `Bearer ${token()}`,
"Content-Type": "application/json"
});
};
const token = () => //retrieve token from store;
export default { securedHeaders };
SECURITYUTILS.JS
import { securedHeaders } from "./SecurityUtils";
fetch(`${process.env.SERVER_URL}/home`, {
method: "GET",
headers: securedHeaders()
})
.then(response => response.text())
.then(text => (this.content = text))
.catch(error => {
console.log("Connection failure: ", error);
});

MICRONAUT SECURITY GUIDES
https://guides.micronaut.io/tags/security.html

MULTIPROJECT BUILDS
JAVASCRIPT APP
BackendFrontend
include "client", “server"
SETTINGS.GRADLE

GRADLE NODE PLUGIN
plugins {
id "com.github.node-gradle.node" version "1.3.0"
}
node {
version = '10.15.0' // https://nodejs.org/en/
yarnVersion = '1.13.0' // https://yarnpkg.com/en/
download = true
}
task start(type: YarnTask, dependsOn: 'yarn') {
group = 'application'
description = 'Run the client app'
args = ['run', 'start']
}
task build(type: YarnTask, dependsOn: 'yarn') {
group = 'build'
description = 'Build the client bundle'
args = ['run', 'build']
}
task test(type: YarnTask, dependsOn: 'yarn') {
group = 'verification'
description = 'Run the client tests'
args = ['run', 'test']
}
task eject(type: YarnTask, dependsOn: 'yarn') {
//...
}
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
//...
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
~ gradle start //yarn start
Server running on http://localhost:3000
BUILD.GRADLE PACKAGE.JSON

▸ Serve the Single-Page-App from within an executable JAR
ﬁle
▸ Removes need for a separate static server
▸ SPA can be packaged with its gateway
▸ Simpliﬁes deployment of small apps and/or IoT
deployments
DEPLOYING A SPA IN A JAR

~ gradle shadowJar
BUILD SUCCESSFUL in 1s
DEPLOYMENT
JAVASCRIPT APP
~ yarn build
Creating a production build...
Compiled successfully.

DEPLOYMENT
JAVASCRIPT APP
BackendFrontend

COMBINED BUILD
~ java -jar build/libs/server-all.jar
Server Running: http://localhost:8080

STATIC ASSETS IN MICRONAUT
▸ Disabled by default
▸
▸
▸ List of paths, starting with classpath: or ﬁle:
▸
▸ The path from which resources should be served
micronaut.router.static-resources.*.enabled
micronaut.router.static-resources.*.paths
micronaut.router.static-resources.*.mapping

STATIC ASSETS IN MICRONAUT
micronaut:
router:
static-resources:
default:
enabled: true
mapping: "/**"
paths: "classpath:public"
local:
enabled: true
mapping: “/local/**"
paths: “file:path/to/files“
APPLICATION.YML

COMBINED BUILD
//Copy production SPA resources into server build directory
task copyClientResources(dependsOn: ':client:build') {
group = 'build'
description = 'Copy client resources into server'
}
copyClientResources.doFirst {
copy {
from project(':client').buildDir.absolutePath
into "${project(':server').buildDir}/resources/main/public"
}
}
//Build a single executable JAR with embedded SPA resources
task assembleServerAndClient(
dependsOn: ['copyClientResources', ':server:shadowJar']) {
group = 'build'
description = 'Build combined server & client JAR'
}
BUILD.GRADLE

MICRONAUT SINGLE-PAGE-APP GUIDE
https://guides.micronaut.io/micronaut-spa-react/guide/index.htmlNEW!

LEARN MORE ABOUT OCI EVENTS AND TRAINING
Events:
‣ objectcomputing.com/events
Training:
‣ objectcomputing.com/training
‣ grailstraining.com
‣ micronauttraining.com
COME SEE US
AT OUR BOOTH!

THANK YOU@ZacharyAKlein kleinz@objectcomputing.com

Micronaut For Single Page Apps

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Micronaut For Single Page Apps

Similaire à Micronaut For Single Page Apps (20)

Plus de Zachary Klein

Plus de Zachary Klein (10)

Dernier

Dernier (20)

Micronaut For Single Page Apps