When Enterprise Java Micro Profile meets Angular

#devoxxfr #ngjava @sebastienpertus @agoncal
Enterprise Java MicroProfile
TypeScript and Angular
Sebastien Pertus
Antonio Goncalves

Agenda
• Enterprise Java MicroProfile
• TypeScript
• Docker
• Angular 2
• Break
• Exposing & consuming REST APIs with Angular 2
• Tips and tricks:
• APIs, Swagger, Cors, Hateoas, Etag, JWT, Scaling
Ask questions

Sebastien Pertus
• Microsoft Technical Evangelist
• OSS Lover
• Full Stack developer
• Node.JS & .Net Core advocate
• SQL Server man
• Develops on Windows (yeah yeah)

Antonio Goncalves
• Java Champion
• Loves back-end
• Hates front-end
• Develops on Mac

The Conference App

Demo Time !
The Conference App
https://github.com/agoncal/agoncal-
application-conference

Optimizing Enterprise Java
for a Microservices Architecture

Fundamental Shifts in Computing
Cloud
Microservices
Reduce time to market
Address unpredictable loads
Pay as you go
Containerization
Deliver new features more quickly
Smaller, more agile teams
Deliver business features as discrete services
Scale services independently

• Began as a of independent discussions
• Many “microservices” efforts exist in Java EE
• WildFly Swarm
• WebSphere Liberty
• Payara
• TomEE
• New features to address microservices architectures
• Java EE already being used for microservices…
• ...but we can do better
MicroProfile Background

Release Schedule
Sep 2016
MicroProfile
1.0
Q4 2016 2017 2017
Move to
Foundation
MicroProfile
1.1
MicroProfile
1.2
JAX-RS
CDI
JSON-P

MicroProfile 1.1 Underway
Security: JWT Token Exchange
Health Check
Configuration
Fault Tolerance
Second Quarter
2017!

WildFly Swarm
• Based on good old JBoss AS
• « Rightsize your services »
• Bundles several fractions
• Java EE
• Netflix OSS (Ribbon, Hystrix, RxJava)
• Spring
• Logstash
• Swagger
• ...

Setting up Swarm and MicroProfile
<profile>
<id>swarm</id>
<dependencies><dependency>
<groupId>org.wildfly.swarm</groupId>
<artifactId>microprofile</artifactId>
</dependency></dependencies>
<build>
<plugins><plugin>
<groupId>org.wildfly.swarm</groupId>
<artifactId>wildfly-swarm-plugin</artifactId>
</plugin></plugins>
</build>
</profile>

Demo Time !
Skinny War
Fat Jar

TypeScript:
JavaScript that
Scales

BRENDAN EICH ANDERS HEJLSBERG
Do you know those guys ?
Javascript creator
CTO / CEO Mozilla Foundation
Brave Software CEO
C# creator
Technical Fellow @ Microsoft
TypeScript creator and lead team

ES6 / EcmaScript 2015 / ES2015
ES6 is the most
important update
of JavaScript
Brendan Eich : - “We want to go faster. “
- “Every year, a new spec that will be shipped in nighty versions of moderns browsers”

Ecmascript evolution
ES 8
ES 7
(ES 2016)
ES 6
(ES 2015)
ES 5
ES 3 Core features
1997 ~~ 1999
new functions
strict mode, json
2009
class, promises, generators, arrow
functions, new syntax and
concepts …
2015
Exponential (**), array.includes,
2016

Rise of the transpilers: Typescript 2.0

TRANSPILER COMPILER
Transpiler vs Compiler
is a specific term for taking source code written in one
language and transforming into another language that
has a similar level of abstraction
TypeScript (subclass of JavaScript) to JavaScript
is the general term for taking source code written in one
language and transforming into another
C# to IL
Java to ByteCode
"CoffeeScript is to Ruby as TypeScript is to Java/C#/C++." - Luke Hoban
Reference : Steve Fenton – 2012 - https://www.stevefenton.co.uk/2012/11/compiling-vs-transpiling

A statically typed superset of
JavaScript
that compiles to plain JavaScript.
Oh wait … that transpiles 

Open Source

The feature gap

TypeScript IDE

One year, four releases
1.5
1.6
1.7
1.8

TypeScript 2.0
• Control flow based type analysis
• Non-nullable types
• Async/await downlevel support
• Readonly properties
• Private and protected Constructor
• Type “never”

TypeScript 2.1, 2.2
• New JS language service in Visual Studio
• Better and more refactoring support
• Extensions methods
• Mixin classes
• Better .jsx react native support

Nullable types
number
string
boolean

Non-nullable types
number
string
boolean

Non-nullable types
number
string
boolean
undefined null

Non-nullable types
string
undefined null
string | null | undefined

Demo Time !
Non Nullables Types
Control Flow
Async / await

Docker
• « Build, Ship, Run »
• Containers, containers, containers
• Docker to run containers
• Docker-compose to compose several containers
• WildFly containers
• JRE container

Dockerfile Skinny War
FROM jboss/wildfly:10.1.0.Final
EXPOSE 8080
# Setting the Wildfly Admin console (user/pwd admin/admin)
RUN $JBOSS_HOME/bin/add-user.sh admin admin --silent
CMD $JBOSS_HOME/bin/standalone.sh -b 0.0.0.0 -bmanagement 0.0.0.0
COPY venue.war $JBOSS_HOME/standalone/deployments/

Dockerfile Far Jar
FROM openjdk:8-jre-alpine
EXPOSE 8080
COPY venue-swarm.jar /opt/venue-swarm.jar
ENTRYPOINT ["java", "-jar", "/opt/venue-swarm.jar"]

Dockerfile Angular Distribution
FROM nginx
EXPOSE 80
COPY ./dist /usr/share/nginx/html

Demo Time !
Skinny War Image
Fat Jar Image

Angular : In a nutshell
Modules
Components
Services

Angular Component

Angular Module

Angular Dependency Injection

Angular & Webpack

ES7 THEN ES8 PROPOSAL ALREADY IMPLEMENTED IN TS
Decorators
Pattern that allow us to extend /
modify the behavior of a class /
function / propery
As you can see ….
It’s used A LOT in Angular 2

Decorators
class Person {
public lastName: string;
public firstName: string;
constructor(ln: string, fn: string) {
this.lastName = ln;
this.firstName = fn;
}
@log(false)
public getFullName(fnFirst: boolean = true) {
if (fnFirst)
return this.firstName + " " + this.lastName;
else
return this.lastName + " " + this.firstName;
}
}

Decorators
function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
var desc = {
value: function (...args: any[]) {
// get the params
var params = args.map(arg => JSON.stringify(arg)).join();
// get the result
var result = descriptor.value.apply(this, args);
var resultString = JSON.stringify(result);
console.log(`function ${propertyKey} invoked. Params: ${params}. Result:
${resultString}`);
return result;
}
}
return desc;
}

Angular CLI
Angular Command Line Interface

Demo Time !
Angular CLI
- Component
- Service

Exposing REST Endpoints

Conference Micro Services

Exposing « beautiful » APIs
• JSon:API
• OData
• Jsend
• HAL
• CPHL
• SIREN
• Google’s JSon Style Guide
• Do it your own

« Kind of » JSon:API
GET http://host/schedule/api/sessions
GET http://host/schedule/api/sessions?page=2
GET http://host/schedule/api/sessions?sort=title
GET http://host/schedule/api/sessions?sort=-title,date
POST http://host/schedule/api/sessions
GET http://host/schedule/api/sessions/abcd
REMOVE http://host/schedule/api/sessions/abcd
GET http://host/speaker/api/speakers/abcd
GET http://host/speaker/api/speakers/abcd?expand=false

Swagger
• Simple yet powerful representation of your RESTful API
• API documentation
• What do you call?
• What are the parameters?
• What are the status code?
• Contract written in JSon (or Yaml)
• Donated to the Open API Initiative

Swagger’s ecosystem

Swagger APIs
@Path("/speakers")
@Api(description = "Speakers REST Endpoint")
public class SpeakerEndpoint {
@POST
@ApiOperation(value = "Adds a new speaker to the conference")
@ApiResponses(value = {
@ApiResponse(code = 400, message = "Invalid input")})
public Response add(@NotNull Speaker speaker) { ... }
@GET @Path("/{id}")
@ApiOperation(value = "Finds a speaker by ID")
public Response retrieve(@PathParam("id") String id) { ... }
}

Swagger Maven Plugin
<plugin>
<groupId>com.github.kongchen</groupId>
<artifactId>swagger-maven-plugin</artifactId>
<configuration>
<apiSources><apiSource>
<locations>org.agoncal.conference.venue.rest</locations>
<schemes>http,https</schemes>
<host>localhost:8080</host>
<basePath>/api</basePath>
<info>
<title>Room</title>
<version>1.0.0</version>
<description>Rooms of the venue</description>
</info>

Swagger TypeScript for Angular generation
public add(room: models.Room): Observable<{}> {
return this.http.request(path, requestOptions)
.map((response: Response) => { … });
}
public retrieve(id: string, extraHttpRequestParams?: any): Observable<models.Room> {
return this.http.request(path, requestOptions)
.map((response: Response) => { … });
}

Demo Time !
Generate Angular from Swagger

Proxy

CORS
• Cross-Origin Resource Sharing
• Specification (https://www.w3.org/TR/cors/)
• Access across domain-boundaries
• JavaScript and web programming has grown
• But the same-origin policy still remains
• Prevents JavaScript from making requests across domain
boundaries

HTTP Header
Access-Control-Allow-Origin
Access-Control-Allow-Credentials
Access-Control-Expose-Headers
Access-Control-Max-Age
Access-Control-Allow-Methods
Access-Control-Allow-Headers
Access-Control-Request-Method
Access-Control-Request-Headers

CORS
@Provider
public class CORSFilter implements ContainerResponseFilter {
public void filter(ContainerRequestContext request,
ContainerResponseContext response) throws IOException {
response.getHeaders().add("Access-Control-Allow-Origin", "*");
response.getHeaders().add("Access-Control-Allow-Headers",
"origin, content-type, accept, authorization, Etag");
response.getHeaders().add("Access-Control-Allow-Credentials",
"true");
response.getHeaders().add("Access-Control-Allow-Methods",
"GET, POST, PUT, DELETE, OPTIONS, HEAD");
}
}

Demo Time !

HateOAS
• « Hypermedia as the engine of application state »
• At its core is the concept of « hypermedia »
• Or in other words: the idea of links
• Client application goes from one state to the next by following a link
• Runtime contract
• Nothing in Java EE, maybe in MicroProfile
• JAX-RS has a Link API

Links
links: {
self: "http://host/schedule/api/sessions?page=1",
first: "http://host/schedule/api/sessions?page=1",
last: "http://host/schedule/api/sessions?page=14",
next: "http://host/schedule/api/sessions?page=2",
monday: "http://host/schedule/api/sessions/monday",
tuesday: "http://host/schedule/api/sessions/tuesday"
},
data: [ {
links: {
self: "http://host/schedule/api/sessions/uni_room9_tuesd"
},
id: "uni_room9_tuesday_8_9h30_12h30",
title: ”Java EE and Angular 2",

http://www.iana.org/assignments/link-relations/link-relations.xml

Links
@XmlType(name = "links")
public abstract class LinkableResource implements Identifiable {
private Map<String, URI> links;
public void addSelfLink(URI uri) {
addLink(SELF, uri);
}
public void addCollectionLink(URI uri) {
addLink(COLLECTION, uri);
}
}

Links
if (body.links) {
this.links = {};
for (let key in body.links) {
this.links[key] = body.links[key] !== undefined ? body.links[key] : null;
}
}

Demo Time !
HateOAS

Caching
• HTTP has temporary storage (caching)
• Reduce bandwidth usage
• Reduce server load
• Reduce perceived lag
• ETags, or entity-tags: "conditional" requests.
• Checksum
• If-None-Match

Etag Generation
@GET @Path("/{id}")
public Response retrieve(@PathParam("id") String id,
@Context Request request) {
Talk talk = talkRepository.findById(id);
EntityTag etag = new EntityTag(talk.hashCode());
Response.ResponseBuilder preconditions =
request.evaluatePreconditions(etag);
if (preconditions == null) {
preconditions = Response.ok(talk).tag(etag);
}
return preconditions.build();
}

Demo Time !
ETag & caching

JSon Web Token
• Lightweigh token
• Contains « some » data (claims)
• Base64
• Encrypted
• Passed in the HTTP Header
• Sent at each request
• Not in Java EE nor Microprofile (yet)
• Many librairies

A Token
Bearer
eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZ29uY2FsIiwiaXNzIjoi
aHR0cDovL2NvbmZlcmVuY2UuZG9ja2VyLmxvY2FsaG9zd
Do5MC9jb25mZXJlbmNlLWF0dGVuZGVlL2FwaS9hdHRlbm
RlZXMvbG9naW4iLCJpYXQiOjE0Nzc0OTk3NTUsImV4cCI6
MTQ3NzUwMDY1NX0.aL0a_q5wC3cesBKhkXChg30zr3W
WOsYhFhpJ0lQ479LtLjrPvTQiDH0N_YnFuARuEuy299S4u
O0yXGmX0tSs-Q

A Token
HEADER: { "alg": "HS512" }
PAYLOAD:{
"sub": "agoncal",
"iss": "http://host/attendee/api/login",
"iat": 1477499755,
"exp": 1477500655
}
VERIFY SIGNATURE HMACSHA256(...)

JWT Generation
@Path("/attendees")
public class AttendeeEndpoint {
@POST @Path("/login")
@Consumes(APPLICATION_FORM_URLENCODED)
public Response auth(@FormParam("login") String login,
@FormParam("password") String password) {
// Authentication, security exception and so on...
return Response.ok().header(AUTHORIZATION, "Bearer " +
issueToken(login)).build();
}
}

Filter to Check the Token
@JWTTokenNeeded
@Provider @Priority(Priorities.AUTHENTICATION)
public class JWTTokenNeededFilter implements ContainerRequestFilter{
public void filter(ContainerRequestContext ctx) {
String auth = ctx.getHeaderString(HttpHeaders.AUTHORIZATION);
if (auth == null || !authorizationHeader.startsWith("Bearer")) {
throw new NotAuthorizedException("No Bearer");
}
String token = auth.substring("Bearer".length()).trim();
Jwts.parser().setSigningKey(key).parseClaimsJws(token);
}
}

Check the Token
@Path("/ratings")
public class RatingEndpoint {
@JWTTokenNeeded
@POST
public Response rate(...) {
}
@GET
public Response retrieve(...) {
}
}

JWT Consumption
return this.http
.post(this.basePath, body, requestOptions)
.map((response: Response) => {
if (response.status !== 200) {
return undefined;
}
this.jwt = response.headers.get('authorization');
if (!this.jwt)
return undefined;
return this.jwt;
})
.catch((error: any) => {
return undefined
});

@Injectable()
export class AuthGuardService implements CanActivate {
constructor(private authService: AuthService, private router: Router) { }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean
{
let url: string = state.url;
return this.checkLogin(url);
}
checkLogin(url: string): boolean {
if (this.authService.isLoggedIn) {
return true;
}
this.router.navigate(['/login'], { queryParams: { redirectTo: url } });
return false;
}
}

Demo Time !
Passing a token around

Scaling
• Stateless architecture
• No cookie
• No HTTP session
• No local cache
• Stateless scales better than statefull
• Clients can round robin
• Dynamic proxy
• Meet Traeffik

Demo Time !
Traeffik

Going in production with Angular
• By default, Angular (in dev mode) is about … 4 mb !
• Angular cli and webpack will:
• Uglify your JavaScript code
• Create a standalone bundle file
• Gzip compress
• Apply a tree shaking to delete unused code (it’s not dead code, btw !)
• Could use AOT compilation

JIT vs AOT Compilation
Source Code
JIT Compilation
Code Generation
VM execution
Source Code
AOT Compilation
Code Generation
VM execution
BUILD
RUN

With AOT, AN Angular project could be 60 – 70 % less code
http://slides.com/wassimchegham/demystifying-ahead-of-time-compilation-in-angular-2-aot-jit#/32

Demo Time !
Angular Production ready

Conclusion
• MicroProfile 1.1 will bring more MicroServices features
• Configuration
• Security: JWT Token Exchange
• Health Check
• Fault Tolerance
• More to come

Conclusion
• Angular 4
• Native Script
• TypeScript 2.x

Enterprise Java MicroProfile
TypeScript and Angular
Sebastien Pertus
Antonio Goncalves
https://github.com/agoncal/agoncal-application-conference

When Enterprise Java Micro Profile meets Angular

When Enterprise Java Micro Profile meets Angular

Recommended

More Related Content

What's hot

What's hot(20)

Similar to When Enterprise Java Micro Profile meets Angular

Similar to When Enterprise Java Micro Profile meets Angular(20)

Recently uploaded

Recently uploaded(20)

When Enterprise Java Micro Profile meets Angular

Editor's Notes