Proyecto Avatar - JavaScript sobre la JVM del servidor

Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
Proyecto Avatar
JavaScript en la JVM del Servidor
Carlos Martín Martínez
Technology Sales Consultant
Fusion Middleware
12 de Junio, 2014

¿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
2

Agenda
Conceptos básicos (10 minutos)
Arquitectura y Características (10 minutos)
Ejemplo práctico (10 minutos)
1
2
3
3

Agenda
1
2
3
Oracle Confidential – Internal/Restricted/Highly Restricted 4

Conceptos básicos
5
Arquitectura aplicación Web Moderna
Presentation
(Servlet/JSP,
JSF)
Connectivity
(WebSocket,
REST,SSE)
EnterpriseConnectivity
andBusinessLogic
Java EE / JVM
View
Controller
JavaScript
Browser
ClientServer
• 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
6
Node.js
HTTP Callback Example:

Conceptos básicos
• Motor JavaScript sobre JVM
• Cumple con ECMAScript 5.1
• Incluido en JDK8
• Interoperabilidad Java  JavaScript
7
Nashorn

Conceptos básicos
• Node en la JVM
8
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)
9

• 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!
10
Repaso de conceptosView
Controller
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
11

Arquitectura
12

• 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
13
Estructura aplicación Avatar

Servicios Avatar
14
Balanceo de carga, estado compartido y almacenamiento de datos
Java
JVM Process
HTTP Load Balancer
JavaScript
Services Services ServicesServices
shared state
Database
Data
Notification
JSON JSON JSON JSON

Avatar EE
15
JPA, EJB, JMS

Agenda
1
2
3
16

Ejemplo práctico
Aplicación Reloj
17

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); }; } );
18
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() }; };
19
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>
20
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
21
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
22
Conceptos Proyecto Avatar

Proyecto Avatar - JavaScript sobre la JVM del servidor

Proyecto Avatar - JavaScript sobre la JVM del servidor

Recomendados

Recomendados

Más contenido relacionado

Similar a Proyecto Avatar - JavaScript sobre la JVM del servidor

Similar a Proyecto Avatar - JavaScript sobre la JVM del servidor (20)

Último

Último (20)

Proyecto Avatar - JavaScript sobre la JVM del servidor

Notas del editor