Transcript Document 7367805

AJAX – Hype and Reality
Aspects of AJAX
Matthias Hertel
Leiter Anwendungsentwicklung Technologie
Deutsche Bank Bauspar AG
AJAX – Hype and Reality
23.05.2016 / Seite 1
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
23.05.2016 / Seite 2
AJAX – Hype and Reality
23.05.2016 / Seite 3
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/gottgoetter-helden.php/A/Aiax
AJAX – Hype and Reality
23.05.2016 / Seite 4
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
23.05.2016 / Seite 5
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
23.05.2016 / Seite 6
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
23.05.2016 / Seite 7
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-suggestdissected.html.
Microsofts playground at
http://www.start.com/ http://www.live.com
AJAX – Hype and Reality
23.05.2016 / Seite 8
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
23.05.2016 / Seite 9
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/enus/dnaspp/html/lifewithoutrefresh.asp
AJAX – Hype and Reality
23.05.2016 / Seite 10
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-BrowserSubmitting-forms-using-AJAX/
Submitting http forms using AJAX
AJAX – Hype and Reality
23.05.2016 / Seite 11
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
23.05.2016 / Seite 12
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
AJAX – Hype and Reality
Browser
Server
Page & Sub-Pages
css
gif
Ressources
JS
Form
The page (HTML )
and the resources are
downloaded on every
request.
23.05.2016 / Seite 13
AJAX Model
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
AJAX – Hype and Reality
Browser
How ?
Server
Page & Sub-Pages
css
gif
Ressources
JS
(no form)
WebService
Only data is
transferred after the
Web Form has
loaded.
23.05.2016 / Seite 14
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
23.05.2016 / Seite 15
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
23.05.2016 / Seite 16
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
23.05.2016 / Seite 17
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
23.05.2016 / Seite 18
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
23.05.2016 / Seite 19
WebService proxies for JavaScript
Declarative WebService:
WebService
[WebMethod]
public string CalcPrimeFactors(string inputText) {
// implementation cut out
return (outputText);
} // CalcPrimeFactors
WSDL Description
is auto-generated
@WebService
public class MyWebService {
XSLT file for transformation
@WebMethod(operationName = "echo",
JavaScript fragment
& String
common
include file
public
echo(String
input) {
WSDL
XSLT
action="urn:Echo")
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
23.05.2016 / Seite 20
(µ)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
23.05.2016 / Seite 21
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
23.05.2016 / Seite 22
An AJAX Engine
•
•
•
•
•
•
A Client-side framework
No special deployment (JavaScript includes only)
Model View Controller Pattern
Timing
Queuing
Caching
AJAX – Hype and Reality
23.05.2016 / Seite 23
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
23.05.2016 / Seite 24
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
23.05.2016 / Seite 25
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
23.05.2016 / Seite 26
The Hype Keywords
•
•
Faster
Rich Web application experience
•
Web 2.0
AJAX – Hype and Reality
23.05.2016 / Seite 27
Expected results:
Bytes Transferred
73% More Compact
Ajax
Traditional
0
AJAX – Hype and Reality
500.000
1.000.000
1.500.000
2.000.000
23.05.2016 / Seite 28
Expected results:
Estimated Transmission Time
68% Faster
Ajax
Traditional
0
50
AJAX – Hype and Reality
100
150
200
250
300
350
23.05.2016 / Seite 29
Expected results:
Total Task Time
32% Faster
Ajax
Traditional
0
20
AJAX – Hype and Reality
40
60
80
100
120
140
23.05.2016 / Seite 30
Vision 1
Less Network
+
Faster Transmissions
More Transactions / sec
+
Cost savings
AJAX – Hype and Reality
23.05.2016 / Seite 31
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
23.05.2016 / Seite 32
Vision 2
Low Cost of Web Applications
+
Usability of Desktop Appliactions
Web 2.0
(AJAX Applications)
AJAX – Hype and Reality
23.05.2016 / Seite 33
Browser History
HTML
Flash 3
JScript
IFrames
ECMAScript
JavaScript
XML
CSS
96
IE 1 2
IE 3
XForms
DOM 1
Java Applet
95
RDF
XSL-T
SOAP
DOM
98
97
IE 4
Browser Wars
DOM 3
SVG
XHTML
99
IE 5
00
01
02
03
5.5
XMLHTTP
NS 2.0B3
WSDL
xslt2
E4X
Flash 8
04
05
06
IE 7
IE 6
Mozilla 1.0
The Web Depression
FF 1.0
FF 1.5
Web 2.0 … ???
http://www.microsoft.com/windows/WinHistoryIE.mspx
AJAX – Hype and Reality
23.05.2016 / Seite 34
The time is right
There is no
innovation when
there is no
competition
http://en.wikipedia.org/wiki/Browser_wars
AJAX – Hype and Reality
23.05.2016 / Seite 35
Portals and Desktops
•
•
•
Gadgets
Portlets
Web Parts
AJAX – Hype and Reality
23.05.2016 / Seite 36
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
http://en.wikipedia.org/wiki/Web_2.0
– Social networking
AJAX – Hype and Reality
23.05.2016 / Seite 37
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
23.05.2016 / Seite 38
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
23.05.2016 / Seite 39
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
23.05.2016 / Seite 40
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
23.05.2016 / Seite 41
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
23.05.2016 / Seite 42
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
23.05.2016 / Seite 43
Frameworks and Engines - 4
and many more…
see http://www.ajaxpatterns.org/Ajax_Frameworks
AJAX – Hype and Reality
23.05.2016 / Seite 44
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
23.05.2016 / Seite 45
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
23.05.2016 / Seite 46
More Links
OpenAjax http://www.openajax.net/wordpress/
Understanding and Solving IE Leak Patterns
http://msdn.microsoft.com/library/enus/IETechCol/dnwebgen/ie_leak_patterns.asp
AJAX – Hype and Reality
23.05.2016 / Seite 47
AJAX – Hype and Reality
23.05.2016 / Seite 48