1. AJAX – Hype and Reality03.06.2015 / Seite 1 AJAX – Hype and Reality Aspects of AJAX Matthias Hertel Leiter Anwendungsentwicklung Technologie Deutsche Bank Bauspar AG

2. AJAX – Hype and Reality03.06.2015 / Seite 2 Agenda AJAX defined The Roots The Reality The AJAX Model The Code The Engine & MVC The Hype & The Vision JavaScript hints Frameworks AJAX Mistakes & Discussion

3. AJAX – Hype and Reality03.06.2015 / Seite 3 Keine Werbung !

4. AJAX – Hype and Reality03.06.2015 / Seite 4 Aiax (röm. = Ajax) Der Telamonier genannt In der griechischen Sage, Held von Troja auf griechischer Seite. Sohn des Telamon von Salamis und der Periboia. Er zog mit 12 Schiffen in den Krieg gegen Troja und wird von Homer als der größte, schönste und tapferste Held neben Achilleus gepriesen und als "Turm der Achaier" bezeichnet. Seine letzte große Tat war die Rettung der Leiche des Achilleus aus den Händen der Trojaner. Als im Streit um die Waffen des Achilleus diese, dem Odysseus zufielen, verfiel Ajax aus Zorn in Wahnsinn und begann Selbstmord. Er kaufte Polymnestor von Thrakien Polydoros ab, tötete Teuthras und seine Kriegsbeute war die Tekmessa. http://www.griechische-antike.de/gott- goetter-helden.php/A/Aiax Keine alten Geschichten !

5. AJAX – Hype and Reality03.06.2015 / Seite 5 Agenda AJAX defined The Roots The Reality The AJAX Model The Code The Engine & MVC The Hype & The Vision JavaScript hints Frameworks AJAX Mistakes & Discussion

6. AJAX – Hype and Reality03.06.2015 / Seite 6 AJAX defined AJAX = Asynchronous JavaScript And XML (+ DHTML) Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates: –standards-based presentation using XHTML and CSS;standards-based presentation –dynamic display and interaction using the Document Object Model;Document Object Model –data interchange and manipulation using XML and XSLT;XML and XSLT –asynchronous data retrieval using XMLHttpRequest;XMLHttpRequest –and JavaScript binding everything together.JavaScript From: A New Approach to Web Applications http://www.adaptivepath.com/publications/essays/archives/000385.ph phttp://www.adaptivepath.com/publications/essays/archives/000385.ph p http://de.wikipedia.org/wiki/Ajax_(Programmierung) http://en.wikipedia.org/wiki/AJAX

7. AJAX – Hype and Reality03.06.2015 / Seite 7 Agenda AJAX defined The Roots The Reality The AJAX Model The Code The Engine & MVC The Hype & The Vision JavaScript hints Frameworks AJAX Mistakes & Discussion

8. AJAX – Hype and Reality03.06.2015 / Seite 8 Reality first – Samples 1 Outlook Web Access Google Mail (http://mail.google.com)http://mail.google.com Details on the implementation can be found at: http://johnvey.com/features/gmailapi/ Amazon Search Engine (http://www.a9.com)http://www.a9.com Flickr Image Libraries (http://www.flickr.com)http://www.flickr.com Google Suggest (http://www.google.com/webhp?complete=1&hl=en)http://www.google.com/webhp?complete=1&hl=en Details on the implementation can be found at: http://serversideguy.blogspot.com/2004/12/google-suggest- dissected.htmlhttp://serversideguy.blogspot.com/2004/12/google-suggest- dissected.html. Microsofts playground at http://www.start.com/http://www.start.com/ http://www.live.comhttp://www.live.com

9. AJAX – Hype and Reality03.06.2015 / Seite 9 Reality first – Samples 2 http://maps.google.com maps, routes & satelite images, Geo-Coding, Geo-Images http://www.writely.com A TextEditor and Document Web Storage System http://www.zimbra.com A(nother) Mail Client http://www.kiko.com Online Calendar http://numsum.com Online Spreadsheet

10. AJAX – Hype and Reality03.06.2015 / Seite 10 About…, more explained… http://www.phpmagazine.net/18_ajax http://www.ajaxpatterns.org/ is a very useful link collectionhttp://www.ajaxpatterns.org/ http://www.fiftyfoureleven.com/resources/programming/xmlhtt prequest/exampleshttp://www.fiftyfoureleven.com/resources/programming/xmlhtt prequest/examples AJAX is not a new thing http://msdn.microsoft.com/library/en- us/dnaspp/html/lifewithoutrefresh.asp

11. AJAX – Hype and Reality03.06.2015 / Seite 11 AJAX Source Code Samples http://www.javarss.com/ajax/j2ee-ajax.html Simple and easy to read article that explains details on the XMLHTTP object. Has a sample for using JSP on the server. http://msdn.microsoft.com/workshop/author/webservice/webservi ce.asp How to call WebServices with the XMLHTTP ActiveXControl in IE. This a non reusable sample on how to use the XMLHTTP object in IE. https://bpcatalog.dev.java.net/nonav/ajax/ajax.html An article from Sun, how to use the XMLHTTP object and call the server by using a simple http GET request with parameters in the url. – No details about the server code. http://www.omnytex.com/articles/xhrstruts/ Ajax using XMLHTTPRequest and Struts – again shows how to use the XMLHTTP object using a simple http GET request with parameters in the url. http://www.devarticles.com/c/a/XML/XML-in-the-Browser- Submitting-forms-using-AJAX/ Submitting http forms using AJAX

12. AJAX – Hype and Reality03.06.2015 / Seite 12 Agenda AJAX defined The Roots The Reality The AJAX Model The Code The Engine & MVC The Hype & The Vision JavaScript hints Frameworks AJAX Mistakes & Discussion

13. AJAX – Hype and Reality03.06.2015 / Seite 13 Server Browser Page & Sub-Pages Form old "post-back" Model 1.A request (GET) to the server 2.The server "builds" the HTML, data is included 3.The page and data is downloaded. 4.All resources (images, include files etc.) are requested and downloaded as defined by the page 5.Client-side JavaScript functions are used to handle events and to change the HTML DOM. 6.A Form is submitted (POST) and all form data is sent to the server. Steps 2 to 6 are repeated Ressources gif css JS The page (HTML ) and the resources are downloaded on every request.

14. AJAX – Hype and Reality03.06.2015 / Seite 14 Server Browser Page & Sub-Pages (no form) AJAX Model Ressources gif css JS Only data is transferred after the Web Form has loaded. 1.A request (GET) to the server 2.The server "builds" the HTML, no data is included ! 3.The page is downloaded. 4.All resources (images, include files etc.) are requested and downloaded as defined by the page. 5.Client-side JavaScript functions are used to get new data from the server using a separate channel (WebService) 6.handle events and to change the HTML DOM. Steps 5 to 6 are repeated WebService How ?

15. AJAX – Hype and Reality03.06.2015 / Seite 15 Agenda AJAX defined The Roots The Reality The AJAX Model The Code The Engine & MVC The Hype & The Vision JavaScript hints Frameworks AJAX Mistakes & Discussion

16. AJAX – Hype and Reality03.06.2015 / Seite 16 The client side – the channel The XMLHTTP Object Scriptable ActiveXControl or built-in try { x = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { } if (x == null) { try { x = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } // if // Gecko / Mozilla / Firefox if ((x == null) && (typeof(XMLHttpRequest) != "undefined")) x = new XMLHttpRequest(); try { x = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { } if (x == null) { try { x = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } // if // Gecko / Mozilla / Firefox if ((x == null) && (typeof(XMLHttpRequest) != "undefined")) x = new XMLHttpRequest();

17. AJAX – Hype and Reality03.06.2015 / Seite 17 The client side – asynchronous Message oriented programming Sending: The callback method: Synchronous processing is possible, but blocking. x.open("POST", url, fResponse); x.setRequestHeader("SOAPAction", Action); x.setRequestHeader("Content-Type", "text/xml; charset=utf-8"); x.send(text); x.open("POST", url, fResponse); x.setRequestHeader("SOAPAction", Action); x.setRequestHeader("Content-Type", "text/xml; charset=utf-8"); x.send(text); function fResponse { if ((x != null) && (x.readyState == 4)) { //COMPLETED outputText = x.ResponseText; x = null; document.getElementById("outputField").value = outputText; } // if } // fResponse function fResponse { if ((x != null) && (x.readyState == 4)) { //COMPLETED outputText = x.ResponseText; x = null; document.getElementById("outputField").value = outputText; } // if } // fResponse

18. AJAX – Hype and Reality03.06.2015 / Seite 18 The server side Regular request with or without data Alternative 1: regular *.aspx / *.jsp / *.php pages –data oriented programming and remote execution in html oriented technology –works without infrastructure changes Alternative 2: special implementations –data oriented programming get easier –parameter parsing, reflection, protocol… –special infrastructure is needed (AJAX.NET) Alternative 3: using the WebService standard –Made for remote execution and standard data types –no coding in infrastructure needed (ASP.NET, JSR 181) http://jcp.org/aboutJava/communityprocess/final/jsr181/index.html

19. AJAX – Hype and Reality03.06.2015 / Seite 19 No native programming ! Native programming can be done – but costs a lot JavaScript overhead should be concentrated into common include files Common features needed: Parameter -> protocol Protocol -> return values Simple data types Complex data types Queuing of AJAX requests (max. 2 http connections per server) Memory leaks Many reasons for building a reusable framework and engine.

20. AJAX – Hype and Reality03.06.2015 / Seite 20 WebService proxies for JavaScript Declarative WebService: WSDL Description is auto-generated XSLT file for transformation JavaScript fragment & common include file Usage: Or: also see: http://www.codeproject.com/soap/JavaScriptProxy_01.asp XSLT WSDL WebService JavaScript [WebMethod] public string CalcPrimeFactors(string inputText) { // implementation cut out return (outputText); } // CalcPrimeFactors [WebMethod] public string CalcPrimeFactors(string inputText) { // implementation cut out return (outputText); } // CalcPrimeFactors alert(proxies.CalcService.CalcPrimeFactors("12")); proxies.CalcService.CalcPrimeFactors.func = displayFactors; proxies.CalcService.CalcPrimeFactors("12"); displayFactors(retVal) { alert(retVal); } proxies.CalcService.CalcPrimeFactors.func = displayFactors; proxies.CalcService.CalcPrimeFactors("12"); displayFactors(retVal) { alert(retVal); } @WebService public class MyWebService { @WebMethod(operationName = "echo", action="urn:Echo") public String echo(String input) { return input; } @WebService public class MyWebService { @WebMethod(operationName = "echo", action="urn:Echo") public String echo(String input) { return input; }

21. AJAX – Hype and Reality03.06.2015 / Seite 21 (µ) Process oriented programming Asynchronous programming is very different when compared to the usual programming style. Asynchronous programming needs functional entry points on message events. Programmers "love" linear programming style when programming processes. Multi-threading is not supported on JavaScript platforms. Synchronous processing of server-calls works – but blocks. API of the AJAX engine is critical for success. Keep it simple. (http://en.wikipedia.org/wiki/KISS_Principle)http://en.wikipedia.org/wiki/KISS_Principle // declare an AJAX action var actionDefinition = { prepare: function() { return (document.getElementById("inputField").value); }, call: proxies.CalcService.CalcPrimeFactors, finish: function (p) { document.getElementById("outputField").value = p; } } // actionDefinition // declare an AJAX action var actionDefinition = { prepare: function() { return (document.getElementById("inputField").value); }, call: proxies.CalcService.CalcPrimeFactors, finish: function (p) { document.getElementById("outputField").value = p; } } // actionDefinition

22. AJAX – Hype and Reality03.06.2015 / Seite 22 Agenda AJAX defined The Roots The Reality The AJAX Model The Code The Engine & MVC The Hype & The Vision JavaScript hints Frameworks AJAX Mistakes & Discussion

23. AJAX – Hype and Reality03.06.2015 / Seite 23 An AJAX Engine A Client-side framework No special deployment (JavaScript includes only) Model View Controller Pattern Timing Queuing Caching

24. AJAX – Hype and Reality03.06.2015 / Seite 24 AJAX Controls Server & client-side framework. No special deployment (JavaScript includes only). General implementation of JavaScript behaviours. Extending pages by reusing components as controls. Using ASP.NET web controls & user controls infrastructure.

25. AJAX – Hype and Reality03.06.2015 / Seite 25 AJAX Controls Declarative programming Less code Reusable components Less complex when using controls More complex when programming controls <ajax:TableDataPager ID="TableDataPager33" runat="server" Service="TableData" tabledatapart="tab44" Pagesize="20" showall="true" /> <ajax:TableData ID="tab44" cols="company[Company];name[Name]:200;city[City]:100;country[Country]:100" runat="server" /> <ajax:TableDataPager ID="TableDataPager33" runat="server" Service="TableData" tabledatapart="tab44" Pagesize="20" showall="true" /> <ajax:TableData ID="tab44" cols="company[Company];name[Name]:200;city[City]:100;country[Country]:100" runat="server" />

26. AJAX – Hype and Reality03.06.2015 / Seite 26 Agenda AJAX defined The Roots The Reality The AJAX Model The Code The Engine & MVC The Hype & The Vision JavaScript hints Frameworks AJAX Mistakes & Discussion

27. AJAX – Hype and Reality03.06.2015 / Seite 27 The Hype Keywords Faster Rich Web application experience Web 2.0

28. AJAX – Hype and Reality03.06.2015 / Seite 28 Expected results: Bytes Transferred 73% More Compact

29. AJAX – Hype and Reality03.06.2015 / Seite 29 Expected results: Estimated Transmission Time 68% Faster

30. AJAX – Hype and Reality03.06.2015 / Seite 30 Expected results: Total Task Time 32% Faster

31. AJAX – Hype and Reality03.06.2015 / Seite 31 Vision 1 Less Network + Faster Transmissions More Transactions / sec + Cost savings

32. AJAX – Hype and Reality03.06.2015 / Seite 32 Expected results: more complex dev. Complex, unusual JavaScript programming no usable debugger (in FireFox) no Profiler no high level design tools (UML, DSL, …) No multithreading but asynchronous callbacks

33. AJAX – Hype and Reality03.06.2015 / Seite 33 Vision 2 Low Cost of Web Applications + Usability of Desktop Appliactions Web 2.0 (AJAX Applications)

34. AJAX – Hype and Reality03.06.2015 / Seite 34 Browser History http://www.microsoft.com/windows/WinHistoryIE.mspx 96 97 98 99 00 01020304 05 NS 2.0B3 JavaScript IFrames JScript Browser Wars FF 1.0 CSS ECMAScript DOM DOM 1 Flash 3 Flash 8 Java Applet FF 1.5 E4X XML XMLHTTP DOM 3 XForms XSL-T xslt2 The Web DepressionWeb 2.0 … ??? RDF XHTML SVG Mozilla 1.0 06 SOAPWSDL 95 IE 12IE 3IE 4IE 55.5 IE 6 IE 7 HTML

35. AJAX – Hype and Reality03.06.2015 / Seite 35 The time is right There is no innovation when there is no competition http://en.wikipedia.org/wiki/Browser_wars

36. AJAX – Hype and Reality03.06.2015 / Seite 36 Portals and Desktops Gadgets Portlets Web Parts The Obsolete Operating System Web OS The Obsolete Operating System Web OS

37. AJAX – Hype and Reality03.06.2015 / Seite 37 Web 2.0 – The Vision … is using Web 2.0 technologies & techniques … and a cloud of new keywords –Semantic Web –CSS –SVG –AJAX –Java Web Start, Click to install –Flex, Lazlo, Flash –XUL, XBL –RSS, Atom –Clean and meaningful URLs –Posting information to services –SOAP, WSDL, REST WebServices –Social networking http://en.wikipedia.org/wiki/Web_2.0

38. AJAX – Hype and Reality03.06.2015 / Seite 38 Agenda AJAX defined The Roots The Reality The AJAX Model The Code The Engine & MVC The Hype & The Vision JavaScript hints Frameworks AJAX Mistakes & Discussion

39. AJAX – Hype and Reality03.06.2015 / Seite 39 The Art of JavaScript You MUST understand JavaScript ! JSON (JavaScript Object Notation) http://www.crockford.com/JSON/index.html Strange Zen Of JavaScript Blog from Scott Andrew at http://jszen.blogspot.com/http://jszen.blogspot.com/ Behaviour Behaviour is the missing link for your ajax apps. http://bennolan.com/behaviour/ prototype http://prototype.conio.net/http://prototype.conio.net/ is a JavaScript Framework for dynamic web applications with great ideas !

40. AJAX – Hype and Reality03.06.2015 / Seite 40 Agenda AJAX defined The Roots The Reality The AJAX Model The Code The Engine & MVC The Hype & The Vision JavaScript hints Frameworks AJAX Mistakes & Discussion

41. AJAX – Hype and Reality03.06.2015 / Seite 41 Frameworks and Engines - 1 Open Source Frameworks Ajax.NET is a great engine written by Michael Schwarz. It uses a special protocol based on JSON for expressing JavaScript objects so you have to write special server side classes. (WebServices are announced).JSON He’s also discussing and writing on his blog at http://weblogs.asp.net/mschwarz/http://weblogs.asp.net/mschwarz/. Samples for this engine: http://ajax.schwarz-interactive.de/csharpsample/default.aspx Source at: https://svn.borgworx.net/SVN/BorgWorX/trunk/Web/Core/Ajax/ My statement: will not be finished because of … My statement: will not be finished because of …

42. AJAX – Hype and Reality03.06.2015 / Seite 42 Frameworks and Engines – 2 Atlas http://atlas.asp.net/http://atlas.asp.net/ Microsoft is also working on AJAX application framework. The project with the codename Atlas was announced on http://weblogs.asp.net/scottgu/archive/2005/06/28/416185.aspx see: http://www.live.com http://www.start.com http://microsoftgadgets.com next version of hotmail… My statement: bound to ASP.NET unfinished Using new XML based modeling + scripting My statement: bound to ASP.NET unfinished Using new XML based modeling + scripting

43. AJAX – Hype and Reality03.06.2015 / Seite 43 Frameworks and Engines - 3 ComponentArt http://www.componentart.com/home.aspx Rico - Open Source http://openrico.org/rico/home.pagehttp://openrico.org/rico/home.page is a rich JavaScript framework that also does AJAX. My statement: AJAX is a Hype keyword HTML frameworks will adopt it AJAX is a "MUST HAVE" feature My statement: AJAX is a Hype keyword HTML frameworks will adopt it AJAX is a "MUST HAVE" feature

44. AJAX – Hype and Reality03.06.2015 / Seite 44 Frameworks and Engines - 4 and many more… see http://www.ajaxpatterns.org/Ajax_Frameworkshttp://www.ajaxpatterns.org/Ajax_Frameworks

45. AJAX – Hype and Reality03.06.2015 / Seite 45 Agenda AJAX defined The Roots The Reality The AJAX Model The Code The Engine & MVC The Hype & The Vision JavaScript hints Frameworks AJAX Mistakes & Discussion

46. AJAX – Hype and Reality03.06.2015 / Seite 46 AJAX Mistakes Using AJAX for the sake of AJAX Breaking the Back Button Not giving immediate visual cues for clicking Leaving offline people behind What happens if JavaScript is disabled ? Sending sensitive information in the clear Single platform development Too much code Inventing new UI conventions Not being linkable Asynchronously performing batch operations Blocking spidering & web crawlers

47. AJAX – Hype and Reality03.06.2015 / Seite 47 More Links OpenAjax http://www.openajax.net/wordpress/http://www.openajax.net/wordpress/ Understanding and Solving IE Leak Patterns http://msdn.microsoft.com/library/en- us/IETechCol/dnwebgen/ie_leak_patterns.asp

48. AJAX – Hype and Reality03.06.2015 / Seite 48 Questions ?