Widgets have clearly emerged as a powerful means of expression of application interfaces in recent times. This Harbinger Systems white paper enumerates the benefits of widgetization, and provides a check list for their implementation.

1. HSTW - 104
Widgetization:
A New Paradigm
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
Introduction 3
Background 3
Benefits of Widgets 4
Problem Statement 6
Your Roadmap to Widgets 6
Summary 8
Samples 8
Page 2 of 8
© 2009, Harbinger Systems, All Rights Reserved

3. Introduction
With the proliferation of Web applications in a Web 2.0 world, widgets have clearly emerged as a powerful
means of expression of application interfaces in recent times! It is easy to see why. Widgets take
applications to the next level of usability and user interface richness by making them modular and easy to
consume. With widgets, applications are capable of facilitating mash-ups and support write-once publish-
everywhere model.
Background
In the past, Web applications mostly had all features in-built and delivered to end-user via traditional
HTML pages/Forms. Even though data was fetched from multiple sources, the communication and
delivery mechanism was not very extensible. There were several drawbacks to this approach.
- Ability to customize/personalize User Interface at a module level was limited.
- Application performance was an issue mostly because of synchronous calls.
- Applications were not built to handle content mash-ups.
- Integration was not as seamless, since only the APIs were modularized and not the user interface.
- Subscribing to multiple/alternate solutions was not easily possible.
- Publishing of features/modules for global/public use was not possible.
Figure 1. Frequently Asked Questions (FAQ) in Traditional Website/Applications
Widgetization helps overcome the above drawbacks. However, choosing a widget development strategy
is central to success of the next generation application.
Page 3 of 8
© 2009, Harbinger Systems, All Rights Reserved

4. Benefits of Widgets
Through widgets applications can easily separate and customize features at a more granular level without
having to compromise either on functionality or usability.
Figure 3. FAQ Widget using a TeemingPod FAQ Widget
For example, solutions like TeemingPod (which has a FAQ Widget) can be used to provide a rich, in-
context, social-assisted FAQ experience than the traditional FAQ approach.
Listed below are some key benefits of widgetization.
BENEFIT 1: RICH UI
Widgets can be designed to have extremely rich graphical user interface, thereby enhancing the user
experience. Tabs, collapsible windows, drag and drop controls, trees, grids are some controls that are
very commonly used. In addition if you develop widgets using Flash or Sliverlight, you can design custom
graphical shapes that align more closely with your application, which is not easily possible using
traditional web development technique.
Page 4 of 8
© 2009, Harbinger Systems, All Rights Reserved

5. BENEFIT 2: ASYNCHRONOUS
Widgets are usually designed to communicate with the server in an asynchronous mode. This
dramatically improves system performance. Asynchronous calls also help in making sure that some data
is always readily available for user, thereby reducing the wait time. For example, while querying a
database with a huge set of records, one can first fetch only the required subset of records that need to
be displayed on the first page and in subsequent calls create the paging interface.
BENEFIT 3: MODULAR
Like traditional applications, widgets are also expected to be modular. Being modular facilitates easy
consumption by multiple sources. One of the key reasons for designing a widget is to ensure that they are
pluggable and easy to integrate. Widgets are developed either to provide a single functionality (for
example, a simple clock widget, which displays time as per the selected time-zone) or mash-up data from
multiple sources to act as a service (for example, a weather widget, which combines time and climate
widgets).
BENEFIT 4: API
Widgets need to be developed such that they are consumers of APIs. This allows a clear separation of
user interface from communication protocol and business logic (usually written on the server side). The
APIs should be designed in such a fashion that they are agnostic to the widget user interface. For
example, this will enable a weather widget to pull data from different sources depending on the availability
of a weather provider service or user preference.
BENEFIT 5: PLATFORM
Facebook, Google etc. provide the ability to publish widgets. These platforms allow categorization of
widgets and facilitate sharing of social information either through a proprietary API (such as Facebook) or
open API (OpenSocial). This allows developers to create widgets that change their behavior to reflect the
social preference of a user or community.
Page 5 of 8
© 2009, Harbinger Systems, All Rights Reserved

6. Problem Statement
Attractive as they may seem, like all emerging concepts, widgets pose their own set of challenges.
Developing a widget requires a lot of thought because you are faced with myriad design choices. For
starters, there are a variety of AJAX/UI development frameworks like Yahoo UI, Dojo, EXTJS,
Script.aculo.us, etc, which can be used to develop widgets. One also needs to consider the widget
platforms like Google, Facebook, MySpace where one can publish these widgets. These platforms also
support development of simple widgets using their APIs.
To build a powerful widget, then, one needs to make the right choice combining multiple perspectives,
including the User Interface, Usability, Web Interface (APIs) and Platform for Publishing and
Maintenance.
Figure 2 Widget Development Tag Cloud
Your Roadmap to Widgets
Sound understanding of AJAX frameworks, Flash/Silverlight, PHP etc. and good Web 2.0 domain
knowledge are required to successfully develop great widgets. At Harbinger, we use this simple checklist
in developing widgets:
Parameter Points to Check
High-level Requirements Before developing a widget the high-level requirements need to be
(Platform, Technology, understood thoroughly. For example:
Hosting etc.) - widget needs to run on Windows, Mac, Cell Phones
- widget will be hosted / behind firewall
- widget needs to be thick client / thin client
- widget is session dependent or not (cookie /app server/ database)
Page 6 of 8
© 2009, Harbinger Systems, All Rights Reserved

7. Rich Internet Application The implementation team needs to have in-depth understanding of AJAX
(RIA) frameworks and technologies like Flash and Silverlight in order to quickly
develop the widgets.
Interoperability (API) Involves developing a Content Data Structure and Communication API
for the widget interface.
Browser Compatibility Involves making JavaScript/HTML tweaks to support all browsers. This
gets even more complex if one needs to write browser
extensions/toolbars.
Usability Since widgets are used in the context of web applications they also need
to comply with the same usability requirements. One cannot have
different usability parameters for website and widgets. This will lead to
bad user experience. Therefore one needs to be careful while designing
widgets and must take the usability requirements of the corresponding
web application into consideration.
Personalization Widgets have to be designed such that the user can personalize as per
his/her requirements. This goes beyond choosing color, fonts. It can also
have features like automatically scheduling for updates, synchronization
etc.
Installation Widgets usually don’t require installation unless they use a browser
extension or offer some offline functionality. If widgets are dependent on
Flash or other external party plug-ins, then those scenarios needed to be
handled carefully for better use experience.
Upgrade While upgrading a widget one needs to consider the existing user
rd
preferences, cached data that already exists, and browser/3 party plug-
in dependencies. Also the interface upgrade has to be done in an
incremental manner to ensure better usability.
Performance, Scalability Widgets need to be developed such that they don’t degrade in
performance as the # of users increase. While designing widgets one
should not ignore parameters like the number of requests made, amount
of data transferred, data compression, synchronous v/s asynchronous
Page 7 of 8
© 2009, Harbinger Systems, All Rights Reserved

8. calls, browser caching, server caching, serialization etc. All these
parameters effect performance and scalability
Security Widgets are designed for enhancing user experience and improving the
functionality of a web application. However, this should not be done at the
cost of security. Encryption (SSL), Authentication (SSO, Open ID, and
SAML), Cross Domain Scripting, and Script Injection etc. must also be
considered while developing widgets to make them secure and usable.
Table 1 Widget Development Parameters
Summary
Widgetization offers users a rich, cool, modular and highly efficient mechanism of interaction with a
service or application that traditionally used to be very cumbersome or not very intuitive. For building next
generation applications one needs to strongly consider the role of widgets in their overall development
plan. In addition, one also needs to have a sound development strategy and awareness of all pitfalls in
developing widgets to create the right value for customers in a timely fashion and within budget.
Samples
Courtesy TeemingPod (www.teemingpod.com), Raptivity (www.raptivity.com)
Page 8 of 8
© 2009, Harbinger Systems, All Rights Reserved