Your SlideShare is downloading. ×
AJAX ? Hype and Reality
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

AJAX ? Hype and Reality

2,981
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,981
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
88
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. AJAX – Hype and Reality Aspects of AJAX Matthias Hertel Leiter Anwendungsentwicklung Technologie Deutsche Bank Bauspar AG AJAX – Hype and Reality 29.04.2010 / Seite 1
  • 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 AJAX – Hype and Reality 29.04.2010 / Seite 2
  • 3. AJAX – Hype and Reality 29.04.2010 / Seite 3
  • 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 AJAX – Hype and Reality 29.04.2010 / Seite 4
  • 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 AJAX – Hype and Reality 29.04.2010 / Seite 5
  • 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; – dynamic display and interaction using the Document Object Model; – data interchange and manipulation using XML and XSLT; – asynchronous data retrieval using XMLHttpRequest; – and JavaScript binding everything together. From: A New Approach to Web Applications • http://www.adaptivepath.com/publications/essays/archives/000385.ph p • http://de.wikipedia.org/wiki/Ajax_(Programmierung) • http://en.wikipedia.org/wiki/AJAX AJAX – Hype and Reality 29.04.2010 / Seite 6
  • 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 AJAX – Hype and Reality 29.04.2010 / Seite 7
  • 8. Reality first – Samples 1 Outlook Web Access Google Mail (http://mail.google.com) Details on the implementation can be found at: http://johnvey.com/features/gmailapi/ Amazon Search Engine (http://www.a9.com) Flickr Image Libraries (http://www.flickr.com) Google Suggest (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.html. Microsofts playground at http://www.start.com/ http://www.live.com AJAX – Hype and Reality 29.04.2010 / Seite 8
  • 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 AJAX – Hype and Reality 29.04.2010 / Seite 9
  • 10. About…, more explained… • http://www.phpmagazine.net/18_ajax • http://www.ajaxpatterns.org/ is a very useful link collection • http://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 AJAX – Hype and Reality 29.04.2010 / Seite 10
  • 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 AJAX – Hype and Reality 29.04.2010 / Seite 11
  • 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 AJAX – Hype and Reality 29.04.2010 / Seite 12
  • 13. old "post-back" Model 1. A request (GET) to the server Browser Server 2. The server "builds" the HTML, data is included Page & Sub-Pages css 3. The page and data is downloaded. gif Ressources 4. All resources (images, include JS files etc.) are requested and downloaded as defined by the Form 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. The page (HTML ) and the resources are Steps 2 to 6 are repeated downloaded on every request. AJAX – Hype and Reality 29.04.2010 / Seite 13
  • 14. AJAX Model 1. A request (GET) to the server Browser How ? Server 2. The server "builds" the HTML, no data is included ! Page & Sub-Pages css 3. The page is downloaded. 4. All resources (images, include gif Ressources files etc.) are requested and JS downloaded as defined by the WebService page. (no form) 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. Only data is Steps 5 to 6 are repeated transferred after the Web Form has loaded. AJAX – Hype and Reality 29.04.2010 / Seite 14
  • 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 AJAX – Hype and Reality 29.04.2010 / Seite 15
  • 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(); AJAX – Hype and Reality 29.04.2010 / Seite 16
  • 17. The client side – asynchronous • Message oriented programming Sending: x.open("POST", url, fResponse); x.setRequestHeader("SOAPAction", Action); x.setRequestHeader("Content-Type", "text/xml; charset=utf-8"); x.send(text); The callback method: function fResponse { if ((x != null) && (x.readyState == 4)) { //COMPLETED outputText = x.ResponseText; x = null; document.getElementById("outputField").value = outputText; } // if } // fResponse • Synchronous processing is possible, but blocking. AJAX – Hype and Reality 29.04.2010 / Seite 17
  • 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 AJAX – Hype and Reality 29.04.2010 / Seite 18
  • 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. AJAX – Hype and Reality 29.04.2010 / Seite 19
  • 20. WebService proxies for JavaScript Declarative WebService: WebService [WebMethod] public string CalcPrimeFactors(string inputText) { // implementation cut out return (outputText); } // CalcPrimeFactors WSDL WSDL Description is auto-generated @WebService XSLT file for transformation public class MyWebService { XSLT @WebMethod(operationName = "echo", action="urn:Echo") JavaScript fragment & String echo(String file public common include input) { return input; } Usage: } JavaScript alert(proxies.CalcService.CalcPrimeFactors("12")); Or: proxies.CalcService.CalcPrimeFactors.func = displayFactors; proxies.CalcService.CalcPrimeFactors("12"); displayFactors(retVal) { alert(retVal); } also see: http://www.codeproject.com/soap/JavaScriptProxy_01.asp AJAX – Hype and Reality 29.04.2010 / Seite 20
  • 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) // 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 AJAX – Hype and Reality 29.04.2010 / Seite 21
  • 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 AJAX – Hype and Reality 29.04.2010 / Seite 22
  • 23. An AJAX Engine • A Client-side framework • No special deployment (JavaScript includes only) • Model View Controller Pattern • Timing • Queuing • Caching AJAX – Hype and Reality 29.04.2010 / Seite 23
  • 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. AJAX – Hype and Reality 29.04.2010 / Seite 24
  • 25. AJAX Controls • Declarative programming • Less code • Reusable components • Less complex when using controls • More complex when programming controls <script type="text/javascript" src="../ajaxcore/GetJavaScriptProxy.aspx?service=../S03_AJAXControls/TableDa ta.asmx"></script> <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 – Hype and Reality 29.04.2010 / Seite 25
  • 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 AJAX – Hype and Reality 29.04.2010 / Seite 26
  • 27. The Hype Keywords • Faster • Rich Web application experience • Web 2.0 AJAX – Hype and Reality 29.04.2010 / Seite 27
  • 28. Expected results: Bytes Transferred 73% More Compact Ajax Traditional 0 500.000 1.000.000 1.500.000 2.000.000 AJAX – Hype and Reality 29.04.2010 / Seite 28
  • 29. Expected results: Estimated Transmission Time 68% Faster Ajax Traditional 0 50 100 150 200 250 300 350 AJAX – Hype and Reality 29.04.2010 / Seite 29
  • 30. Expected results: Total Task Time 32% Faster Ajax Traditional 0 20 40 60 80 100 120 140 AJAX – Hype and Reality 29.04.2010 / Seite 30
  • 31. Vision 1 Less Network + Faster Transmissions More Transactions / sec + Cost savings AJAX – Hype and Reality 29.04.2010 / Seite 31
  • 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 AJAX – Hype and Reality 29.04.2010 / Seite 32
  • 33. Vision 2 Low Cost of Web Applications + Usability of Desktop Appliactions Web 2.0 (AJAX Applications) AJAX – Hype and Reality 29.04.2010 / Seite 33
  • 34. Browser History HTML JScript Flash 3 IFrames RDF ECMAScript XSL-T JavaScript XML XForms xslt2 CSS DOM 1 SOAP WSDL DOM 3 E4X Java Applet DOM XHTML SVG Flash 8 95 96 97 98 99 00 01 02 03 04 05 06 IE 1 2 IE 3 IE 4 IE 5 5.5 IE 6 IE 7 NS 2.0B3 XMLHTTP Mozilla 1.0 FF 1.0 FF 1.5 Browser Wars The Web Depression Web 2.0 … ??? http://www.microsoft.com/windows/WinHistoryIE.mspx AJAX – Hype and Reality 29.04.2010 / Seite 34
  • 35. The time is right There is no innovation when there is no competition http://en.wikipedia.org/wiki/Browser_wars AJAX – Hype and Reality 29.04.2010 / Seite 35
  • 36. Portals and Desktops • Gadgets • Portlets • Web Parts AJAX – Hype and Reality 29.04.2010 / Seite 36
  • 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 AJAX – Hype and Reality 29.04.2010 / Seite 37
  • 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 AJAX – Hype and Reality 29.04.2010 / Seite 38
  • 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/ Behaviour Behaviour is the missing link for your ajax apps. http://bennolan.com/behaviour/ prototype http://prototype.conio.net/ is a JavaScript Framework for dynamic web applications with great ideas ! AJAX – Hype and Reality 29.04.2010 / Seite 39
  • 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 AJAX – Hype and Reality 29.04.2010 / Seite 40
  • 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). He’s also discussing and writing on his blog at 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/ AJAX – Hype and Reality 29.04.2010 / Seite 41
  • 42. Frameworks and Engines – 2 Atlas 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… AJAX – Hype and Reality 29.04.2010 / Seite 42
  • 43. Frameworks and Engines - 3 ComponentArt http://www.componentart.com/home.aspx Rico - Open Source http://openrico.org/rico/home.page is a rich JavaScript framework that also does AJAX. AJAX – Hype and Reality 29.04.2010 / Seite 43
  • 44. Frameworks and Engines - 4 and many more… see http://www.ajaxpatterns.org/Ajax_Frameworks AJAX – Hype and Reality 29.04.2010 / Seite 44
  • 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 AJAX – Hype and Reality 29.04.2010 / Seite 45
  • 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 AJAX – Hype and Reality 29.04.2010 / Seite 46
  • 47. More Links OpenAjax http://www.openajax.net/wordpress/ Understanding and Solving IE Leak Patterns http://msdn.microsoft.com/library/en- us/IETechCol/dnwebgen/ie_leak_patterns.asp AJAX – Hype and Reality 29.04.2010 / Seite 47
  • 48. AJAX – Hype and Reality 29.04.2010 / Seite 48