More Related Content Similar to Developing and testing ajax components (20) Developing and testing ajax components4. Two types of web applications RIA vs REST (You should choose) 8. REST and unobtrusive javascript Old: <input onchange=”something()”> New: <input id=”price”> <script> $('price').observe('change', something); </script> 10. User-perceived performance CSS at the top downloaded in parallel JS at the bottom downloaded sequentially <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Loom Demo - </title> <link href="/loomdemo/css/yaml-3.0.5/core/base.css" rel="stylesheet" type="text/css"></link> <link href="/loomdemo/css/yaml-3.0.5/navigation/nav_vlist.css" rel="stylesheet" type="text/css"></link> <link href="/loomdemo/css/yaml-3.0.5/navigation/nav_slidingdoor.css" rel="stylesheet" type="text/css"></link> <link href="/loomdemo/css/yaml-3.0.5/screen/content_default.css" rel="stylesheet" type="text/css"></link> <link href="/loomdemo/css/yaml-3.0.5/core/print_base.css" rel="stylesheet" type="text/css"></link> <!--[if IE]><link href="/loomdemo/css/yaml-3.0.5/core/iehacks.css" rel="stylesheet" type="text/css"></link><![endif]--> </head> <body> <div id="page_margins"> <div id="page"> <div id="header"> <div id="topleft"> <a href="/loomdemo/" title="Demo home">Demo home</a> | <a href="http://loom.extrema-sistemas.org/" title="Loom home">Loom home</a> | <a href="http://loom.extrema-sistemas.org/get-documentation" title="Loom doc">Loom doc</a> </div> <div id="topcenter"> Change language: ( <a href="/loomdemo/support/Locale.action?locale=en" hreflang="en" class="selected">english</a> | <a href="/loomdemo/support/Locale.action?locale=es" hreflang="es" class="">español</a> ) </div> <div id="topnav"> <a href="/loomdemo/other/ViewJspSource.action?jspFilename=/WEB-INF/jsp/ebanking/listAll.jsp&actionName=org.loom.demo.action.ebanking.MortgagesAction" class="strong" title="View source">View source</a> </div> </div> <div id="main"> < <div id="col2"> <div id="col2_content" class="clearfix"> <div id="tips"> <div class="hide-fouc important">Tips are only available with javascript turned on</div> </div> </div> </div> <div id="col3"> <div id="col3_content" class="clearfix"> <form action="/loomdemo/ebanking/Mortgages.action"> <div class="buttonBar"> <input type="submit" value="Delete" class="submit" /> </div> <table id="row"> <thead> <tr> <th class="first"></th> <th class="sortable"> <a href="Mortgages.action?sort=id&event=listAll&dir=asc">ID</a></th> <th class="name sortable"> <a href="Mortgages.action?sort=name&event=listAll&dir=asc">Name</a></th> <th class="sortable"> <a href="Mortgages.action?sort=address&event=listAll&dir=asc">Address</a></th> <th class="date sortable"> <a href="Mortgages.action?sort=principalLoanBalance&event=listAll&dir=asc">Loan</a></th> <th></th> <th class="date sortable"> <a href="Mortgages.action?sort=creationDate&event=listAll&dir=asc">Creation date</a></th></tr></thead> <tbody> <tr class="empty"><td colspan="7">Nothing found to display.</td></tr> </tbody> </table> <input type="hidden" name="__source" value="/WEB-INF/jsp/ebanking/listAll.jsp"/> <input type="hidden" name="event" value="delete"/> </form> <!-- IE Column Clearing --> <div id="ie_clearing">   </div> </div> </div> </div> <div id="footer"> <p style="float:right">Layout based on <a href="http://www.yaml.de/en/home.html">YAML</a></p> <p>You are currently one of the 1 users browsing this demo site. - <a href="/loomdemo/about.jsp" title="about this demo site">about this demo site</a></p> <p>© 2007 Extrema Sistemas de Información - <a href="http://extrema-sistemas.com/en/legal" title="Terms of use">Terms of use</a> - <a href="http://extrema-sistemas.com/en/contact" title="Go to the contact form">Contact</a> - <a href="http://extrema-sistemas.com" title="Go to Extrema home">Extrema home</a> </p> </div> </div> </div> <script src="//ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js" type="text/javascript"></script> <script src="/loomdemo/js/loom-1.0-SNAPSHOT/loom.js" type="text/javascript"></script> <script src="//ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js?load=builder,effects" type="text/javascript"> </script> <script src="/loomdemo/js/tips.js" type="text/javascript"></script> </body> </html> 12. Connect javascript autocompleter <myapp:autocompleter name=”parent” action="Entries" event="getParentCandidates" /> 13. First attempt The server generates HTML + javascript: <input type=”text” name=”parent” id=”parent” /> <script> new Autocompleter($(“parent”), { url: “http://localhost/getCandidates.json” }) </script> 16. Some libraries must be loaded before the HTML (really bad for performance) 20. This is your javascript code , not generated by the server: $$('input.autocompleter').each(function(e) { new Autocompleter(e, { url: e.getAttribute('url'); }); }); 39. 1: Static HTML page <html> <body> <input type=”text” name=”parent” id=”foo” class=”autocompleter” url=“mock-candidates.json” /> <script> var auto = new Autocompleter($('foo'), { url: e.getAttribute('url'); }); </script> </body> </html> 46. Open all supported browsers for the host environment 52. 2: Test HTML + flash + real javascript Editor's Notes This is the typical look of an application that starts adding a couple of js features and ends up like the Loch Ness Monster. Ajax is not like XP, it should not be improvised. Cuando se elige entre REST y RIA, tener en cuenta que a una aplicación en intranet le da igual estar indexada (y otros casos como Google wave,por ser contenidos de corta caducidad), pero al resto frecuentemente le hace falta indexarse. Hay un museo en Madrid que tiene en torno al 50% de accesos desde google. Para nosotros es el 75%. Lo puedo poner en una pagina o en un script general Puedo probar manualmente con firebug Puedo modificar lo que pruebo Puedo inspeccionarlo todo Uso un fichero local