www.dragome.com

JavaConf for ITBuenos Aires

Argentina

2014

Por Fernando Petrola

Dragome SDK

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.

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

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

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

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

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 ArchitectureRelated projects

www.dragome.com

Dragome GUI Layers

DOM

Visual

Components

Templates

GUIA DrangularDOM

Handler

ComponentBuilder

Event

Handler

HTML

Template

Listener

HTML

Component

Renderer

HTML

Event

ListenerMethodLogger

Form Bindings

(gwt-pectin)

Implementaciones

para DOM

Abstracciones de

GUI

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

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 != DesktopCriterio de integración

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

www.dragome.com

Callback-Evictor moduleFull metaprogramming usage

async call and

pause

Client

sync call to service

Server

callback executed and

continue

Se

rvic

e P

roxy

Using continuations

(by javaflow)

Using dynamic

proxy

Using Service

Factory /

Serialization

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

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

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

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

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

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

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();

}

}

www.dragome.com

Donde se esta usandoGame Authoring System: github.com/mirkosertic/GameComposer

JBox2D: physics engineRendering: DIVs and CSS

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

instrumentations6

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

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

www.dragome.com

Templates

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

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

www.dragome.com

Fin