Dynamic UI Functionality for Web ApplicationsClient Side JavaScript Libraries and AJAX

ITS Web ServicesFred 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 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]

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 YUI-based 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 next-generation 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_Frameworks1 AJAX WebShop(from 1999)2 ActiveWidgets (from 2003)3 AjaxFace (from 2005)4 Ample SDK

4.1 Framework Compounds4.2 Online Demos4.3 Licensing

5 Archetype6 BACKBASE - Enterprise Ajax Framework (from 2003)

6.1 Cross-Browser Core Engine6.2 Comprehensive Widget Library : 250+ widgets & functions6.3 Cross Browser Ajax Debugger6.4 Visual Ajax Builder6.5 Server-side Integration Framework6.6 Pre-build Rich Applications

7 Bindows Enterprise Framework -7.1 Charting & Vector Graphics7.2 Complete Animation Library7.3 Section-508 Accessibility7.4 Internationalization & Localization7.5 BindowsFaces7.6 Visual Layout Development Tool7.7 Versions7.8 Adds-on Tools7.9 External links

8 Cerny.js (from 2006)9 crossvision Application Composer (from July 2006)10 crossvision Applic11 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 Gapjumper (from 2008)17 gara (from 2007)18 Gravey (aka Gravy) (from 2005)19 JackBe (From 2002)20 JavaScript MVC21 Javeline PlatForm22 JsLINB - Javascript framework of LINB (since 2006)

22.1 Features22.2 Online Demos

23 JsRia - Javascript Rich Internet Application (since 2005)24 Macao - The Web Animation Framework 25 MochiKit (from 2005)26 Mootools27 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 Framework32.2 GUI Toolkit32.3 AJAX32.4 External links

33 Script.aculo.us (from 2005)34 SmartClient (enterprise AJAX GUI system since 2000)35 Subsys_JsHttpRequest36 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 200838 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 Web44 Zimbra AjaxTK (Commercial-OpenSource RIA Toolkit)45 DHTMLX Ajax Toolkit (Since 2005)

Client Side JavaSript Libraries

Hybrid JavaScript / Java:

Google Web Toolkit (GWT)

35

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.

36

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

37

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)

38

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.

39

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.