Developing and testing ajax components

Developing and testing Ajax components Ignacio Coloma [email_address] http://extrema-sistemas.com

The goal Develop and test javascript components

Why? We usually get lost in the details integrating Ajax with java

Two types of web applications RIA vs REST (You should choose)

REST misuse This is not an iPhone

RIA misuse This is not a knife

Don't forget the search engine! You may call it SEO , We call it

REST and unobtrusive javascript Old: <input onchange=”something()”> New: <input id=”price”> <script> $('price').observe('change', something); </script>

Progressive enhancement Design for javascript-less Add enhancements if javascript is present.

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>  </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>  <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>

Custom JSP tag

Write HTML
Connect javascript autocompleter

<myapp:autocompleter name=”parent” action="Entries" event="getParentCandidates" />

First attempt The server generates HTML + javascript: <input type=”text” name=”parent” id=”parent” /> <script> new Autocompleter($(“parent”), { url: “http://localhost/getCandidates.json” }) </script>

Problems

The id attribute is required or must be generated (fluff)
The javascript code is generated by the server (inflexible)
Some libraries must be loaded before the HTML (really bad for performance)
Too many <script> tags (harder to debug and hurts performance)

Better solution

Generate just the HTML code :

Add static javascript code

Add javascript code as needed
This is your javascript code , not generated by the server:

$$('input.autocompleter').each(function(e) { new Autocompleter(e, { url: e.getAttribute('url'); }); });

Benefits

The id attribute is not required
All javascript code is together at the end of the page or inside external javascript files
Maximum javascript flexibility
Cleaner code that is cacheable

Conclusion: HTML as the API

HTML is the contract between your java server and your javascript code .

Test your code Javascript code should also be tested

Three ways of testing

GWT – java code translated to javascript
Java-driven tests: WebDriver, Selenium
Javascript-driven tests

Broad choice

JQuery : Qunit
Prototype : UnitTest
Dojo : D.O.H (Dojo Objective Harness)
MooTools : Clientcide Test Framework
YUI : YUI Test
Others : FireUnit, TestMonkey...

Javascript-driven tests

1: Static HTML page with javascript (manual test)
2: Add javascript tests
3: Add test suite

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>

Testing with IE

Add the mark of the web to bypass the IE security warning

<!DOCTYPE>  <html>

Testing with IE 7+

Enable XHR access to the local filesystem using IE 7

if (Prototype.Browser.IE && XMLHttpRequest) { XMLHttpRequest = function() { return new ActiveXObject("Microsoft.XMLHTTP"); } }

2: Add javascript tests

Identify functions that can be tested easily:

var test = new Test.Unit.Runner({ testFooBar: function() { this.assertVisible(auto.element); this.assertEqual(120, auto.element.getWidth()); this.assertEqual('foo', auto.FooBar()); } });

Make synchronous Ajax calls

Add a flag to disable asynchronous XHR in your components

Make your test wait()

Invoking window.settimeout() will not work!

testThrottle: function() { var total = 0; var func = function(v) { total += v; }.throttle(1); for (var i = 0; i < 10; i++) { func(10); } wait(1000, function() { this.assertEqual(10, total); }.bind(this)); }

3: Add test suite