El documento presenta Dragome SDK, un framework que permite crear aplicaciones web client-side en Java compilando bytecode de Java a Javascript. Dragome usa metaprogramación para manipular bytecode y ofrece capas como Drangular para desarrollar interfaces web de forma declarativa. El framework paraleliza el flujo de trabajo entre cliente y servidor usando continuaciones y evita callbacks en llamadas asíncronas. El documento también discute el soporte futuro de otros lenguajes JVM, compilación por módulos y objetivos de interfaz adicionales.

1. www.dragome.com
JavaConf for IT
Buenos Aires
Argentina
2014
Por Fernando Petrola
Dragome SDK

2. www.dragome.com
Dragome SDK
1. Introduccion a Dragome
2. Manual de instalación (completo): “mvn archetype:generate”
3. Web != Desktop: Integrar tecnologías web y usarlas en el
dominio de Java
4. Metaprogramación y sin depender de los browsers
5. Paralelizando el flujo de trabajo con logicless templates,
services interfaces, backend y frontend.
6. Drangular: como AngularJS pero tipado
7. Futuro de Dragome: otros lenguajes de JVM y targets UI.

3. www.dragome.com
1- Qué es Dragome?
● Creación de aplicaciones web client side en Java
● Compila Bytecode --> Javascript
○ Otros lenguajes de JVM
○ Compilación automática e incremental
● Metaprogramación mediante manipulación de bytecode
● Capas de alto nivel para desarrollar web (optativas)
● Debugging desde Java impactando en el browser
○ Sin plugins ni instalaciones
○ Con cualquier IDE y cualquier browser
● Open Source

4. www.dragome.com
Dragome Architecture
Bytecode to js compiler
Drangular
Callback Evictor
GUIA (GUI Abstraction)
Methodlogger
js JRE
DOM
Handler
Dragome Core
Debugging
Capabilities
Serialization
Java <-> json
Service
Factory
Required modules
Optional modules

5. www.dragome.com
Dragome Architecture
Bytecode to js compiler
Drangular
Callback Evictor
GUIA (GUI Abstraction)
Methodlogger
js JRE
DOM
Handler
Dragome Core
Debugging
Capabilities
Serialization
Java <-> json
Service
Factory
Components
Events
Templates
Declarative UI
Angular style
Detects
methods
invocations
Remove
callbacks in
async calls
Js
generator
Java Runtime
for web
Basic Dragome
features
Required modules
Optional modules

6. www.dragome.com
Bytecode to js compiler
Drangular
Callback Evictor
GUIA (GUI Abstraction)
Methodlogger
js JRE
DOM
Handler
Dragome Core
Debugging
Capabilities
Serialization
Java <-> json
Service
Factory
Dragome Architecture

7. www.dragome.com
Bytecode to js compiler
Drangular
Callback Evictor
GUIA (GUI Abstraction)
Methodlogger
js JRE
DOM
Handler
Dragome Core
Debugging
Capabilities
Serialization
Java <-> json
Service
Factory
j2js compilerj2js JRE Harmony JRE Oracle JRE
gwt-pectin
asm library
javaflow
FlexJson
JQuery
Atmosphere
QooxdooXMLVM compiler
Projects used as base, they were modified to match requirements: refactoring, bug fixes, new features added, adapted for integration.
Tools used by Dragome
Dragome implementations
Dragome Architecture
Related projects

8. www.dragome.com
Dragome GUI Layers
DOM
Visual
Components
Templates
GUIA Drangular
DOM
Handler
ComponentBuilder
Event
Handler
HTML
Template
Listener
HTML
Component
Renderer
HTML
Event
Listener
MethodLogger
Form Bindings
(gwt-pectin)
Implementaciones
para DOM
Abstracciones de
GUI

9. www.dragome.com
2- Cómo empezar?
● No requiere instalación
● 100% Compatible con Maven
● Arquetipo de Maven para crear aplicacion
● No requiere configuración para lo básico
● Sin archivos de configuración
○ Busca implementaciones de interfaces
○ Annotations como alternativa

10. www.dragome.com
● Integrar conceptos de web y desktop
○ Usarlos en el dominio de Java
○ Máxima portabilidad generando javascript
● Aumenta la metaprogramación
● Se conserva el mismo esquema de trabajo
○ Diseñadores gráficos
○ Desarrolladores Backend / Frontend
● Mejoras independientes de los browsers
○ ejemplo: javaflow vs yield
3- Web != Desktop
Criterio de integración

11. www.dragome.com
● Reflection
● Proxies dinámicos
● Instrumentación de bytecode
● Herramientas creadas usando metaprogramación
○ Methodlogger: detecta llamadas a métodos
○ Continuations: pausa y continuación de aplicación
○ Callback Evictor: llamadas async sin callbacks
○ Java 8 enabler: transforma InvokeDynamic
4- Metaprogramación

12. www.dragome.com
Callback-Evictor module
Full metaprogramming usage
async call and
pause
Client
sync call to service
Server
callback executed and
continue
ServiceProxy
Using continuations
(by javaflow)
Using dynamic
proxy
Using Service
Factory /
Serialization

13. www.dragome.com
5- Paralelizando el flujo de trabajo.
Aplicación Cliente/Servidor
public interface HelloWorldService
{
public abstract String getGreetingsFor(String name);
}
public class HelloWorldServiceImpl implements HelloWorldService
{
public String getGreetingsFor(String name)
{
return "Hello " + name + "! (" + new Date() + ")";
}
}
1) Service Interface
1)Service Interface (Backend/Frontend): HelloWorldService.java
2)Service Implementation (Backend): HelloWorldServiceImpl.java
3)GUI definition (Frontend): HelloWorldPage.java
4)HTML Template (Graphic Designer): helloworld.html
2) Service implementation

14. www.dragome.com
@PageAlias(alias= "helloworld")
public class HelloWorldPage extends DragomeVisualActivity
{
HelloWorldService helloWorldService= serviceFactory.createSyncService(HelloWorldService.class);
public void build()
{
VisualLabel<String> label= new VisualLabelImpl<String>("message");
VisualButton button= new VisualButtonImpl("button", c -> {
String message= helloWorldService.getGreetingsFor("World");
label.setValue(message);
});
mainPanel.addChild(label);
mainPanel.addChild(button);
}
}
3) GUI definition
<html>
<head>
<script type="text/javascript" src="dragome/dragome.js"></script>
</head>
<body>
Message: <b data-template="message"> text </b> <br>
<button data-template="button"> Say hello! </button>
</body>
</html>
4) HTML Template
5- Paralelizando el flujo de trabajo.
Aplicación Cliente/Servidor

15. www.dragome.com
6- Drangular
● Utiliza varios conceptos de AngularJs: templates, data
binding, ngRepeat, ngSwitch, ngClass ...
● Two-way databinding
○ Sin dirty check, con observers: mejor performance
● Define UI de manera más declarativa
● Patrón builder para crear componentes
● Ideal para usar Java 8
● Asistencia del IDE usando el tipado fuerte y generics
● Declaración de componentes separada del template

16. www.dragome.com
<body>
<input type="text" data-template="textfield" />
<span data-template="label"></span>
</body>
Drangular:
Binding label and textfield
componentBuilder.bindTemplate("textfield")
.as(VisualTextField.class)
.toProperty(this::getText, this::setText)
.build();
componentBuilder.bindTemplate("label")
.as(VisualLabel.class)
.toProperty(this::getText)
.build();
simple-binding.html
SimpleBinding.java

17. www.dragome.com
<body>
<input type="text" data-template="text-input" />
<table>
<tr data-template="row">
<td><span data-template="name-label"></span></td>
</tr>
</table>
</body>
Drangular:
Repeater with filter
componentBuilder.bindTemplate("text-input")
.as(VisualTextField.class)
.toProperty(this::getText, this::setText)
.build();
componentBuilder.bindTemplate("row")
.as(VisualPanel.class)
.toList(Arrays.asList("Maradona", "Bochini", "Ortega"))
.filter(value -> value.startsWith(getText()))
.repeat((name, childrenBuilder) -> {
childrenBuilder.bindTemplate("name-label")
.as(VisualLabel.class)
.to(name)
.build();
});
repeater.html
Repeater.java

18. www.dragome.com
7- Futuro
● Incorporación de otros lenguajes de JVM: Scala, Ceylon,
Jython, JRuby, Clojure, Groovy
● Soporte para Classloaders
● Compilar cada JAR en un js separado.
● Capa de compatibilidad con GWT
● Un poco más lejano:
○ Otros UI targets: Android, IOS, Swing, wxWidgets
○ Simulador de multithread en js
○ JIT para balancear ejecución de código js y java

19. www.dragome.com
Initial Support For
Scala(alpha)
@PageAlias(alias= "simple-binding")
class SimpleBinding extends DragomeVisualActivity
{
var text= ""
def setText(t: String) { this.text= t }
def getText: String= this.text
def build
{
val componentBuilder= new ComponentBuilder(mainPanel)
componentBuilder.bindTemplate("textfield")
.as(classOf[VisualTextField[String]])
.toProperty(this, "text")
.build();
componentBuilder.bindTemplate("label")
.as(classOf[VisualLabel[String]])
.toProperty(this, "text")
.build();
}
}

20. www.dragome.com
Donde se esta usando
Game Authoring System: github.com/mirkosertic/GameComposer
JBox2D: physics engine
Rendering: DIVs and CSS

21. www.dragome.com
webapp.js
2nd bytecode to js
compiler
(Strict)
1st bytecode to js
compiler
(Node reduction)
HelloWorld.java HelloWorld.class
qooxdoo
javascript
class2
4
531
Chained bytecode
instrumentations
6
Bytecode to javascript compilation process
1 Java file is compiled to .class file
2 The .class file is processed by instrumentation chain to enhance it, using for example: javaflow, methodlogger, etc
3 Once bytecode is ready, first compiler tries to transform it to js. If node reduction algorithm fails, second compiler will take control.
4 If bytecode cannot be transformed to any combination of js structures, second compiler translate it to a JVM like
structure
5 Generated javascript code is stored as a qooxdoo class
6 Last step inserts each compiled qooxdoo class into the final webapp.js archive
5

22. www.dragome.com
Templates
● HTML puro y estandard
● Logicless
○ Pueden ser intercambiados por otros “similares”
○ Se pueden usar de diferente forma y en diferentes
páginas y/o componentes
● Placeholders marcados con atributos “data-template”
○ Único acople con Java
○ Pueden utilizarse anidados
○ No interfieren con atributos estándares como “id” o
“name”
● Parseado por el browser: soporta que no estén bien
formados
● Cualquier editor que maneje HTML puede servir

23. www.dragome.com
Templates

24. www.dragome.com
<html>
<body>
<table data-template="parent">
<tr>
<td data-template="first-child">first</td>
<td data-template="second-child">second</td>
</tr>
</table>
</body>
</html>
Templates
Template parent= mainTemplate.getTemplate("parent");
Template firstChild= parent.getChild("first-child");
Template secondChild= parent.getChild("second-child");
VisualPanel parentPanel= new VisualPanelImpl(parent);
parentPanel.addChild(new VisualButtonImpl("first-child"));
parentPanel.addChild(new VisualLabelImpl("second-child"));
HTML Template
Template usage
Panel using template

25. www.dragome.com
Autor: Fernando Petrola
Sitio: http://www.dragome.com
Github: http://github.com/dragome
Twitter: @DragomeSDK
Facebook: http://www.facebook.com/dragome.sdk
Youtube: https://www.youtube.com/channel/UCXZjcxseYx7hMUisAdow41Q

26. www.dragome.com
Fin