el proyecto avatar_ carlos martín martínez
TRANSCRIPT
![Page 1: El proyecto Avatar_ Carlos Martín Martínez](https://reader036.vdocuments.mx/reader036/viewer/2022062703/554fcde0b4c9053d018b5389/html5/thumbnails/1.jpg)
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
![Page 2: El proyecto Avatar_ Carlos Martín Martínez](https://reader036.vdocuments.mx/reader036/viewer/2022062703/554fcde0b4c9053d018b5389/html5/thumbnails/2.jpg)
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
![Page 3: El proyecto Avatar_ Carlos Martín Martínez](https://reader036.vdocuments.mx/reader036/viewer/2022062703/554fcde0b4c9053d018b5389/html5/thumbnails/3.jpg)
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
![Page 4: El proyecto Avatar_ Carlos Martín Martínez](https://reader036.vdocuments.mx/reader036/viewer/2022062703/554fcde0b4c9053d018b5389/html5/thumbnails/4.jpg)
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
![Page 5: El proyecto Avatar_ Carlos Martín Martínez](https://reader036.vdocuments.mx/reader036/viewer/2022062703/554fcde0b4c9053d018b5389/html5/thumbnails/5.jpg)
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
![Page 6: El proyecto Avatar_ Carlos Martín Martínez](https://reader036.vdocuments.mx/reader036/viewer/2022062703/554fcde0b4c9053d018b5389/html5/thumbnails/6.jpg)
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:
![Page 7: El proyecto Avatar_ Carlos Martín Martínez](https://reader036.vdocuments.mx/reader036/viewer/2022062703/554fcde0b4c9053d018b5389/html5/thumbnails/7.jpg)
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
![Page 8: El proyecto Avatar_ Carlos Martín Martínez](https://reader036.vdocuments.mx/reader036/viewer/2022062703/554fcde0b4c9053d018b5389/html5/thumbnails/8.jpg)
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’)
![Page 9: El proyecto Avatar_ Carlos Martín Martínez](https://reader036.vdocuments.mx/reader036/viewer/2022062703/554fcde0b4c9053d018b5389/html5/thumbnails/9.jpg)
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)
![Page 10: El proyecto Avatar_ Carlos Martín Martínez](https://reader036.vdocuments.mx/reader036/viewer/2022062703/554fcde0b4c9053d018b5389/html5/thumbnails/10.jpg)
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?
![Page 11: El proyecto Avatar_ Carlos Martín Martínez](https://reader036.vdocuments.mx/reader036/viewer/2022062703/554fcde0b4c9053d018b5389/html5/thumbnails/11.jpg)
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
![Page 12: El proyecto Avatar_ Carlos Martín Martínez](https://reader036.vdocuments.mx/reader036/viewer/2022062703/554fcde0b4c9053d018b5389/html5/thumbnails/12.jpg)
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | 12
Arquitectura
![Page 13: El proyecto Avatar_ Carlos Martín Martínez](https://reader036.vdocuments.mx/reader036/viewer/2022062703/554fcde0b4c9053d018b5389/html5/thumbnails/13.jpg)
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
![Page 14: El proyecto Avatar_ Carlos Martín Martínez](https://reader036.vdocuments.mx/reader036/viewer/2022062703/554fcde0b4c9053d018b5389/html5/thumbnails/14.jpg)
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
![Page 15: El proyecto Avatar_ Carlos Martín Martínez](https://reader036.vdocuments.mx/reader036/viewer/2022062703/554fcde0b4c9053d018b5389/html5/thumbnails/15.jpg)
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | 15
Avatar EEJPA, EJB, JMS
![Page 16: El proyecto Avatar_ Carlos Martín Martínez](https://reader036.vdocuments.mx/reader036/viewer/2022062703/554fcde0b4c9053d018b5389/html5/thumbnails/16.jpg)
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
![Page 17: El proyecto Avatar_ Carlos Martín Martínez](https://reader036.vdocuments.mx/reader036/viewer/2022062703/554fcde0b4c9053d018b5389/html5/thumbnails/17.jpg)
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | 17
Ejemplo prácticoAplicación Reloj
![Page 18: El proyecto Avatar_ Carlos Martín Martínez](https://reader036.vdocuments.mx/reader036/viewer/2022062703/554fcde0b4c9053d018b5389/html5/thumbnails/18.jpg)
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)
![Page 19: El proyecto Avatar_ Carlos Martín Martínez](https://reader036.vdocuments.mx/reader036/viewer/2022062703/554fcde0b4c9053d018b5389/html5/thumbnails/19.jpg)
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)
![Page 20: El proyecto Avatar_ Carlos Martín Martínez](https://reader036.vdocuments.mx/reader036/viewer/2022062703/554fcde0b4c9053d018b5389/html5/thumbnails/20.jpg)
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
![Page 21: El proyecto Avatar_ Carlos Martín Martínez](https://reader036.vdocuments.mx/reader036/viewer/2022062703/554fcde0b4c9053d018b5389/html5/thumbnails/21.jpg)
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
![Page 22: El proyecto Avatar_ Carlos Martín Martínez](https://reader036.vdocuments.mx/reader036/viewer/2022062703/554fcde0b4c9053d018b5389/html5/thumbnails/22.jpg)
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
![Page 23: El proyecto Avatar_ Carlos Martín Martínez](https://reader036.vdocuments.mx/reader036/viewer/2022062703/554fcde0b4c9053d018b5389/html5/thumbnails/23.jpg)
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | 23
![Page 24: El proyecto Avatar_ Carlos Martín Martínez](https://reader036.vdocuments.mx/reader036/viewer/2022062703/554fcde0b4c9053d018b5389/html5/thumbnails/24.jpg)