el proyecto avatar_ carlos martín martínez
Post on 11-May-2015
581 Views
Preview:
TRANSCRIPT
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
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | Oracle Confidential – Internal/Restricted/Highly Restricted 3
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
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. | 5
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
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | 6
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:
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | 7
Conceptos básicos
• Motor JavaScript sobre JVM• Cumple con ECMAScript 5.1• Incluido en JDK8• Interoperabilidad Java JavaScript
Nashorn
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | 8
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’)
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | 9
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)
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | 10
• 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?
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | 11
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. | 12
Arquitectura
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | 13
• 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
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | 14
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
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | 15
Avatar EEJPA, EJB, JMS
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | 16
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. | 17
Ejemplo prácticoAplicación Reloj
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | 18
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)
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | 19
Ejemplo práctico: Reloj
• 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)
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | 20
Ejemplo práctico: Reloj
• 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
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | 21
Ejemplo práctico: Reloj
• 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
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | 22
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
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | 23
top related