Dragome en JavaConf Buenos Aires 2014
-
Upload
fernando-petrola -
Category
Software
-
view
225 -
download
1
description
Transcript of Dragome en JavaConf Buenos Aires 2014
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