Antonio is a Java developer and knows nothing about user interfaces. He uses his Mac to develop Java EE micro-services, runs them with WildFly Swarm, packages in the Docker and exposes beautiful REST APIs.
Sébastien is a TypeScript developer and knows nothing about Java. Employed at Microsoft, he uses his PC to develop beautiful user interfaces with TypeScript and Angular to invoke the services REST exposed by Antonio.
This university is intended for Java and Angular developers who want to learn how to use a Angular / TypeScript front-end with a Java / MicroProfile back-end. It is composed of two parts:
1) More theoretical: presentation of the Enterprise Micro Profile, WildFly Swarm, the TypeScript syntax and Angular.
2) More practical: development of an Angular application using several REST back-ends (JAX-RS, JSon: API, Swagger, Cors, Hateoas, ETag, JWT, Traeffik).
10. #devoxxfr #ngjava @sebastienpertus @agoncal
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
11. #devoxxfr #ngjava @sebastienpertus @agoncal
• 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
15. #devoxxfr #ngjava @sebastienpertus @agoncal
WildFly Swarm
• Based on good old JBoss AS
• « Rightsize your services »
• Bundles several fractions
• Java EE
• Netflix OSS (Ribbon, Hystrix, RxJava)
• Spring
• Logstash
• Swagger
• ...
19. #devoxxfr #ngjava @sebastienpertus @agoncal
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
21. #devoxxfr #ngjava @sebastienpertus @agoncal
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”
22. #devoxxfr #ngjava @sebastienpertus @agoncal
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
24. #devoxxfr #ngjava @sebastienpertus @agoncal
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
25. #devoxxfr #ngjava @sebastienpertus @agoncal
A statically typed superset of
JavaScript
that compiles to plain JavaScript.
Oh wait … that transpiles
32. #devoxxfr #ngjava @sebastienpertus @agoncal
TypeScript 2.0
• Control flow based type analysis
• Non-nullable types
• Async/await downlevel support
• Readonly properties
• Private and protected Constructor
• Type “never”
33. #devoxxfr #ngjava @sebastienpertus @agoncal
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
52. #devoxxfr #ngjava @sebastienpertus @agoncal
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
53. #devoxxfr #ngjava @sebastienpertus @agoncal
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;
}
}
54. #devoxxfr #ngjava @sebastienpertus @agoncal
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;
}
61. #devoxxfr #ngjava @sebastienpertus @agoncal
Exposing « beautiful » APIs
• JSon:API
• OData
• Jsend
• HAL
• CPHL
• SIREN
• Google’s JSon Style Guide
• Do it your own
62. #devoxxfr #ngjava @sebastienpertus @agoncal
« 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
64. #devoxxfr #ngjava @sebastienpertus @agoncal
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
73. #devoxxfr #ngjava @sebastienpertus @agoncal
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
78. #devoxxfr #ngjava @sebastienpertus @agoncal
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
90. #devoxxfr #ngjava @sebastienpertus @agoncal
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
106. #devoxxfr #ngjava @sebastienpertus @agoncal
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
107. #devoxxfr #ngjava @sebastienpertus @agoncal
JIT vs AOT Compilation
Source Code
JIT Compilation
Code Generation
VM execution
Source Code
AOT Compilation
Code Generation
VM execution
BUILD
RUN
108. #devoxxfr #ngjava @sebastienpertus @agoncal
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
110. #devoxxfr #ngjava @sebastienpertus @agoncal
Conclusion
• MicroProfile 1.1 will bring more MicroServices features
• Configuration
• Security: JWT Token Exchange
• Health Check
• Fault Tolerance
• More to come
119. #devoxxfr #ngjava @sebastienpertus @agoncal
Enterprise Java MicroProfile
TypeScript and Angular
Sebastien Pertus
Antonio Goncalves
https://github.com/agoncal/agoncal-application-conference
Editor's Notes
While the industry was delivering Java EE 7 and planning Java EE 8, some fundamental shifts were occurring during this time. The first was the growth of cloud computing. Driven by Amazon early on, the primary benefit was the ability to deliver features to market more quickly by offloading the infrastructure to a 3rd party, combined with the ability to scale up and down as needed and paying for only the compute power that is utilized. More recently, containerization is becoming much more popular thanks to Docker. While there are many benefits to containers, the most interesting is that it brings the value proposition of Java’s WORA (Write Once Run Anywhere) to the cloud. Applications/services packaged in docker containers can run in any cloud that supports containers.
Developers saw these changes infrastructure changes occuring in the cloud, and for disruptive organizations like NetFlix for example, began to re-architect their services with the cloud in mind. The goal was to deliver features into production more quickly, and the means to do so was to break up “slow moving monoliths” to fine grained and fast moving services that individually solve a specific business domain problems. This is known as microservices today.
This is a calendar that is mean to define important milestones and intent. MicroProfile was released in September of 2016 and is currently being moved into the Eclipse Foundation. After that the intent is to have multiple releases per year.
MicroProfile 1.1 is underway, and scheduled for the 2nd quarter of 2017. The community has decided to focus this release on Configuration, Security (JWT Token Exchange), Health Check, and Fault Tolerance.
Configuration: Separates (externalizes) a microservice from its configuration.
Health Check: Specifies a REST endpoint with service health information. Enables cloud infrastructure to detect the health of a service. If a service is unhealthy, a cloud runtime can restart (or fail and re-create) a service instance
Fault Tolerance: APIs that cover popular microservice programming patterns, including Fallback, Circuit Breakers, and Bulkheads
Quand vous compilez du TypeScript, vous transformez votre code en JavaScript. Comme TypeScript est trés proche de JavaScript (ES6+), vous pouvez dire que vous Transpillez.