Transcript PPT - Webmasters

Dynamic UI Functionality
for Web Applications
Client Side JavaScript Libraries and
AJAX
ITS Web Services
Fred Olivieri
May 7, 2009
RIAs

From Wikipedia…

Rich Internet applications (RIAs) are web applications that have some of the
characteristics of desktop applications, typically delivered by way of a proprietary web
browser plug-ins or independently via sandboxes or virtual machines[1]. Examples of
RIA frameworks include Adobe Flex/AIR, Java/JavaFX[2], uniPaaS[3] and Microsoft
Silverlight[4].
The term was introduced in the 1990s by vendors like Macromedia who were addressing
limitations at the time in the "richness of the application interfaces, media and content,
and the overall sophistication of the solutions" by introducing proprietary extensions[5].
As web standards (such as Ajax and HTML 5) have developed and web browsers'
compliance has improved there is less need for such extensions, and Javascript
compilers with their associated desktop-like widget sets reduce the need for browser
extensions even further.[citation needed] HTML 5 delivers a full-fledged application platform;
"a level playing field where video, sound, images, animations, and full interactivity with
your computer are all standardized"[6].
It is now possible to build RIA-like Web applications that run in all modern browsers
without the need of special run-times or plug-ins. This means that if one could run a
modern Ajax-based Web application outside of a web browser (e.g. using Mozilla Prism
or Fluid) it would essentially be an RIA[1], though there is some contention as to
whether this is actually the case.[7]



RIAs

From Wikipedia…

Rich Internet applications (RIAs) are web applications that have some of the
characteristics of desktop applications, typically delivered by way of a proprietary web
browser plug-ins or independently via sandboxes or virtual machines[1]. Examples of
RIA frameworks include Adobe Flex/AIR, Java/JavaFX[2], uniPaaS[3] and Microsoft
Silverlight[4].
The term was introduced in the 1990s by vendors like Macromedia who were addressing
limitations at the time in the "richness of the application interfaces, media and content,
and the overall sophistication of the solutions" by introducing proprietary extensions[5].
As web standards (such as Ajax and HTML 5) have developed and web
browsers' compliance has improved there is less need for such extensions, and
Javascript compilers with their associated desktop-like widget sets reduce the
need for browser extensions even further.[citation needed] HTML 5 delivers a fullfledged application platform; "a level playing field where video, sound, images,
animations, and full interactivity with your computer are all standardized"[6].
It is now possible to build RIA-like Web applications that run in all modern
browsers without the need of special run-times or plug-ins. This means that if
one could run a modern Ajax-based Web application outside of a web browser (e.g.
using Mozilla Prism or Fluid) it would essentially be an RIA[1], though there is some
contention as to whether this is actually the case.[7]



Agenda
 Todays Focus:
• Achieving RIA-like behavior using
JavaScript
 AJAX
• Overview
 Client Side JavaScript Libraries
• What are they?
• Why do we need them?
What is AJAX
 AJAX = Asynchronous JavaScript + XML
 AJAX isn’t a technology, It’s really several




technologies, each flourishing in its own right,
coming together in powerful new ways.
It include JavaScript, DHTML and a utility object
called XmlHttpRequest (or XMLHTTP).
These technologies help us in getting the
response from server without disturbing the user.
AJAX allows server-side processing to occur
without requiring postback.
Desktop experience on web.
Why AJAX?
 HTML and HTTP are weak
• Non-interactive
• Coarse-grained updates
 Everyone wants to use a browser
• Not a custom application
 "Real" browser-based active content
• Failed: Java Applets
 Can't interact with the HTML
• Serious alternative: Flash (and Flex)
 Not yet universally supported; limited power
• New and unproven
 Microsoft Silverlight
 JavaFX
 Adobe Apollo
Background
 So many round trips to the server, worst user




experience using applications on the web.
Desktop applications provide more rich user
experience.
Problem arises due to the synchronous nature of
web applications, user get frustrated with lot of
clicks.
JavaScript RPC technique is available since 1996,
avoid reloading and user activity when needs
server trip.
Hidden Frame JavaScript RPC.
• Supported by all the web browsers.
• Difficult to implement and Maintain.
• No Specific XML Support
Classic Web Applications
Model vs. AJAX
Synchronous and Asynchronous
Approaches
The Basic Ajax Process
 JavaScript
• Define an object for sending HTTP requests
• Initiate request
 Get request object
 Designate a response handler function
–
Supply as onreadystatechange attribute of request
 Initiate a GET or POST request
 Send data
• Handle response
 Wait for readyState of 4 and HTTP status of 200
 Extract return text with responseText or responseXML
 Do something with result
 HTML
• Loads JavaScript
• Designates control that initiates request
• Gives ids to input elements that will be read by script
Browsers Support for AJAX
 Mozilla, Netscape, and Safari
supports the XmlHTTPRequest
object.
 Opera has some issues with
XmlHTTPRequest object.
 Internet Explorer supports XMLHTTP
object for AJAX.
Browser Support Code
Browser Support Code
Browser Support Code
Client Side
JavaScript Libraries
Client Side JavaScript Libraries
Characteristics of JS Libraries
 Server side technology agnostic
• The server side technology can be Java
EE, .Net, PHP, Ruby on Rails, etc.
 You can use them in combination in
a single app
• You might want to use widgets and
JavaScript utilities from multiple sources
Technical Reasons for using JS
Libraries
 Handles remote asynch. communication


(remoting)
• Hides low-level XMLHttpRequest operation
Handles browser incompatibilities
• No need to clutter your code with if/else's
Handles graceful degradation
• Uses IFrame if the browser does not support
XMLHttpRequest
 Provides page navigation hooks over Ajax
• Back and forward buttons
• Bookmarking
Technical Reasons for using JS
Libraries
 Provides advanced UI features
• Animation
• Drag and drop
• Fade out and Fade in
 Generally encourages OO programming
style
• Helps you write better JavaScript code
Business Reasons for using JS
Libraries
 Proven in the market
• Generally higher quality than your own
 Established developer/user communities
• Community keeps improving/adding features
• Easy to get help from community forums
 Easy to use
• It is just a matter of having them in the root
directory of your Web application or providing
URL location
 Tool support
• IDE's will support them in time
Client Side JavaSript Libraries
 DHTML Goodies
• Various DHTML and AJAX scripts
• http://www.dhtmlgoodies.com/
 jQuery
• DOM element selections using the cross-browser open
•
•
•
•
source selector engine Sizzle, a spin-off out of jQuery
project[3]
DOM traversal and modification, (including support for
CSS 1-3 and basic XPath)
Events, Effects and animations, Ajax
Utilities - such as browser version and the each function.
JavaScript Plugins
Client Side JavaSript Libraries
 Prototype
• Used by other toolkit libaries
• http://www.prototypejs.org/
 Script.aculo.us
• Built on Prototype
• Nice set of visual effects and controls
• http://script.aculo.us/
 Rico
• Built on Prototype
• Rich AJAX components and effects
• http://openrico.org/
Client Side JavaSript Libraries
 DOJO Toolkit
• Most prominent and comprehensive
• Major industry support (Sun, IBM)
• http://dojotoolkit.com/
• Covers the complete spectrum of Ajax applications.
• Provides a well thought out foundation to build on
 Packaging
 Extensibility
 Unit testing framework
• Has enterprise backing
 Large companies provide developers to the dojo foundation?
• Lots of widgets
… continued
 DOJO Toolkit (continued)
• Internationalization and accessibility are core to
the dijit library not an after thought.
• Strong core team
• Commercial Friendly License.
 Commercial products like Nexaweb built on top of dojo.
Client Side JavaSript Libraries
Client Side JavaSript Libraries
 YUI
•
•
•
•
•
•
•
Light and flexible: YUI's light, powerful core weighs just 11KB on the wire and offers language
utilities, DOM normalizations, and a complete event/custom event suite. For 17.4KB, you can
include the Core plus the YUI Loader, which can dynamically load the requirements for any YUIbased module using a single HTTP request for JS and one more for CSS.
Scalability: From its custom event system to its object management methods to its widget-creation
tools, YUI scales to meet the differing challenges of each project.
A la carte design: YUI's modular approach means that you can include on the page just the pieces
you need. Pages that make light use of scripting may require only the YUI Core. But no matter how
many YUI components you bring into a page, you're always loading just the pieces you need.
Industrial-strength hosting: YUI files are hosted freely for your use by Yahoo (and by Google).
Yahoo's CDN — the global network of edge-hosting servers that supports Yahoo's own websites —
provides fantastic performance and combo-handling, allowing you to significantly reduce the
number of HTTP requests required to load YUI components. If you need SSL support, Google's CDN
offers similar performance and supports SSL. (You can use the Dependency Configurator to get the
necessary URLs for drawing YUI from Yahoo or Google servers.)
Complete stack, consistent licensing: YUI is the only major open-source library to offer a
complete set of utilities and widgets, all crafted, tested, documented and exemplified to the same
high standard and all licensed under the same terms (BSD). No other library supports the full range
of A-Grade browsers across a full set of utilities and widgets, all under the same licensing terms.
Commitment to accessibility: YUI's developers care about the experience of all users, and we've
worked hard to make our work support the emerging ARIA standards.
Documentation, documentation, documentation. Whether you're looking at the nextgeneration YUI 3.x release in preview mode, the Carousel component in beta, or a GA component
like DataTable, you'll find that YUI engineers have worked hard to provide great user's guides, cheat
sheets, and examples.
Client Side JavaSript Libraries
 Ext JS
Client Side JavaSript Libraries
 Ext JS
• High performance, customizable UI
widgets
• Well designed and extensible
Component model
• An intuitive, easy to use API
• Commercial and Open Source licenses
available
• http://extjs.com/
Samples
 jQuery
• http://www.webdesignerwall.com/demo/jquery/
 dojo
• http://demos.dojotoolkit.org/demos/
 YUI
• http://developer.yahoo.com/yui/examples/
 ExtJS
• http://extjs.com/deploy/dev/examples/samples.html
Others
 http://ajaxpatterns.org/Javascript_Multipurpose_Frameworks
1
2
3
4
AJAX WebShop(from 1999)
ActiveWidgets (from 2003)
AjaxFace (from 2005)
Ample SDK
4.1 Framework Compounds
4.2 Online Demos
4.3 Licensing
5 Archetype
6 BACKBASE - Enterprise Ajax Framework (from 2003)
6.1 Cross-Browser Core Engine
6.2 Comprehensive Widget Library : 250+ widgets &
functions
6.3 Cross Browser Ajax Debugger
6.4 Visual Ajax Builder
6.5 Server-side Integration Framework
6.6 Pre-build Rich Applications
7 Bindows Enterprise Framework 7.1 Charting & Vector Graphics
7.2 Complete Animation Library
7.3 Section-508 Accessibility
7.4 Internationalization & Localization
7.5 BindowsFaces
7.6 Visual Layout Development Tool
7.7 Versions
7.8 Adds-on Tools
7.9 External links
8 Cerny.js (from 2006)
9 crossvision Application Composer (from July 2006)
10 crossvision Applic
11 DOJO (Under development; from September, 2004)
12 Nitobi (Formerly eBusiness Applications - EBA) Ajax
Components. (Since 2002)
13 Engine for Web Applications (Since 2002)
14 Ext JS - JavaScript Library (from 2006)
15 Freja (from 2006)
ation Designer (from July 2006)
16
17
18
19
20
21
22
Gapjumper (from 2008)
gara (from 2007)
Gravey (aka Gravy) (from 2005)
JackBe (From 2002)
JavaScript MVC
Javeline PlatForm
JsLINB - Javascript framework of LINB (since 2006)
22.1 Features
22.2 Online Demos
23 JsRia - Javascript Rich Internet Application (since 2005)
24 Macao - The Web Animation Framework
25 MochiKit (from 2005)
26 Mootools
27 Open Rico (Under development; from May, 2005;
28 OpenLink AJAX Toolkit, a/k/a OAT (since 2006)
29 Plex Toolkit (Open Source RIA Framework and GUI Toolkit)
30 Prototype (From 2005)
31 jQuery (From 2005)
32 qooxdoo (LGPL/EPL open-source, since 2005)
32.1 Framework
32.2 GUI Toolkit
32.3 AJAX
32.4 External links
33 Script.aculo.us (from 2005)
34 SmartClient (enterprise AJAX GUI system since 2000)
35 Subsys_JsHttpRequest
36 ThyAPI (Under development; Since end of 2004)
37 TIBCO General Interface (Open Source AJAX RIA Framework with commerical
backing from TIBCO (Nasdaq: TIBX)) Update Jan 2008
38 Interactive Website Framework (from May 2005)
39 TIBET (Early Access Releases available; from July, 1999)
40 twoBirds (April 2007)
41 UI4W (from 2006)
42 Yahoo! User Interface Library (YUI)
43 WinLIKE - a real Window Manager for the Web
44 Zimbra AjaxTK (Commercial-OpenSource RIA Toolkit)
45 DHTMLX Ajax Toolkit (Since 2005)
Client Side JavaSript Libraries
Hybrid
JavaScript / Java:
Google Web Toolkit
(GWT)
Google Web Toolkit
What is GWT?
•Google Web Toolkit (GWT) is an open source Java
software development framework that makes writing AJAX
applications.
•The Google Web Toolkit (GWT) lets you create Ajax
applications by writing Java code and generating
JavaScript automatically.
•GWT takes Java code written against a special API
and converts it into browser-runnable Ajax code.
35
Google Web Toolkit Features
•Open Source
•Readymade, Dynamic, reusable UI components
•RPC
•Browser history management, debugging
•Browser compatible
•JUnit integration
•Internationalization
•Interoperability
•Fine-grained control
36
GWT development cycle:
 Write and debug an application in the Java
language using as many GWT libraries using any
Java IDE.
 GWT's Java-to-JavaScript compiler to distill our
application into a set of JavaScript and HTML
files.
 We can serve the files with any web server Like
Tomcat, Web Logic, etc)
37
Why Translate Java Code to
JavaScript?
Java technologies offer a productive development
platform, and with GWT, they can instantly become
the basis of your AJAX
•Java-based OO designs
•Common JavaScript errors (typos, type mismatches) are
easily caught at compile time rather than by users at
runtime.
•Static type checking in the Java language boosts
productivity while reducing errors.
38
Using Google Web
Toolkit
 You can use GWT's set of UI components (called Widgets)
to construct the UI elements that make up your AJAX
application.
 Like traditional UI frameworks, Widgets are combined in
Panels that determine the layout of the widgets contained
within them.
 GWT supports a variety of built-in Widgets that are useful
for AJAX applications, including hierarchical trees, tab bars,
menu bars, and modal dialog boxes.
 GWT also has built-in support for remote procedure calls
and other more sophisticated web application features.
39