Estudo de caso de framework/toolkit AJAX: XML11 Rodrigo Rage Ferro Prof:Francisco Reverbel MAC 0462/5863 - Sistemas de Middleware Avançados

Agenda: 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 Capacidade limitada 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)

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”

XML11 inspirado em : X11 X11-Client X11-Server apple plum X11-Protocol X11-Client 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.

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.

Protocolo XML11 Device Application UI/Atualizações do Modelo, Código <create id=“1”> <label x=“0” y=“10”>Phone</label> </create> <create id=“2”> <input x=“50” y=“10” maxlen=“14”/> </xml11> Device Application UI/Atualizações do Modelo, Código Eventos, Atualizações do Modelo <xml11> <update id=“2”>1-415-555-1212</update> <event id=“3” type=“clicked”/> </xml11>

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.

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>

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>

Exemplo: Java “Hello World” public class HelloWorld { static public void main(String[] args) System.out.println("Hello World"); } HelloWorld.java HelloWorld.class javac xmlvm HelloWorld.xmlvm

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"> <parameter type="java.lang.String" /> </invokevirtual> <return /> </code> </method> </class> </xmlvm>

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>

Exemplo: JavaScript “Hello World” function 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"); }

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

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) AWT/Swing XML11 Toolkit XMLVM Java Application Tomcat XML11 Server XML11 Client Web Browser XML11 sobre HTTP

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

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)

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

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.php Acessado 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.

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