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 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) 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. XML11 “Write Java Once, Run AJAX Everywhere” Slide 8 XML11 inspirado em : X11 apple plum X11-Protocol X11-Client XML11 X11-Server 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. Slide 9 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 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. Slide 10 Protocolo XML11 <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 UI/Atualizações do Modelo, Código Device Application Eventos, Atualizações do Modelo <xml11> <update id=“2”>1-415-555-1212</update> <event id=“3” type=“clicked”/> </xml11> Slide 11 Protocolo XML11 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. Slide 12 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: XML11 – “verbose” (muitas linhas de código) – Ferramentas de suporte insuficientes Solução: XMLVM <code> <!-– application logic --> </code> Slide 13 XMLVM XML11 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> Slide 14 Exemplo: Java “Hello World” public class HelloWorld { static public void main(String[] args) { System.out.println("Hello World"); } XML11 } HelloWorld.java javac HelloWorld.class xmlvm HelloWorld.xmlvm Slide 15 XML11 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> Slide 16 XMLVM para Outras Linguagens XML11 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> Slide 17 Exemplo: JavaScript “Hello World” // JavaScript function HelloWorld() { HelloWorld.main = function(__arg1) { var __locals = new Array(1); var __stack = new Array(2); var __sp = 0; var __op1; var __op2; XML11 __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"); } } } } Slide 18 Invocação Remota de Objetos XML11 Middleware Implícito Proxy (enviado em XMLVM) Slide 19 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 Tomcat Java Application Web Browser XML11 sobre HTTP XML11 Client AWT/Swing XML11 Toolkit XMLVM XML11 Server Slide 20 Demo XML11 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 Slide 21 Trabalhos Futuros Desenvolver protótipos mais convincentes Potenciais Projetos: XML11 – 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) Slide 22 Conclusão XML11 XML11 é independente de dispositivo Middleware implícito Uso de proxy para invocação remota de objeto Migração de Código baseado em XMLVM Slide 23 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. XML11 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. Slide 24 Interessante Palestra de 1 hora aprox. sobre XML11 disponível em: XML11 <http://video.google.com/videoplay?docid=-3171582187051229467> Acessado em: 07/11/2006. Slide 25