1. Dynamic UI Functionality for Web Applications Client Side JavaScript Libraries and AJAX ITS Web Services Fred Olivieri May 7, 2009

2. 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].web applicationsdesktop applicationsproprietaryweb browserplug-inssandboxesvirtual machines [1]frameworksAdobe FlexAIRJavaJavaFX [2]uniPaaS [3]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].Macromedia [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].web standardsAjaxHTML 5web browsersdesktop-like widget setscitation neededHTML 5 [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]Mozilla PrismFluid [1] [7]

3. 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].web applicationsdesktop applicationsproprietaryweb browserplug-inssandboxesvirtual machines [1]frameworksAdobe FlexAIRJavaJavaFX [2]uniPaaS [3]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].Macromedia [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].web standardsAjaxHTML 5web browsersdesktop-like widget setscitation neededHTML 5 [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]Mozilla PrismFluid [1] [7]

4. Agenda  Todays Focus: Achieving RIA-like behavior using JavaScript  AJAX Overview  Client Side JavaScript Libraries What are they? Why do we need them?

6. 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.

7. 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

8. 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

9. Classic Web Applications Model vs. AJAX

10. Synchronous and Asynchronous Approaches

11. 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

12. 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.

13. Browser Support Code

16. Client Side JavaScript Libraries

18. 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

19. 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

20. 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

21. 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

22. 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] DOMSizzle [3] DOM traversal and modification, (including support for CSS 1-3 and basic XPath)XPath Events, Effects and animations, AjaxAjax Utilities - such as browser version and the each function. JavaScript Plugins

23. 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/

25. 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

26. … 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.

27. Client Side JavaSript Libraries

28.  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.weighs just 11KB on the wire 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.custom event systemobject management methodswidget-creation tools 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.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.)the Dependency Configurator 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.BSD 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.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.

29. Client Side JavaSript Libraries  Ext JS

30. Client Side JavaSript Libraries  Ext JS High performance, customizable UI widgets Well designed and extensible Component model An intuitive, easy to use APIAPI Commercial and Open Source licenses available CommercialOpen Source http://extjs.com/

31. 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

32. Others  http://ajaxpatterns.org/Javascript_Multipurpose_Frameworks http://ajaxpatterns.org/Javascript_Multipurpose_Frameworks 1 AJAX WebShop(from 1999) 2 ActiveWidgets (from 2003) 3 AjaxFace (from 2005) 4 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 Gapjumper (from 2008) 17 gara (from 2007) 18 Gravey (aka Gravy) (from 2005) 19 JackBe (From 2002) 20 JavaScript MVC 21 Javeline PlatForm 22 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)

33. Client Side JavaSript Libraries

34. Hybrid JavaScript / Java: Google Web Toolkit (GWT)

35. 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. 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. 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. 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. 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.Widgets  Like traditional UI frameworks, Widgets are combined in Panels that determine the layout of the widgets contained within them. Panels  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.hierarchical treestab bars menu barsmodal dialog boxes  GWT also has built-in support for remote procedure calls and other more sophisticated web application features.