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 Javafor a Microservices Architecture

Fundamental Shifts in Computing

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

Q4 2016 2017 2017

Move to

Foundation

MicroProfile

JAX-RS

JSON-P

MicroProfile 1.1 Underway

Security: JWT Token Exchange

Health Check

Configuration

Fault Tolerance

Second Quarter

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

<id>swarm</id>

<groupId>org.wildfly.swarm</groupId>

<artifactId>microprofile</artifactId>

</dependency></dependencies>

<build>

<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 7 (ES 2016)

ES 6(ES 2015)

ES 3Core features

1997 ~~ 1999

new functions

strict mode, json

class, promises, generators, arrow

functions, new syntax and

concepts …

Exponential (**), array.includes,

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

B R O W S E R

H O S T

Open Source

The feature gap

TypeScript IDE

One year, four releases

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

stringboolean

Non-nullable types

number

stringboolean

Non-nullable types

number

stringboolean

undefined null

Non-nullable typesstring

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;

return this.lastName + " " + this.firstName;

Decorators

function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {

var desc = {value: function (...args: any[]) {

// get the paramsvar params = args.map(arg => JSON.stringify(arg)).join();

// get the resultvar 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

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

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 {

@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

<groupId>com.github.kongchen</groupId>

<artifactId>swagger-maven-plugin</artifactId>

<locations>org.agoncal.conference.venue.rest</locations>

<schemes>http,https</schemes>

<host>localhost:8080</host>

<info>

<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

• 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: {

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

@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);

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

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

public Response rate(...) {

public Response retrieve(...) {

JWT Consumptionreturn 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

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

Software

Angular 2 for Java Developers

Angular 2 and Hexo - ccawebfiles.blob.core.windows.net · Angular 2 and Hexo Static Meets Dynamic For the Best of Both Worlds! Who am I? Jeff Ammons Microsoft MVP Pluralsight Author

Server::Starter meets Java

Continuous integration hacks for Angular with Jenkins ...... · Google Developer Expert in Web technologies / Angular Java developer since 2006 Angular JS addict since 2011 Organizer

SENIOR DEVELOPER / CONSULTANT (F/M) - virtual7.de · Working with the following technologies: Angular, Java Script, Type Script, Java EE, JSF/JSP, Spring/Spring Boot, REST, Hibernate,

Java One Presentation - Ruby on Rails meets Enterprise

Angular for Java developers · Angular for Java developers What Java Angular App generation JHipster Angular CLI Unit testing JUnit Karma / Jasmine Responsive layout Bootstrap Bootstrap

Angular Velocity Angular Acceleration Rotational Motion ...hadron.physics.fsu.edu/~crede/TEACHING/PHY2048C/... · Rotational Motion Angular Velocity Angular Acceleration Torque Moment

Master in Di gSaonolitl ui t s Development...2. Jquery, Angular JS 3. Java backend, Spark Java, DropWizard, Deployment 4. Database, MySQL, Postgres iOS Development 1. iOS development

Angular 2 vs Angular 1

Packed Objects: Fast Talking Java Meets Native Code - Steve Poole (IBM)

Adding Angular 2 to Your Java EE Stack - A Primer

Angular 4 for Java Developers

Angular Measure, Angular Speed, and Angular Velocity

Angular Mechanics - Angular Momentum Contents: Review Linear and angular Qtys Angular vs. Linear FormulasAngular v Angular Momentum Example | WhiteboardExampleWhiteboard

angular for java

Angular meets Microsoft: Exceeding your expectations

Angular : JWT et HttpInterceptorIntroduction Angular Objectif de ce chapitre Considerons les ﬁchiers suivant qui permettent de communiquer avec une ressource´ REST (PHP, Java, C#...)

Java 8: Overview and Quick Review of Supporting …...JavaScript, jQuery, Angular 2, Ext JS, Spring Framework, Spring MVC, Android, GWT, custom mix of topics. – Java 9 training coming

VMware BC-FJA (Bouncy Castle FIPS Java API)...FIPS Java API) Module from VMware, Inc. This Security Policy describes how the VMware BC-FJA (Bouncy Castle FIPS Java API) Module meets