Did a bit of research on mashup couple of months ago and would like to share a short write up about it.

The term mashup originated from composing songs or musics. Wikipedia defines it as “a song or composition created by blending two or more songs, usually by overlaying the vocal track of one song seamlessly over the music track of another”

The mashup I will be talking about here is about IT applications and Wikipedia defines it as “a web page or application that combines data or functionality from two or more external sources to create a new service”. The data or functionality are typically from other sites and accessible via APIs, XML feeds, screen-scraping, mashup server, etc. The diagram below should help to illustrate the definition.


For a long time we have seen web portal, starting with Yahoo! and spreading to enterprise portal. So, how is mashup different from portal? I did a screen capture from wikipedia to illustrate the difference. ( Click the figure below to see more…

Mashup vs Portal
Mashup vs Portal

Mashup itself can be implemented at any of the 3 layers, namely

  • Presentation
  • Business Logic
  • Data
Mashup Technology Domain
Mashup Technology Domain

Mashup at presentation layer is the most common one we’ve seen. Many sites combining Google Maps and own data to provide new services. Those services will then rendered as gadget (Google and Open Social Standard), widget (IBM term), Badges (Yahoo! term).

Mashup at Presentation Layer
Mashup at Presentation Layer

Mashup at logic/process layer and data layer typically done with the help of mashup server or application server. The definition of mashup at business logic layer is a little unclear to me because it looks like any server-side integration (using application server or service bus).

Data mashup can be implemented at client and server-side. Like business logic, server-side data mashup require mashup server or application server. While client-side can be implemented using on-demand Javscript.

Each of the components from the “smallest”, such as APIs, XML feeds can be assembled to create a new service or application by using a mashup platform or on-demand JavaScript. The diagram below sh0ws how each component connected.

Mashup Stack
Mashup Stack

Reference site

  • Yahoo Pipes – Mashups Development Tool
  • Google Sites – Mashups Platform
  • IBM Lotus Mashups – Mashups Platform. See the video tutorial below. It is still at early stage.  When I tried it out, it does not support IE 8 and FF 3.5.x. Future update should support them.
  • Mashups Directory
  • Kent County Council (UK)
  • Boeing Mashup – See the video below. It shows how Boeing uses IBM Lotus to develop a new services.
  • Kapow Technologies – Known for its screen-scraping product. However it has more.
  • My Twitter Nearby – did a simple mashup combining twitter data and google map to create twitter nearby. If you want to try, just click somewhere in the map and wait for awhile. You will see tweet nearby the area you click.

If you are curious about the IBM Lotus Mashup then watch the following videos:

Do share with me your thought on Mashup and how your organization make use of it.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s