Proyecto Avatar - JavaScript sobre la JVM del servidor

Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |

Proyecto AvatarJavaScript en la JVM del Servidor

Carlos Martín MartínezTechnology Sales ConsultantFusion Middleware12 de Junio, 2014

Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | 2

¿Qué es el proyecto Avatar?

Un manera muy rápida y sencilla de crear aplicaciones web ágiles

Un framework para desarrollar vistas y servicios utilizando lenguajes estándar como JavaScript, HTML5 y CSS3, aprovechando tecnologías como Node.js, Nashorn (JDK8), REST, WebSockets y SSE


Agenda

Conceptos básicos (10 minutos)

Arquitectura y Características (10 minutos)

Ejemplo práctico (10 minutos)

1

2

3

Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | Oracle Confidential – Internal/Restricted/Highly Restricted 4

Agenda




1

2

3


Conceptos básicosArquitectura aplicación Web Moderna

Http, REST

REST, SSE, WebSockets

Pre

sen

tatio

n

(Ser

vle

t/ J

SP,

JSF

)

Con

nect

ivity

(Web

Soc

ket,

RE

ST,

SS

E)

Ent

erp

rise

Con

nect

ivity

and

Bu

sin

ess

Logi

c

Java EE / JVM

Vie

w

Con

trol

ler

JavaScript

BrowserClientServer

• Auge de “Single-page applications”• Vista y controlador en el navegador• Únicamente el modelo permanece en

el servidor


Conceptos básicos

• JavaScript en el servidor• Basado en motor Chrome v8• Diseñado para aplicaciones web escalables• Crisol de culturas: Java, .Net, PHP• Más de 75.000 módulos• Preceptos de Node.js

– La concurrencia es complicada Código de desarrollador se ejecuta en un único hilo– Bloquear en E/S es malo Bucle de eventos

Node.js

HTTP Callback Example:


Conceptos básicos

• Motor JavaScript sobre JVM• Cumple con ECMAScript 5.1• Incluido en JDK8• Interoperabilidad Java JavaScript

Nashorn


Conceptos básicos

• Node en la JVM

Avatar.js = +

Modelo programación Node– Código en JavaScript

– Único bucle de eventos / hilo

– Importa módulos Node

Invoca código Java– Tipos y librerías Java

– new java.lang.Thread();

– new com.mydom.MyObj()Java

JavaScript

java.lang.Thread

java.util.SortedSet

java.math.BigInteger

Node App

Proceso JVM

com.mydom.MyObj

require (‘async’)


Ventajas Avatar.js• Reutilización de librerías y middleware Java existentes• Puede aprovechar múltiples cores• Securización de aplicaciones con el modelo de seguridad de Java• Gestión de la aplicación con herramientas Java existentes• – VisualVM, MBeans, Flight Recorder, Mission Control• Acceso a las APIs de Java para complementar las APIs de Node• – BigInteger, Date, Calendar, XML, SQL, Multicast, etc• Suficientemente pequeño para uso embebido (menos de 2 MB)


• Aprovechando la potencia de Chrome V8, se desarrolla Node.js para, básicamente, ejecutar código JavaScript fuera de navegadores, es decir, en servidores

• Diseñado para aplicaciones con poco tiempo de proceso y mucho de E/S

• Programación mono-hilo

¡STOP!Repaso de conceptos

Vie

w

Con

trol

ler

JavaScript

Browser

• Auge de “Single-page applications”• Vista y controlador en el navegador• Únicamente el modelo permanece en el

servidor• Código JavaScript cada vez mayor• Necesidad de interpretes (motores) rápidos• Surge Chrome V8, más rápido que JScript

(en Internet Explorer), SpiderMonkey (en Firefox) y JavaScriptCore (en Safari)

• Donde Chrome V8 ofrece potencia, Nashorn ofrece integración completa de JavaScript con JVM y, por tanto con décadas de desarrollo de librerías y módulos totalmente probados

• ¿Cómo introducir los conceptos y módulos innovadores del mundo Node en el probado mundo JEE, con su enorme ecosistema de librerías?

Avatar.js¿VS?


Agenda




1

2

3


Arquitectura


• service– Contiene los servicios Avatar (JavaScript)– Rest, WebSocket o SSE– Aprovechan módulos Node, 3rd Party o librerías

Java

• view– Contiene los HTML, CSS y JS necesarios para

mostrar la aplicación

• WEB-INF– Únicamente para que la aplicación sea reconocida

por el contenedor de Servlets

• avatar.properties– debug=true– service.threads=1 ; cores / 2

Estructura aplicación Avatar


Servicios AvatarBalanceo de carga, estado compartido y almacenamiento de datos

Java

JVM Process

HTTP Load Balancer

JavaScriptServices Services ServicesServices

shared state

Database

Data

Notification

JSON JSON JSON JSON


Avatar EEJPA, EJB, JMS


Agenda




1

2

3


Ejemplo prácticoAplicación Reloj


Ejemplo práctico: Reloj

• Fichero clock/service/src/main.js

• Primer paso, referenciar “avatar”– var avatar = require("org/glassfish/avatar");

• Registramos servicio REST en la URL data/message que establece el valor de message al valor de msg de la petición PUT– avatar.registerRestService({ url: "data/message" }, function() { this.onPut = function(request, response) { message =

request.data.msg; response.send(null); }; } );

Servicios (REST)



• Registramos un servicio PUSH en la url push/time que, al iniciar la conexión PUSH (onOpen), establece un valor de timeout de 1000ms y sobreescribe la función onTimeout para devolver el resultado de la función getTime

• avatar.registerPushService({ url: "push/time" }, function() { this.onOpen = this.onTimeout = function(context) { context.setTimeout(1000); return context.sendMessage(getTime()); }; } );

• Función getTime– var getTime = function() { var current = new Date(); return { msg: 'The server time is ', h: current.getHours(), m:

current.getMinutes(), s: current.getSeconds() }; };

Servicios (PUSH/SSE)



• Definición de modelos de datos:– Defino el modelo de datos Message vinculado a un servicio REST con el atributo msg

• <script data-model="rest"> var Message = function() { this.msg = ''; }; </script>

– Defino el modelo de datos Time vinculado a un servicio PUSH con atributos msg, h, m y s• <script data-model="push"> var Time = function() { this.msg = this.h = this.m = this.s = ''; }; </script>

• Instanciación de los modelos mediante llamada al servicio correspondiente– <script data-type="Message" data-instance="message"

data-url="data/message"></script> – <script data-type="Time" data-instance="time" data-url="push/time"></script>

Vista



• Vinculamos mediante EL output HTML con los valores del modelo de datos time– <output class="time">#{time.msg}#{time.h}:#{time.m}:#{time.s}</output><br><br>

• Vinculamos mediante EL el input HTML con el valor del modelo message– <label for="im">New Message: </label> – <input id="im" size="35" data-value="#{message.msg}"/>

• Vinculamos mediante EL la función onclick del button HTML con el método PUT (actualización) del servicio REST vinculado al modelo message– <button onclick="#{message.put()}">Update</button>

• El uso de EL (Expression Language) evita la necesidad de crear lógica de control en JavaScript para hacer la página dinámica

Vista


Repaso

• Framework de desarrollo de aplicaciones web ágiles– Vistas: HTML5, CSS3 y JavaScript– Servicios REST, WS y SSE: Avatar.js (implementación de Node sobre Nashorn).

• Ejecución código Java• Aprovecha la infraestructura Java EE• Optimización multi-hilo

– Balanceo de carga entre hilos– Estado compartido entre hilos

Conceptos Proyecto Avatar

Proyecto Avatar - JavaScript sobre la JVM del servidor

Technology

Transcript of Proyecto Avatar - JavaScript sobre la JVM del servidor