Widgetization: A New Paradigm


Published on

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.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Widgetization: A New Paradigm

  1. 1. HSTW - 104 Widgetization: A New Paradigm A Harbinger Systems White Paper © 2009, Harbinger Systems, All Rights Reserved
  2. 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. 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. 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. 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. 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. 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. 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