Web 2.0 Presentation Components

Introduction

By Kris Gemborys

Over the last two decades, the Internet has evolved and as a result, consumer and business expectations have changed. Nowadays, consumers seek solutions with superior self-service capabilities that address their needs timely and efficiently. The arrival of smart phones has enabled users to conduct business from anywhere. The social networking revolution has reshaped how we interact and collaborate. A continuously growing number of users accessing Internet-enabled applications on an increasing number of devices has moved scalability and portability requirements to new levels.

Businesses’ perspectives on information technology have also transformed. Businesses are not as much interested in monolithic products as they are in a collection of services addressing their specific needs. The arrival of cloud computing has provided businesses with new alternatives for assembling and delivering these services. Support for standards, integration choices, openness, and service delivery options have become very important characteristics of software applications.

The information technology industry recognized the above trends several years ago. Solutions that provide such capabilities are being referred to as Web 2.0 applications. The commonly recognized Web 2.0 design patterns are as follows:

• Solution is a collection of services and not a pre-packaged product

• Presentation content is aggregated at runtime

• Users are active contributors with the ability to control content

• Solution is self-service centric

• User interface is lightweight

• Services are accessible from a range of devices

• Presentation supports cross-browser compatibility

• Ajax is used to transfer data instead of complete page reloads

Content Delivery Platforms for Presentation Components

The desired Web 2.0 architecture should leverage the same delivery infrastructure for both mobile and desktop applications as well as remain device-portable as much as possible. The architecture should also enable customization and support for componentization.

J2EE portals provide an excellent platform for implementing Web 2.0 presentation artifacts thanks to support for assembling solutions from discrete components (JSR 168/286 portlets) and look-and-feel customization (skins). The portal security provides granular access control to resources and allows both portal administrators and users to fully personalize content according to their needs and granted permissions. Administrators and users are in control of page layouts, can remove or add new portlets, and adjust preferences. Administrators and users have complete freedom to assemble content using third party portlets, as well as internally developed portlets.

Commercial Delivery Platform

The IBM WebShere portal is a rich-featured platform for third party content aggregation. Major enterprise vendors, such as SAP and Oracle, offer portlets that users can deploy as part of the comprehensive solutions. IBM WebSphere Portal comes with over 50 portlets that provide features, such as RSS/ATOM feed readers, a calendar, and IBM Sametime client. In addition, the IBM portal allows for aggregating iWidgets and gadgets imported as portlets. Portal users can also access IBM WebSphere Mashup Center pages from the same browser. The themes and privileges can be customized and shared across mashup and portal pages. Page ownership can be assigned to a group of users allowing for collaborative aggregation of content. Pages can be marked as private so customizations remain user specific. The IBM Mashup Center supports OpenAjax Hub interface that can host content distributed as Google gadgets. Portal users can incorporate Google Maps and location services as part of their desktop and mobile solutions.

The IBM Mobile Portal Accelerator is a product for developing and running mobile portlets. The product includes an aggregation component that abstracts rendering implementation based on the repository containing the inventory of all mobile devices available on the market. The abstraction layer helps achieve the goal of consistent look and feel. The advances in JavaScript language and, particularly, the introduction of HTML 5 make it possible to access hardware resources without the need for native implementations. For devices that offer sufficient processing power, such as iPads, tablets, netbooks, and personal computers, usability and adoption of Ajax became the highest priority. The Open Source libraries, such as jQuery and Dojo, include support for complex widgets (i.e. grids, tab panels, modal dialogs) and allow for drag-and- drop navigation. Cross-browser support is another important feature of these JavaScript libraries.

IBM WebSphere portal, with the ability for hosting portlets, iWidgets, and gadgets, offers a very comprehensive platform for delivering self-service solutions. Users are becoming de facto co-developers of the solution which is one a fundamental principles of Web 2.0 applications.

Open Source Delivery Platform

One of the best platforms for deploying cost-effective portlet solutions are Liferay and JBoss portals. Both portals are open source and are offered at no cost under business-friendly LGPL license. The JBoss portal is well-integrated with Richfaces while Liferay portal supports integration with ICEfaces. Richfaces and ICEfaces are two competing implementations of JSF spec with proprietary AJAX extensions.

Apache Shinding is an open source container compatible with OpenSocial API and OpenAjax specification capable of hosting Google gadgets.

Cloud Delivery Platforms

There is a significant number of cloud delivery platforms and this number will continue to grow until cloud market starts to mature. Amazon has one of the most comprehensive cloud offerings for deploying existing solutions. Google App Engine (GAE) is the best cloud platform for hosting applications developed using Google Web Toolkit or python. Google gadgets deployed to GAE can be then aggregated using an open source Apache Shinding container, a commercial IBM Mashup Center container, or iGoogle cloud container. Google App Engine platform supports developing and deploying cloud J2EE and python applications.

Application Marketplaces

As discussed earlier, there is a major shift in the information industry from selling software as shrink-wrapped products to delivering solutions as a set of services (SaaS). As a result of this shift, a new software delivery channel, Application Marketplace, has been established. Application marketplaces complement very well SaaS (Software as a service) and cloud computing principles. Small and medium size software companies can leverage application marketplaces

As of the time of this writing, there are two primary application marketplaces: Apple App Store and Google Apps Marketplace Both marketplaces target primarily smart phones. However, the current trend suggests that software distributed via market places will target higher-end devices such as tablets, netbooks, notebooks, and desktops. Google has already created a Chrome Web Store which allows developers to distribute and sell desktop web applications.

Mobile Content

Increasing capabilities of mobile devices, especially higher-end SmartPhones, iPads, and netbooks, resulted in the mobile channel becoming a preferred choice for conducting business especially by technology savvy users. Since cell phone users can readily access their devices anywhere they go, businesses gain access to their customers almost instantaneously regardless of where their customers are or what they are doing. A growing number of affluent customers expect businesses to provide self-service features accessible via their mobile devices. Fragmentation of the mobile market and significant differences in features and capabilities of mobile devices present challenges in delivering content in a consistent and cost-effective manner.

Some examples of physical device differences are:

• Screen sizes

• Orientation landscape (high-end SmartPhones, such iPhone and Android, support accelerometer to detect the change in orientation)

• Protocol support XHTML/WML

• JavaScrtipt support (or lack of)

• Screen resolution and color support

• Keyboard capabilities

• Support for camera

• CPU and memory capacity

As a result of the above differences, developers are presented with challenges to design mobile solutions with a consistent look and feel across all devices which also take advantage of unique capabilities available in the high-end devices. The IBM Mobile Portal Accelerator addresses this issue elegantly by separating rendering logic from business logic. The product follows a “write once, render many” approach. The UI components are packaged and delivered as portlets so developers and users can leverage the administrative capabilities of the IBM WebSphere portal to aggregate and manage content.

Mobile Portal Accelerator allows administrators to configure mobile pages using the WebSphere Portal administration interface. Portal administrators and privileged users can define how mobile users access and navigate portal services from mobile devices. The mobile pages navigation tree is stored in the navigation model of WebSphere and can be customized based on user privileges. At runtime, the XDIME/XDIME 2 aggregator renders content based on the policies and specific hardware characteristics of a given device.

The IBM Mobile Portal Accelerator multi-channel server content-adaptation is a key component of this delivery platform. The content-adaptation renders personalized content across a broad range of devices without changing business logic. The Mobile Image Conversion Server (ICS) transforms images so they can be properly rendered on each device.

The IBM Mobile Portal Accelerator Device Update subscription service ensures that the device repository remains current and new devices are added as they become available.

The mobile content is developed as XDIME-enabled portlets. The portlets are then deployed to portal pages and the application flow is defined using administrative capabilities of the portal. An additional benefit of this approach is access to the IBM mobile portlets that provide support for Web 2.0 technologies, such as RSS and ATOM feeds.

To help developers create XDIME/XDIME 2-enabled mobile portlets, the Mobile Portal Accelerator software includes the Mobile Portal Toolkit, an Eclipse plug-in. The toolkit provides wizards for creating the mobile XDIME portlets which are compliant with JSR 168/286 specifications.

One of the disadvantages of the purely browser-based solution, such as the IBM Mobile Portal Accelerator, is limited access to hardware and support for native widgets. Adoption of HTML 5 standards by leading mobile vendors to access hardware directly from the browser provides new avenues for implementing features that could have been previously only natively implemented.

Rich UI Ajax Content

IBM delivery platform is very comprehensive with support for J2EE applications, JSR186/286 portlets, and OpenAjax Hub compliant components. IBM server products are well integrated which allows developers and users to assemble componentized solutions using a variety of technologies (i.e. JSF portlets, Ajax-enabled portlets, iWidgets, and gadgets). With so many choices, a decision to select the most suitable approach can become overwhelming and only a systematic evaluation process will yield desirable results.

Ajax Web 2.0 Frameworks

Several years ago, Ajax became the standard for developing Web 2.0 applications. However, writing complex Ajax widgets with cross-browser support has not been a trivial task. This complexity created a need for Ajax frameworks and libraries that abstract intricate details of Ajax and CSS implementations. Ajax frameworks consist of prepackaged Ajax widgets and other utility APIs useful for browser state manipulations. Developers using these frameworks can focus on the interface usability instead of dealing with style sheets and cross-browser issues.

All modern Web 2.0 Ajax libraries and frameworks support storage and manipulation of application data entirely within a browser. Separation of data from rendering and layout definitions is a key differentiation factor between traditional Web 1.0 and Ajax Web 2.0 technologies. The ability to manipulate user data entirely on a browser eliminates the need for screen refreshes. Traditionally developed applications using JSF or similar technologies require application servers to process each HTTP request and render a new HTTP response passed as HTML. The generated HTTP response is then transmitted to the browser which refreshes a particular iFrame or entire page. The Ajax content rendering consists of two steps:

• Initial page construction from a combination of Ajax widgets and HTML controls

• Data refreshes implemented as RESTful services that transmit JSON objects

With Ajax Web 2.0 becoming part of mainstream development, technology leaders continue to introduce new frameworks and libraries with the objective of streamlining development of Web 2.0 solutions. The frameworks could be categorized as follows:

• Downloadable rich UI browser plugins (i.e. Microsoft Silverlight, Adobe Flash and Flex)

• JavaScript frameworks and libraries (i.e. Dojo, jQuery, Prototype, Yahoo UI)

• Traditional Application Server Frameworks with added Ajax support (i.e. JSF with Ajax – RichFaces, ICEFaces)

• Others (i.e. Google Web Toolkit, Groovy & Grails)

Framework openness and cross-browser support should be considered top priorities when choosing an Ajax framework. Ajax frameworks such as Silverlight and Flash require a vendor (i.e. Adobe or Microsoft) to develop a plugin that supports a particular device and browser. If there is no vendor support for a device, a solution will not work on this device. A good example is iPad for which there is no current Adobe Flash or Microsoft Silverlight support. On other hand, applications developed with JavaScript libraries, GWT, or JSF with Ajax will work just fine assuming that Ajax widgets are rendered correctly. Even if widgets are not properly rendered, developers still have the option of fixing a problem as long as they have access to sources. The mainstream JavaScript libraries are distributed both in minified and source forms so developers can readily debug and fix library source code if needed.

Cross-browser support is only one aspect of portability; another one is support for application containers. The portability across a wide range of containers becomes a major issue for frameworks implemented as Ajax JSF extensions. Such frameworks rely on containers to properly process both Ajax and traditional requests. Because JSF Ajax extensions are mostly proprietary, developers face portability issues when implementing complex Ajax interactions on containers that are not primarily targeted by a provider of a particular JSF product. For example, RichFaces works fine on all J2EE containers and JBoss portal, but does not work properly on the IBM WebSphere portal. Each portal vendor provides a proprietary version of the JSF Portal Bridge which complicates matters since every JSF product works properly with only a specific bridge (i.e. RichFaces require JBoss Portal Bridge, while IBM WebSphere Portal requires the IBM version of the portal bridge). Unless JSF product and portal vendors collaborate to establish and implement common standards for JSF Ajax extensions, the feasibility of implementing portable Web 2.0 Ajax solutions using JSF Ajax extensions will remain questionable.

Figure. Web 2.0 Ajax Technology comparison

Web 2.0 Rich UI Technology	JSF	Dojo	jQuery	GWT
Components Type	JSR 168/286 portlets	iWidgets Portlet widgets JSR 168/286 portlets OpenAjax Hub	Portlet Widgets JSR 168/286 portlets OpenAjax Hub	gadgets OpenAjax Hub
Technology Type	J2EE standard Requires server state to render responses	Ajax friendly Browser-based	Ajax friendly Browser-based	JAVA to JavaScript compiler
Distribution	Open Source,	Open Source	Open Source	Open Source
Major Supporter	Oracle (previously SUN)	IBM	Microsoft	Google
Tooling	- Eclispe WTP (Free) - Tooling also available from various J2EE container and Portal vendors: IBM, Oracle, RedHat	IBM Portlet Factory IBM Lotus Widget Factory RAD 7.5 with Portlet Toolkit	Limited tooling for developing J2EE/Java compatible components	Google Web Toolkit (Free)
Ajax Support	- JSF 2.0 specification is not fully adopted by all J2EE vendors - Ajax extensions are mostly proprietary (RichFaces, ICEfaces) - There are state management issues when using standard JSF Portal Bridge with proprietary Ajax extensions	- Modular Core - Comprehensive library of Ajax widgets packaged as part of Dojo distribution	- Small Core - Comprehensive library of Ajax widgets distributed as third party plugins - Good integration with HTML controls and layout editors	Widgets implemented as Java classes and converted to JavaScript by the Toolkit compiler
Services	Traditional HTTP	REStful/JSON	RESTful/JSON or traditional HTTP	RESTful/JSON or RPC
Cost	Framework is free, Additional fees for vendor services and tooling licensing can be applicable	Framework is free Additional licensing costs for IBM Tooling	Framework is free Limited J2EE Tooling	Framework and Tooling is free SmartGWT is a well defined set of third party GWT components derived from the SmartClient JavaScript libraries.

After comparing various approaches, Dojo and jQuery Ajax libraries seem to be the most promising technologies for developers considering implementing the Web 2.0 presentation components. JavaScript libraries are easy to use and provide necessary flexibility with selecting development, integration, and runtime environments. Both Dojo and jQuery deliver a very similar set of capabilities. The implementation effort, support for Ajax features, look and fill, and performance are comparable. Two key differences between these two frameworks were support for J2EE tooling and trends in community interest.

IBM provides very comprehensive tooling for developing solutions using Dojo widgets. One drawback of using IBM tooling is a need to design UI pages exclusively using Dojo widgets.

Figure. IBM Tooling for Developing Web 2.0 Rich UI Components

Tooling	IBM Portlet Factory	IBM Lotus Widget Factory	RAD 7 Portal Toolkit
Components Type	JSR 168/286 portlets	iWdgets	JSR 168/286 portlets and iWidgets
Language	IBM Eclipse WYSIWYG	IBM Eclipse WYSIWYG	JSP, JSF, Dojo
Technology Type	Collection of builders abstracting JSP and Dojo code generation	Collection of builders abstracting Dojo libraries	Wizards for creating portlets and iWidgets Environment for unit testing iWidgets and Portlets
Ajax Support	Dojo builders	Dojo builders	Dojo Wizards Any Ajax library
Container	IBM Portlet Server	IBM Mashup Center	IBM Portlet Server IBM Mashup Center
Usability	- Appropriate for developers accustom to WYSIWYG tooling - Significant learning curve for J2EE and Ajax developers	- Appropriate for developers accustom to WYSIWYG tooling - Significant learning curve for J2EE and Ajax developers	Moderate learning for developers familiar with J2EE and Ajax technologies
Interfaces	SOAP and RESTful builders	RESTful builders	SOAP and RESTful builders Support for JAX-WS and JAX-RS
Openness	Targets IBM WebSphere Portal	Targets IBM Mashup Center	Wizards generate code for IBM WebSphere Portal and Mashup Center
Other	Prepackaged builders supporting integration with Enterprise solutions such as IBM Lotus Domino, SAP, Siebel, PeopleSoft
Costs	Tooling license	Tooling license	RAD 7.5 license Tooling available as optional download

Community interest in a particular framework is also an important factor for solution vendors. According to Google Trends, interest in the jQuery framework increased dramatically over the last few years. Current trends may indicate wider community adoption of jQuery framework in the coming years.

Figure. Google Trends Comparing Worldwide Traffic for jQery, Dojo, and Yahoo UI Frameworks.

Performance

Framework performance is another important factor. As depicted below, the jQuery library performance noticeably improved in recent releases. The published performance results in February 2010 indicate that Dojo and jQuery are currently the best performing JavaScript libraries.

Figure. JavaScript Frameworks Performance Comparison.

Benefits of RESTful Services

Ajax Web 2.0 frameworks not only offer appealing widgets, improve usability and productivity, but also provide a foundation for building extremely scalable solutions that can support thousands, or even millions, of concurrent users. Google pioneered the adoption of Ajax technologies via Google Maps, Google Docs, and Gmail. A closer look at Web 2.0 scalable solutions, such as Gmail.com, Mint.com, and Flicker.com, reveals one important fact: all these applications store data within the browser and use RESTful calls to exchange user data displayed on a current page. Solutions that rely predominantly on RESTful services to exchange data can scale extremely well because there is no need to account for server state when rendering browser content. Requests can be processed by any server with no need for implementing complex fail-over strategies.

Services reusability is another benefit. Since the RESTful services exclusively pass data without formatting or layout details, the same services can be reused by a large pool of diverse devices. A SmartPhone rendering implementation can call the same RESTful service as a desktop application and extract only the applicable subset of returned JSON data. Other important benefits include simplified performance and load testing.

Mashups

By selecting the IBM delivery platform, developers benefit from IBM Mashup Center support for gadgets and widgets. The platform supports syndicating gadgets and portlets so data passed from portlets can affect the behavior of gadget or widget. For example, a user can select an address displayed by a widget or portlet, and a syndicated gadget will display an exact location using Google Map interface.

Business Components

Cloud Deployment

Implementation and administration of complex distributed solutions are time consuming and require skillful engineers. Administrators of clustered solutions have to administer and monitor a great variety of disperse hardware devices and software components, such as network appliances, load balancers, web servers, application servers, deployment managers, databases, and storage area networks (SAN). Adding a new node to a cluster necessitates provisioning of new hardware, installing software, and configuration changes to load balancer.

One of the goals of cloud computing is to eliminate or streamline administration, monitoring, and deployment tasks. For example, the Amazon cloud leverages virtualization to offer utilities for provisioning new instances in minutes rather than days. Amazon elastic cloud infrastructure supports the commissioning of hundreds or even thousands of virtual servers while elastic load balancing significantly simplifies the configuration and monitoring of these virtual clusters. Amazon cloud customers benefit from using proven infrastructure to deliver their services without the need to administer network infrastructure. As Amazon continues to grow and add new data centers, cloud customers benefit from infrastructure redundancy by spreading virtual instances across these globally dispersed datacenters.