WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web...
Transcript of WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web...
![Page 1: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/1.jpg)
The Web, revisited
Credits: Some of the slides are based on material adapted from
www.telerik.com/documents/Telerik_and_AJAX.pdf
1
![Page 2: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/2.jpg)
The old web: 1994
HTML pages (hyperlinks)+ static graphics + cgi (active engines) + some separated dynamic graphics (Applets)
HTTP is a stateless protocol: cookies
2
![Page 3: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/3.jpg)
3
http
d
The original web architecture
Inte
rnet
HTTP Get
Cgi-bin Query SQL
proc
ess
DB
Data
Client
Browser
Server
File System
![Page 4: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/4.jpg)
Evolution of the web: 1
Better dynamic engines
Servlets, ASP, JSP (+ Php, Perl, Python...)
Better Server-side organizationEJB, frameworks (Struts, Hybernate, Spring)
4
![Page 5: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/5.jpg)
5
http
d
The Bottleneck!
Inte
rnet
HTTP Get
Cgi-bin Query SQL
proc
ess
DB
Data
Client
Browser SLOW!
Server
File System
![Page 6: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/6.jpg)
6
http
d
The solution:
Inte
rnet
HTTP Get
Cgi-bin Query SQL
proc
ess
DB
Data
Client
Smartbrowser
HowHow? ? IncludingIncluding code in HTML code in HTML
Server
File System
reduce net traffic by havinga smarter client!
![Page 7: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/7.jpg)
Evolution of the web: 2
Better control of the browserJavascript + DOMApplet-Javascript interaction
Better separation of content and presentationCSS (DHTML=HTML4+Javascript+DOM+CSS)
XML+XSLT, Cocoon (XHTML)
7
![Page 8: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/8.jpg)
Evolution of the web: 3
Better construction of interfaces (widgets)
.NetJava Server Faces
8
![Page 9: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/9.jpg)
Are we there?
BUT ALL THISIS NOT YET
ENOUGH!
9
![Page 10: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/10.jpg)
Key disadvantages of web apps
Poor Interactivity users must wait for full page reloads after each interaction with
the server.Unresponsiveness
classic web applications transfer the complete form data to theserver, which in turn renders and sends back the full HTMLmarkup of the page to the browser. Lots of bandwidth isconsumed and the performance is significantly hindered. Evenworse, the user will often find the page has scrolled to adifferent position, causing disorientation.
Simplistic Interfacesthe requirement for full page postback whenever the user
interface has to be changed imposes hefty limitations on thedegree of sophistication of web user interfaces. Rich andsmooth interfaces with on-demand update could only beimplemented using host technologies (Flash – Applets).
10
![Page 11: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/11.jpg)
The form nightmare…11
![Page 12: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/12.jpg)
Evolution of the web: 4
Embedding specialized, non web objects(plug ins)
Applets Active-X Quicktime RealPlayer Flash
12
![Page 13: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/13.jpg)
The rise of the new web
“The Web as we know it is changing probablymore than it has since the first graphic showedup… The idea of the webpage itself is nearingits useful end. With the way Ajax allows you tobuild nearly stateless applications that happento be web accessible, everything changes.”
Jesse James Garrett, February 15, 2005
http://www.adaptivepath.com/publications/essays/archives/000385.php
13
![Page 14: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/14.jpg)
The new web - Examples
http://demo.script.aculo.us/
http://demos.openrico.org/
14
![Page 15: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/15.jpg)
Ajax !
new development technique will blur the line between web-based and
desktop applications. rich, highly responsive and interactive
interfaces Acronym stands for “Asynchronous JavaScript
+ XML”.
15
![Page 16: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/16.jpg)
How does Ajax work?
The core idea behind AJAX is to make thecommunication with the server asynchronous,so that data is transferred and processed in thebackground.
As a result the user can continue working on theother parts of the page without interruption.
In an AJAX-enabled application only the relevantpage elements are updated, only when this isnecessary.
16
![Page 17: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/17.jpg)
The hart of Ajax
not actually a brand new technology! First used after Microsoft implemented
Microsoft XMLHTTP COM object that was partof The Microsoft® XML Parser (IE 5.1)
Similarly supported by a Mozilla Javascriptobject XMLHttpRequest (Mozilla 1.0, Firefox,Safari 1.2 etc.)
Massively used by Google
Other labels for the same technology were Load on Demand, Asynchronous Requests, Callbacks, Out-of-band Calls, etc.
17
![Page 18: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/18.jpg)
Ajax code
if (window.XMLHttpRequest) { // Mozilla, Safari,... http_request = new XMLHttpRequest();} else if (window.ActiveXObject) { // IE http_request = newActiveXObject("Microsoft.XMLHTTP");}
A more complete example? See e.g.http://www.onlamp.com/pub/a/onlamp/2005/05/19/xmlhttprequest.html
18
![Page 19: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/19.jpg)
Ajax is more than that
* dynamic presentation based on XHTML + CSS; * dynamic display and interaction using
Document Object Model; * data exchange and manipulation using XML e
XSLT; * asynchrounous data fetching using
XMLHttpRequest; * JavaScript as glue.
19
![Page 20: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/20.jpg)
The paradigms
1.0 2.0
Pictures after
Jesse James Garrett
20
![Page 21: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/21.jpg)
The models
1.0
2.0
Pictures after
Jesse James Garrett
21
![Page 22: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/22.jpg)
The (impressive!) result - RIA22
![Page 23: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/23.jpg)
Ajax - advantages
Rich applications in browsersNo issues with installationBuilt on existing infrastructure
(TCP/IP, SSL, HTTP, XML…)
23
![Page 24: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/24.jpg)
Ajax - advantages
Better Performance and Efficiency small amount of data transferred from the server. Beneficial fordata-intensive applications as well as for low-bandwidth networks.
More Responsive Interfaces the improved performance give the feeling that updates are
happening instantly. AJAX web applications appear to behavemuch like their desktop counterparts.
Reduced or Eliminated "Waiting" Time only the relevant page elements are updates, with the rest of the
page remaining unchanged. This decreases the idle waiting time.
Increased Usability
Users Can Work with the Rest of the Page while data is beingtransferred in the background.
24
![Page 25: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/25.jpg)
Applicability Scenarios
Highly interactive applications Google Spreadsheet
• Data visualization – visualizing large datasetsGoogle Maps
Data input & validationit’s possible to validate the data the user enters, while
they are entering it. They can then receive feedback(using the server’s intelligence) without the pagebeing posted back.
Active widgets
25
![Page 26: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/26.jpg)
And make sure that you…
Preserve the Normal Page Lifecycle – as much aspossible!
Reflect Control State on the Server – in real-life scenariosthere is no use of simply rendering controls on thepage.
Support Cross-Browser usage – there are differentimplementation of the XmlHttpRequest object. Youshould make sure that all AJAX components youchoose operate properly on various browsers andplatforms.
Ensure proper Operation when Cookies are Disabled –support cookieless sessions.
26
![Page 27: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/27.jpg)
And make sure that you…
Give visual feedback - When a user clicks on something in theAJAX user interface, they need immediate visual feedback
Keep the Back button – make sure that the Back button in yourapplication functions on every page of the site.
Use links for navigation – avoid the temptation to use links as aninterface on your AJAX application to change the state of yourapplication. Users have been trained over ten years to expect alink to “take” them somewhere, so give them what they expect.
Limit the scope of visual changes – when an AJAX call results inone or more changes to what the user sees, keep the changeslocal to the place where the user would expect them to be.
Use human-readable links – people like to pass the addresses ofuseful web pages to each other. Make sure your applicationsupports URLs that people can share easily, so not too long orcomplex.
Adapted from: www.telerik.com/documents/Telerik_and_AJAX.pdf
27
![Page 28: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/28.jpg)
And make sure that you…
Don’t bloat the code – make sure that your application uses aslittle client-side scripting as possible. This reduces download timefor the page and also reduces the processor requirements on theclient browser, so results in a faster browser experience.
Follow UI conventions – AJAX is a world of possibilities, but whenit comes to user interface the best is invariably the familiar. Ifyou’re creating a user interface for a specific feature, the place tostart is by replicating an existing successful interface and lookingat what your clients expect. Also remember that although it maybe cool to implement drag-and-drop, few people may realize theinterface relies on it.
Don’t scroll – users like to feel in control, so if they have movedthe scrollbar to a specific place, don’t move the page somewhereelse.
Reduce page loads – do as much as you can to reduce thenumber of page loads the user has to do to achieve their goal.
Adapted from: www.telerik.com/documents/Telerik_and_AJAX.pdf
28
![Page 29: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/29.jpg)
Warning: Ajax has drawbacks!
Accessibilitythe AJAX development technique fundamentally
violates the requirements for accessibility.Since the page content is being updated dynamically,
the changes may not be detected by accessibilitytools like screen readers.
Some accessibility standards prohibit the use ofJavaScript altogether…
New UI Interactivity Requires Learningthe UI richness of AJAX-enabled application presents
users with new and unexpected functionality.
this may require some learning!
29
![Page 30: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/30.jpg)
But Ajax is hard!
Extensive use of Javascript- requires substantial JavaScript skills- lack of good debugging tools for client-side script- it is like debugging multithreaded Javascript!
Breaks normal page lifecycleAJAX requires a different way of thinking about a web-site, since
the concept of a "Page" is no longer valid. In fact, AJAXapplications may be considered as closer to the desktop-applications development approach.
The fact that a Page no longer holds constant data leads to twoimportant consequences – the Back button and bookmarkingwill no longer work as expected.
Every browser has its flavour!
30
![Page 31: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/31.jpg)
How to solve the problem?
There are many proposedlibraries/frameworks
Survey of AJAX/JavaScript Libraries
http://chandlerproject.org/bin/view/Projects/AjaxLibraries
WARNING: Third Party Controls with Complex JavaScript(e.g. powerful datagrids, treeviews, WYSIWYG editors,etc.) may be damaged by universal AJAXwrappers/containers!
31
![Page 32: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/32.jpg)
32
EXT-JS
http://www.sencha.com/products/js/
Ext JS is a cross-browser JavaScript library forbuilding rich internet applications. Build rich,sustainable web applications faster than ever.It includes:
* High performance, customizable UI widgets * Well designed and extensible Component
model * An intuitive, easy to use API
![Page 33: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/33.jpg)
Google’s Web Toolkit
http://code.google.com/intl/it-IT/webtoolkit/
List of the widgets:http://code.google.com/intl/it-IT/docreader/#p=google-
web-toolkit-doc-1-5&s=google-web-toolkit-doc-1-5&t=DevGuideWidgetGallery
Demo of the widgets:http://gwt.google.com/samples/Showcase/Showcase.html
33
![Page 34: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/34.jpg)
Google’s Web Toolkit
The idea: write java and transform it intoJavascript
Debug in “hosted mode”
If your GWT application compiles and runs inhosted mode as you expect
And GWT compiles your application intoJavaScript output without complaint,
Then your application will work the same way ina web browser as it did in hosted mode.
34
![Page 35: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/35.jpg)
GWT – cross browser
GWT shields you from worrying too much aboutcross-browser incompatibilities.
If you stick to built-in widgets and composites,your applications will work similarly on themost recent versions of Internet Explorer,Firefox, and Safari. (Opera, too, most of thetime.)
35
![Page 36: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/36.jpg)
GWT – tools36
![Page 37: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/37.jpg)
GWT service architecture37
![Page 38: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/38.jpg)
References
About AjaxPapers and architectural descriptionthe first paper in the list is a must!http://www-128.ibm.com/developerworks/java/library/wa-ajaxintro1.htmlhttp://www-128.ibm.com/developerworks/java/library/j-ajax2/index.htmlhttp://www-128.ibm.com/developerworks/java/library/j-ajax3/index.htmlhttp://www-128.ibm.com/developerworks/java/library/j-ajax1/index.html
About GWThttp://code.google.com/intl/it-
IT/webtoolkit/overview.html
38
![Page 39: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/39.jpg)
More References
Plenty of tutorials on Ajaxhttp://www.maxkiesler.com/index.php/weblog/co
mments/60_more_helpful_ajax_tutorials/
39
![Page 40: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/40.jpg)
40
New development (may 07)
Java FX Script
Does JavaFX Spell The End Of AJAX?
![Page 41: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/41.jpg)
41
…and all the Web 2.0…
See e.g.
http://www.seomoz.org/web2.0
![Page 42: WEB 2 - UniTrentolatemar.science.unitn.it/segue_userFiles/2010Web... · The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ec57037b6670814ed3d738a/html5/thumbnails/42.jpg)
42
… and human computing…
See e.g.
http://video.google.co.uk/videoplay?docid=-8246463980976635143