1.
HSTW - 103
Enterprise Web 2.0 Development:
A Case for Productizing UI Using Widgets
A Harbinger Systems White Paper
© 2009, Harbinger Systems, All Rights Reserved

2.
Harbinger Systems
Your partner in technology innovation
About Harbinger Systems: Harbinger Systems (www.harbinger-systems.com) is a
leading provider of software engineering services to some of the world's best product
companies.
This white paper is part of Harbinger’s Web 2.0 practice. Harbinger’s Web 2.0
practice provides software development and testing services for the rich user
interface and collaboration needs of enterprise businesses and social web
communities. Visit our Web 2.0 Practice page to learn more.
Visit our website to download or request our white papers on leading edge
technologies and trends.
Contents
Background 3
Challenges 3
Proposed Approach 3
Benefits 4
CASE STUDY 5
IT Department at a Large Semiconductor Manufacturer 5
Page 2 of 6
© 2009, Harbinger Systems, All Rights Reserved

3.
Background
Web 2.0 is gaining momentum and its bringing a paradigm shift in the way applications are being
engineered and used. There is also a growing interest in tools and technologies surrounding Web 2.0.
Enterprise IT applications developed by various people at different points in time also need to undergo
the Web 2.0 facelift to cater to the needs of the present day knowledge worker.
This white paper describes the challenges in enterprise Web 2.0 development, proposes an approach
and illustrates its benefits with a case study.
Challenges
User Experience - What Web 2.0 features should I build and how do I make them consistent across
several applications?
Developer Productivity – Will it take a long time to build Web 2.0 in a large number of applications?
Application Performance – My application works fine as it is, should I risk slowing it down with all the
bells and whistles?
Proposed Approach
1. Shortlist a select number of tools and technologies to meet your needs. Web 2.0 has a plethora of
tools and technology choices, which makes it a difficult to start with. For example, you can choose to
use Open Source technologies- PHP/Java, RubyOnRails, Dojo/YUI/EXT JS or proprietary solutions
from Adobe- Flex, Flash, AIR or Microsoft- AJAX .NET, Silverlight, WPF. It could also be a
combination of different tools and technologies depending upon the nature of the application.
2. Identify and define recurring patterns of user interactions. (Example: Data grid). For example, a Data
Grid might be a very common control used to display data by variety of applications. Intelligently
using tools like EXT JS, the whole experience of a data grid can be changed without much
programming effort. Similarly, the search control can be standardized across certain kind of
applications and made easy and intuitive by making it AJAX enabled (Google search)
3. Identify and define caching strategies, asynchronous communication options, and personalization
options around interactions/widgets. For example, combination of server-side (application, disk, and
database) and client-side (browser, toolbars) caching during widget/interaction design can go a long
way in improving performance and user experience. Similarly use of asynchronous communication for
fetching large chunks of data, with intermediate updates to the user can also be very valuable and
time-saving. Also, intelligent use of personalization can help application respond to the user
requirements in a more productive fashion.
4. Build widgets by coding generic behaviors against events. An event driven model allows widgets to
respond immediately without user intervention, which is very much the need of the hour.
Page 3 of 6
© 2009, Harbinger Systems, All Rights Reserved

4.
5. Prototype for one or two applications by doing application-specific customizations. It goes without
saying that this is most easy and intuitive roadmap towards Web 2.0. You may throw in a poll to get
some user feedback on new features.
6. Collect Feedback from user community.
7. Release to developers for wider adoption. Though the Web 2.0 world is primarily driven by the needs
of the user, it’s also important to standardize and keep the code easy to maintain and extend. Involve
developers to validate this aspect before applying Web 2.0 more widely.
Benefits
BENEFIT 1: BETTER / CONSISTENCY USER EXPERIENCE AND PERFORMANCE
The transformation of traditional applications by using event-driven and rich widgets will definitely provide
a better user experience to the knowledge worker. The productization of UI will also ensure a higher
degree of consistency across applications. In addition, the caching strategies, asynchronous
communication techniques and intelligent personalization options will provide an improved performance.
BENEFIT 2: SINGLE PLATFORM, BETTER REUSE
Potentially every application within an enterprise requires some Web 2.0 feature to be developed or
integrated with. Also there are certain features that may not be applicable to certain enterprises. For
example, blogging may not be permitted as per the corporate policy. Secondly, many applications require
to share or mash-up content from similar sources. Context and presentation might change from
application to application.
Considering these factors, it is beneficial to create a widget-driven strategy leading towards productization
of UI and therefore applicable to all applications within the context of an enterprise. In the long run, this
will facilitate maximum re-use of features and resources.
BENEFIT 3: CENTRALIZED DEVELOPMENT, EASE OF MAINTENANCE
Productization will also help in centrally controlling the development efforts of the Web 2.0 features
across all applications. It would be easier to create a group that is separate and only focused on Web 2.0
development. In addition to centralized control this is will also facilitate a higher-degree of specialization in
Web 2.0 applications.
Page 4 of 6
© 2009, Harbinger Systems, All Rights Reserved

5.
CASE STUDY
IT Department at a Large Semiconductor Manufacturer
The IT Department at a large semiconductor manufacturer in Silicon Valley needs to support rapidly
growing information needs of its functional and top management, as the company marches along a
scorching growth path. The current information systems do not use a BI platform; however, they draw
upon a large amount of historical and current data to provide interesting information to support decisions,
through custom applications developed in-house. Since these applications have been developed over a
period of time, and using a variety of programming tools and styles, they lack a consistent look, as well as
they fall short of providing easy drilldown capabilities in the user interface.
A genealogy application was selected as being representative of the need for improved Web 2.0 like user
interface for benchmark purposes. As another alternative, a part of worldwide inventory application was
also selected. The selection was deliberate: both applications use the same database to answer queries
like – location, details, availability and tracking of parts used in the chip assembly process.
On careful scrutiny of available tools and technologies, the following were short-listed, based on their
suitability to the applications at hand: J2EE on the server-side, EXT JS and Flash on client-side. Java
was selected as the server side technology to ensure compatibility with existing applications and facilitate
integration with open source reporting add-ons like JasperReports and JPivot. EXT JS was chosen as the
client side technology considering the number of rich controls like- drill down grids, sliders, panels, tabs
and cross browser compatibility.
Toward a proof-of-concept, we created a single interface comprising of the following widgets: navigation
panel, search panel (basic, advanced and recent tabs), drill down data grid, customizable help,
feedback/poll panel and an RSS feed panel.
Next, we customized these widgets to selectively expose methods and properties that are useful to the
customer’s business. For example: a “save recent search” widget exposed server-side and client-side
properties in such a fashion that it allowed the application invoking this widget to store data in a standard
format, and later display it based on search scope and other attribute. This widget would later be used by
the genealogy application as well as the inventory application. Similar approach was used to build polls,
news-feeds, grids and other common recurring interaction patterns.
Finally we turned the widgets loose on developers who threw the code together.
Page 5 of 6
© 2009, Harbinger Systems, All Rights Reserved

6.
Initial results of this approach at this company are very promising. Not only did the first two applications
roll out with a consistent user experience, they also have got good visibility with top management due to
their rich user interface and visual drill down capabilities. The IT organization has expressed its
appreciation and has committed itself to extend this approach to other applications in business
intelligence domain.
Page 6 of 6
© 2009, Harbinger Systems, All Rights Reserved