Dynamic UI Functionality for Web Applications

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 proprietaryweb browserplug-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]

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 proprietaryweb browserplug-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]

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

14. Browser Support Code

15. Browser Support Code

16. Client Side JavaScript Libraries

17. 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] • 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

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

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 API • Commercial and Open Source licenses available • 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

33. Client Side JavaSript Libraries

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