Estudo de caso de framework/toolkit AJAX: XML11

Rodrigo Rage Ferro

Prof:Francisco Reverbel

MAC 0462/5863 - Sistemas de Middleware Avançados

• Modelo Clássico Web• AJAX• XML11• Arquitetura• Demo• Trabalhos Futuros• Conclusão

Agenda:

Modelo Clássico:

Modelo Síncrono ( Aplicação Web Tradicional ) – Figuras extraídas de GARRETT ( 2005 ).

Definindo AJAX

AJAX=“Asynchronous JavaScript And XML” Método de como projetar aplicações Web, utilizando um conjunto de

tecnologias Web padrões existentes: XHTML, CSS, DOM (Document Object Model), XML, XMLHttpRequest.

Modelo AJAX:

Modelo Assíncrono ( Aplicação AJAX ) - Figuras extraídas de GARRETT ( 2005 ).

Comparando Desempenho...

Comparação: aplicação tradicional Web versus uma aplicação Ajax.

(retirado do livro “Ajax in Action”)

AJAX:

Vantagens Desvantagens

Maior interatividade nas aplicações

Capacidade limitada

Redução do consumo de banda

Comportamento dos botões Back e Forward

Redução do processamento no servidor

Performance do cliente

Não é proprietário Feedback para o cliente

Portabilidade JavaScript (para diferentes browsers)

XM

L11

Slide 8

XML11

XML11 é um projeto Open Source que começou na San Francisco State University em 2004.

XML11 ajuda desenvolvedores na tarefa de escrever JavaScript diminui custos, minimiza risco e acelera tempo para desenvolvimento de aplicações em AJAX.

“Write Java Once, Run AJAX Everywhere”

XM

L11

Slide 9

XML11 inspirado em : X11

Network transparent windowing protocol X11 desenvolvido no MIT em 1984. X11-protocol é bem granular: pixels em vez de

widgets(buttons, list boxes,…) Requer “high-bandwidth” e baixa latência na conexão.

X11-Server

apple

plum

X11-Protocol

X11-Client

XM

L11

Slide 10

Motivação para XML11

Situação atual:– “Medium-bandwidth”, alta latência, conexões em grandes áreas– Clientes como web browser, PDAs, etc.

X11 não adequado para aplicações bem distribuídas por isso XML11:

– Protocolo X11 em mais alto nível de abstração.– “Buttons and checkboxes” em vez de “pixels and lines”

XML11:– independente do dispositivo final– assíncrono– Baseada em XML, protocolo baseado em eventos (resposta com

PDU – Protocol Data Unit em XML), usa SOAP.– Migração de Código– Interação Operacional: o código migrado pode fazer invocação

remota de objetos.

XM

L11

Slide 11

Protocolo XML11

Device Application

UI/Atualizações do Modelo, Código

Eventos, Atualizações do Modelo

<xml11> <create id=“1”> <label x=“0” y=“10”>Phone</label> </create> <create id=“2”> <input x=“50” y=“10” maxlen=“14”/> </create></xml11>

<xml11> <update id=“2”>1-415-555-1212</update> <event id=“3” type=“clicked”/></xml11>

XM

L11

Slide 12

Protocolo XML11

Elementos do XML11 Descrição

<button>, <label>, <input>, …

Standard GUI widgets. Baseado em XUL (Projeto Mozilla).

<create>, <new-value>, <destroy>

Create, update e destroy widgets.

<code> Migra parte da lógica de aplicação para o cliente.

<event> Eventos UI (interface do cliente) surgem e são enviados para o servidor.

<update> Atualizações do Modelo são enviadas tanto pelo cliente qto pelo servidor.

XM

L11

Slide 13

Migração de Código

O elemento <code> de XML11 permite enviar parte da lógica de aplicação para o cliente.

Idéia: uso de linguagem de programação baseada em XML:– Bem adequado com o protocolo XML11 (baseado em XML)

– Mantém independência com o dispositivo final

Problemas:– “verbose” (muitas linhas de código)

– Ferramentas de suporte insuficientes

Solução: XMLVM

<code> <!-– application logic --></code>

XM

L11

Slide 14

XMLVM

XMLVM é uma linguagem de programação baseada em XML

Sintaxe de XMLVM é baseada em “Java Byte Code language” para cada instrução Java Byte Code existe uma instrução XMLVM , por ex., <iadd/> para somar integers

Resultado: XML-based assembly language para Java VM XMLVMs podem automaticamente ser criadas a partir de

Java class files.

<invokevirtual class-type="java.io.PrintStream" method="println"> <signature> <return type="void" /> <parameter type="java.lang.String" /> </signature></invokevirtual>

XM

L11

Slide 15

Exemplo: Java “Hello World”

public class HelloWorld{

static public void main(String[] args) { System.out.println("Hello World"); }

}

HelloWorld.java HelloWorld.class

HelloWorld.xmlvm

javac

xmlvm

XM

L11

Slide 16

Example: XMLVM “Hello World”

<?xml version="1.0" encoding="UTF-8"?><xmlvm> <!--Generated: Tue Aug 10 17:10:14 PDT 2004--> <class name="HelloWorld" isPublic="true" isSynchronized="true“ extends="java.lang.Object"> <!– code for constructor removed --> <method name="main" isPublic="true" isStatic="true" stack="2" locals="1"> <signature> <return type="void" /> <parameter type="java.lang.String[]" /> </signature> <code> <getstatic class-type="java.lang.System" type="java.io.PrintStream“ field="out"/> <ldc type="java.lang.String" value="Hello World" /> <invokevirtual class-type="java.io.PrintStream" method="println"> <signature> <return type="void" /> <parameter type="java.lang.String" /> </signature> </invokevirtual> <return /> </code> </method> </class></xmlvm>

XM

L11

Slide 17

XMLVM para Outras Linguagens

Visto que a Java VM é uma simples “stack-based machine”, XMLVM pode facilmente ser mapeada para outras linguagens

Esta conversão é feita usando XSLT (uso de regras em xml) Mapeamentos existem para JavaScript e C++ O XSLT excerpt abaixo demonstra a conversão de <iadd/>

(Integer add) para JavaScript:

<!-- iadd --><xsl:template match="iadd"> <xsl:text> __op2 = __stack[--__sp]; // Pop operand 1 __op1 = __stack[--__sp]; // Pop operand 2 __stack[__sp++] = __op1 + __op2; // Push sum </xsl:text></xsl:template>

XM

L11

Slide 18

Exemplo: JavaScript “Hello World”

// JavaScriptfunction HelloWorld(){ HelloWorld.main = function(__arg1) { var __locals = new Array(1); var __stack = new Array(2); var __sp = 0; var __op1; var __op2;

__locals[0] = __arg1; var __next_label = -1; while (1) { switch (__next_label) { case -1: case 0: __stack[__sp++] = java_lang_System.out; __stack[__sp++] = "Hello World"; __sp -= 2; __stack[__sp].println(__stack[__sp + 1]); case 1: return; default: alert("XMLVM internal error: reached default of switch"); } } }}

XM

L11

Slide 19

Invocação Remota de Objetos Middleware Implícito Proxy (enviado em XMLVM)

XM

L11

Slide 20

Implementação de um protótipo de XML11

Cliente:– Standard web browser– XML11 protocol client escrito em JavaScript

Servidor:– Aplicação Java AWT/Swing– Lógica de aplicação convertida para JavaScript a partir de um XMLVM– Re-uso de AWT/Swing ao implementar a java.awt.Toolkit interface– Sem necessidade de mudar a aplicação legada.

Uso de HTTP para o “transporte” (uso de HTTP POST)

XML11 sobre HTTP

XML11 Client

Web Browser

AWT/Swing

XML11 Toolkit XMLVM

Java Application

Tomcat

XML11 Server

XM

L11

Slide 21

Demo

Demo overview: Label, Button, List, TextField, TextArea

GridBagLayout, BorderLayout,FlowLayout

Panel com overloaded paint() 2 Java classes com 650 linhas de

código. 2.500 linhas de XMLVM 2.600 linhas de JavaScript

XM

L11

Slide 22

Trabalhos Futuros

Desenvolver protótipos mais convincentes Potenciais Projetos:

– Especificação Formal de XML11

– “Portar” XML11 client para PDAs, Macromedia Flash

– Suporte para mais AWT/Swing widgets

– Melhorar conversão de XMLVM e extender para outras linguagens, por ex., conversão para .NETs Intermediate Language (IL)

XM

L11

Slide 23

Conclusão

XML11 é independente de dispositivo Middleware implícito Uso de proxy para invocação remota de objeto Migração de Código baseado em XMLVM

XM

L11

Slide 24

Referências

Maiores informações sobre XML11: < www.xml11.org >

Puder A.,XML11 - An Abstract Windowing Protocol. PPPJ Journal Special Issue, Elsevier.

James Garrett, “Ajax: A New Approach to Web Applications”,http://adaptivepath.com/publications/essays/archives/000385.phpAcessado em: 07/11/2006.

CRANE, Dave. et al. Ajax in Action. Manning Publications Co. 2006. ISBN 1-932394-61-3. E-book.

GARRETT, JESSE J. Ajax: A New Approach to Web Applications, Adaptive Path Publications, 18/02/2005. Disponível em: <http://www.adaptivepath.com/publications/essays/archives/000385.php>. Acessado em: 07/11/2006.

REIS, Ricardo. et al. Artigo AJAX: Introdução. 13/12/2005. Disponível em: <http://pwp.net.ipl.pt/alunos.isel/24138/AJAX/IntroducaoAJAX.pdf>. Acessado em: 07/11/2006.

XM

L11

Slide 25

Interessante

Palestra de 1 hora aprox. sobre XML11 disponível em:<http://video.google.com/videoplay?docid=-3171582187051229467>

Acessado em: 07/11/2006.