Web Widgets
Time your website with
WebWait - from the creator of AjaxPatterns.orgFrom Ajax Patterns
Evidence: 2/2.
Tags: Ajax Widget, Flash Widget, Gadget, Widset, Web Widget
Contents |
Ajax/Javascript Programming and Usability in "Ajax Design Patterns" Book |
In a Blink
Initial State
You have content or services to offer.
Problem
How can you syndicate your content and services on other websites?
Goal Story
Doc is browsing Mega-Popular Blog for Doctors and Stuff. Fortunately, the blog owner has installed some widgets, so while staying on the blog Doc can see a number of widgets provided live by other companies: a list of recent relevant posts in the blogosphere, a slideshow of recent images tagged as "medical", and an interactive drug lookup tool.
Forces
Solution
Provide ready-made widgets so that others can embed your content and services into their web pages.
Decisions
Platform standard versus generic technology?
While there are many widget platforms around, it's also quite straightforward to make a widget with generic technology. Platform standards have the following advantages over generic technology:
- You will probably have a richer set of capabilities in your arsenal. Nowadays, these go well beyond just UI capabilities, and includes the ability to hook into user details and charge users for services.
- Your widget becomes part of a community and the platform will make it easy for users to select the widget and share it with others.
- For "walled garden" platforms, this might be the only way you can get a widget in the hands of its users. If the platform is valuable enough, this alone will justify the custom development required.
Generic technologies have the following advantages over platform standards:
- There is less of a learning curve.
- There is less custom development; one widget works in many places.
- You can probably reuse more code from your regular web application or even develop a single widget that can be used in both your application and published for external use.
Which platform(s) to develop for?
If you go the platform route, you'll need to decide exactly which platform or platforms to build widgets for. This will depend on factors alluded to above: how valuable is the platform, how much functionality do you get, how easy is it to program for.
Which generic technology to use?
If you prefer generic technology, you will have to choose which style to use. As with platforms, you might choose more than one, and you might also develop, simultaneously, one or more versions for a platform. TODO
Will publishers require an account?
Real-World Examples
ILikeIt
Slide
Flickr
FeedDigest
Code Example
A code example
Refactoring Illustration
Some patterns cover the coding topics in terms of a refactoring illustration. Refactoring is more in line with reality, since you rarely start working on a system from scratch. Note that Martin Fowler originally defined "refactoring" as a code change without any user-observable behaviour change. I am using the broader definition, now in common industry parlance, of a a bite-sized, incremental, improvement, which may well be noticeable in userland.
The ajaxpatterns.org demos are organised around this concept. For most of the examples, there is an initial, "embryonic", Ajaxian application. Then, there are several parallel refactorings applied to the same demo, each retained in a separate subdirectory. And each of these refactorings may have a further refactoring applied, contained in a deeper subdirectory. What emerges on the site is a tree structure, with the prorgram having evolved in different ways.
For example, look at one "strain" of the "sum" demo: Cache With Expiry, whose origins are evident in its URL ending: /sum/xml/
- /run/sum/: First, there is the basic demo at /sum/. Enter some numbers and the server responds with a sum. As a basic Ajaxian application - with no form submission involved - there are some foundational technologies illustrated here, but that's about it.
- /run/sum/xml/: Next, the sum is refactored to receive results in XML form. Structured XML Response at work. The "xml" prefix on the URL tells you its lineage.
- /run/sum/xml/cache: One benefit of the new XML form is its convenience for caching, so a further evolution is a basic cache. A refactoring illustration for the Browser-Side Cache pattern.
- /run/sum/xml/cache/expiry: Finally, the cache undergoes a further improvement. This time, a concession to the laws of physics is made, and the cache is now of finite size. Unused elements expire. So here's a further refactoring illustration for Browser-Side Cache.
In most cases, there's only one level of refactoring from the basic demo. Compare the cache exmaple to another "legacy" of the basic sum demo, the [/run/sum/uniqueURL/ Distinct URL demo].
- /run/sum/: Again, the starting point is thew basic sum demo.
- /run/sum/uniqueURL: Now, the basic sum is refactored in a different direction, to illustrate the Unique URLs pattern.
So the difference from one directory to another is usually quite small. In many cases, the delta provides a tightly-focused illustration of just one or two patterns.
How do bed bugs work? Bed bugs are back. Many of us didn't even know they were real, but the little blood suckers are showing up in record numbers
Related Patterns
Patterns in this collection that are somehow related to this pattern, other than the alternative patterns which would have appeared in the previous section. For example, two patterns may share a common technology or may complement each other particularly well.
Visual Metaphor
A visual metaphor is proposed to firmly [1]
Want to Learn More?
Links to any original references, as well as any other relevant material.
Acknowledgements
Most patterns in the collection were discovered, not created. As well as the examples above, this section is a place where people can be acknowledged for their contributions.
