Best Practices in Widget Development - Examples and Counterexamples

© www.role-project.eu

Best Practices in Widget Development Examples and Counterexamples

Daniel Dahrendorf (IMC)

ROLE Developer Camp,

Lausanne, Switzerland

August 23, 2010

© www.role-project.eu23.08.2010

Dr Stephen Dann from flickr.com jbvkoos from flickr.com


DESIGN AND USABILITY

23.08.2010


In General

• Focus on a single task

– Give your end user a single functionality

• Own added Value

– Do not create a Widget which requires a second widget

• Self explanatory interface

– There should be no need for help text or support

23.08.2010


Size of Widgets

23.08.2010

• Use a standard height

• The widget should scale between 250px and 500px

– Use a width of 100% for the main elements of the widget

– Center elements

• Use views

– Canvas, home and profile views


Customization

• Let the user customize the widget

– Color

– Background

– Content

• Provide always default or sample values

and include a “welcome mode”

• Use the user preferences feature

of Google Gadgets

23.08.2010


Use Space effectively

• Avoid scrollbars

• Use tabs

• Use paging

23.08.2010


User Account

• Content should be interesting even the user is not logged in

• State the benefits of creating an account

• Use OAuth if possible

23.08.2010


DEVELOPMENT

23.08.2010


Development Environment

• Own Apache Shindig Server

– A web application which can be run e.g.

in a Apache Tomcat

• OSDE

– Eclipse plugin with built in Apache

Shindig server

• Google Gadget Editor

– A Google gadget which provides an editor

and the possibility to save the widgets at

iGoogle

23.08.2010


Development Environment

• Own Apache Shindig Server

– A web application which can be run e.g.

in a Apache Tomcat

– Comfortable way to create complex

interacting widgets

23.08.2010


Using the features provided by the gadget API

• The Gadget and OpenSocial API provides a lot of useful

features:– fetch social data

– provide UI element

– Get data from external sources

• Only available for type=“html’’ widgets

23.08.2010


Selected Features:

• Tabs– Creates customizable tabs

• Setprefs– Allows setting of user preferences

• Pubsub (OpenSocial 0.8 only)– Inter-widget-communication

– Use OpenApp instead (http://code.google.com/p/open-app/)

• Internationalization– Provides a mechanism to

translate widgets

23.08.2010


makeRequest and the Same Origin Policy

• The gadget API provides a function to fetch

HTML/XML/JSON content (OpenSocial 0.8):

gadgets.io.makeRequest(url, callback, opt_params)

• As widgets run in iFrames this proxy approach allows to

fetch data from other domains (same origin policy)

• Other approaches to solve cross domain problems are:

– JSONP (retrieving JSON via Script Tags)

– PMRPC (http://code.google.com/p/pmrpc/)

23.08.2010


Caching Problems

• If you are using makeRequest() to fetch content that is

updated more than once an hour, such as feed data, you

might not get the latest updates

23.08.2010


Refreshing the Content Cache

• Solution: create a wrapper with a refresh interval

23.08.2010

function makeCachedRequest(url, callback, params,

refreshInterval) {

var timestamp = new Date().getTime();

var sep = "?";

if (refreshInterval && refreshInterval > 0) {

timestamp =

Math.floor(timestamp / (refreshInterval * 1000));

}

if (url.indexOf("?") > -1) {

sep = "&";

}

url = [ url, sep, "nocache=", timestamp ].join("");

gadgets.io.makeRequest(url, callback, params);

}


Caching of external files

• Container caches:

– JavaScript added with <script>

– CSS added with <link>

– Content got using the gadget API

• Further because of the widget infrastructure only absolute

links are allowed

• External files are needed if the widget becomes more

complex

23.08.2010


Loading JavaScript / CSS dynamically

1. Determine the location of the xml

2. Create mechanism for loading JS and CSSjQuery provides a cross-browser require script plugin (requireScript)

3. Load the js/css in gadget init

23.08.2010

function getModuleBase() {

if (window.__moduleBase)

return window.__moduleBase;

if (_args){

var moduleBase = _args()['url'];

moduleBase = moduleBase.substring(0, moduleBase.lastIndexOf('/') + 1);

window.__moduleBase = moduleBase;

return window.__moduleBase;

}

alert('Can not find module base. Gadget may not work properly.');

return '';

};

function init() {

var useCaching = false;

addScript("js/default.js",useCaching);

addStylesheet("css/style.css",useCaching);

};

gadgets.util.registerOnLoadHandler(init);

http://www.bitsbythepound.com/include-

external-javascript-and-css-files-with-a-

google-wave-gadget-249.html

http://www.bitsbythepound.com/include-external-javascript-and-css-files-with-a-google-wave-gadget-249.html
























Performance

• Goal: Reduce size of the files and number of HTTP requests

• Minify JavaScript code

– E.g. http://www.crockford.com/javascript/jsmin.html

• Pack all stuff in one XML file

– Suggestion of Google

• Use the containers’ cache– gadgets.io.getProxyUrl

• More sources for optimization:

– http://code.google.com/intl/de-DE/apis/gadgets/docs/publish.html

– http://wiki.opensocial.org/index.php?title=OpenSocial_Latency_Meas

urement

23.08.2010

Maintainability VS. Performance?

http://code.google.com/intl/de-DE/apis/gadgets/docs/publish.html



http://wiki.opensocial.org/index.php?title=OpenSocial_Latency_Measurement

http://wiki.opensocial.org/index.php?title=OpenSocial_Latency_Measurement


Performance Testing and debugging

• Use e.g. the Firebug extension of Firefox for debugging and

measuring the performance

23.08.2010


Conclusions

• Guidelines are helping to provide a user friendly interface

• Customizations allows users to personalize their widgets

• An own Apache Shindig server can be used to develop

interacting widgets

• Using the Gadget API prevents to “reinvent the wheel”

• Caching and cross domain problems can be handled with

several methods

• A widget can be optimized regarding its performance

• Tools are available for debugging and performance

measuring

23.08.2010


ROLE ALLIANCE PROGRAM

What is the Alliance Program?

A partner network of strategic users, vendors and other

stakeholder

Why should I become a member?

As a member you have a lot of benefits e.g., access to our

showcase platform, free visit of specific workshops, test

of prototypes or attendance at Alliance Partner meetings

How can I become part of the Alliance Program?

Please register under

http://www.roleproject.eu/AllianceProgram

23.08.2010


References

• http://www.google.com/webmasters/gadgets/guidelines.html

• http://www.seoish.com/how-to-internationalize-google-

gadgets/

• Lal, R. and Chava, L. C. 2010 Developing Web Widget with

Html, Css, JSON and Ajax: a Complete Guide to Web

Widget. CreateSpace.

• http://www.bitsbythepound.com/include-external-javascript-

and-css-files-with-a-google-wave-gadget-249.html

• http://code.google.com/intl/de/apis/gadgets/docs/remote-

content.html

23.08.2010

http://www.google.com/webmasters/gadgets/guidelines.html

http://www.seoish.com/how-to-internationalize-google-gadgets/
































http://code.google.com/intl/de/apis/gadgets/docs/remote-content.html



Best Practices in Widget Development - Examples and Counterexamples

Technology

Transcript of Best Practices in Widget Development - Examples and Counterexamples