Mashups: What Are They? Mashup Genres And Technologies - Part 1

Robin Good
MasterNewMedia
Published in
12 min readJan 9, 2024

--

Mashups are an exciting genre of interactive Web applications that draw upon content retrieved from external data sources to create entirely new and innovative services. They are a hallmark of the second generation of Web applications informally known as Web 2.0.

Photo credit: © Quasimondo — © Design by Jasmine T.

The combination of data modelling technologies stemming from the Semantic Web domain and the maturation of loosely coupled, service-oriented, platform-agnostic communication protocols is finally providing the infrastructure needed to start developing applications that can leverage and integrate the massive amount of information that is available on the Web.

As mashup applications gain higher visibility, it will be interesting to see how the genre impacts social issues such as fair use and intellectual property, as well as other application domains that integrate data across organizational boundaries, such as grid computing and business-to-business workflow management.

For a deeper-dive into mashup development, stay tuned for the launching of a new series of tutorials on developerWorks that will teach you how to construct your own mashups.

In fact, the series will even teach you how to use Semantic Web technology and ontologies to enable others to create their own mashups.

This introductory article explores:

a) What it means to be a mashup,

b) The different classes of popular mashups constructed today, and

c) The enabling technologies that mashup developers leverage to create their applications. Additionally, you’ll see many of the emerging technical and social challenges that mashup developers face.

Mashups: The New Breed of Web App

by Duane Merrill



Introduction

A new breed of web-based data integration applications is sprouting up all across the Internet.

Colloquially termed mashups, their popularity stems from the emphasis on interactive user participation and the monster-of-Frankenstein-like manner in which they aggregate and stitch together third-party data.

The sprouting metaphor is a reasonable one; a mashup Web site is characterized by the way in which it spreads roots across the Web, drawing upon content and functionality retrieved from data sources that lay outside of its organizational boundaries.

This vague data-integration definition of a mashup certainly isn’t a rigorous one.

A good insight as to what makes a mashup is to look at the etymology of the term: it was borrowed from the pop music scene, where a mashup is a new song that is mixed from the vocal and instrumental tracks from two different source songs (usually belonging to different genres).

Like these “bastard pop” songs, a mashup is an unusual or innovative composition of content (often from unrelated data sources), made for human (rather than computerized) consumption.

So, what might a mashup look like? The ChicagoCrime.org Web site is a great intuitive example of what’s called a mapping mashup.

One of the first mashups to gain widespread popularity in the press, the Web site mashes crime data from the Chicago Police Department’s online database with cartography from Google Maps.

Users can interact with the mashup site such as instructing it to graphically display a map containing pushpins that reveal the details of all recent burglary crimes in South Chicago. The concept and the presentation are simple, and the composition of crime and map data is visually powerful.

In this first part of this report the focus is on Mashup genres, as I’ll guide you to survey the popular genres of mashups, including mapping mashups. Also in this part, Related Technologies overviews the technology landscape that relates to the construction and operation of mashups.

In the yet-to-be-published second part of this report, I will cover Technical and Social challenges affecting mashups.

Mashup Genres

In this section, I give a brief survey of the prominent mashup genres.

⁣⁣
Mapping Mashups

In this age of information technology, humans are collecting a prodigious amount of data about things and activities, both of which are wont to be annotated with locations.

All of these diverse data sets that contain location data are just screaming to be presented graphically using maps. One of the big catalysts for the advent of mashups was Google’s introduction of its Google Maps API.

This opened the floodgates, allowing Web developers (plus hobbyists, tinkerers, and others) to mash all sorts of data (everything from nuclear disasters to Boston’s CowParade cows) onto maps. Not to be left out, APIs from Microsoft (Virtual Earth), Yahoo (Yahoo Maps), and AOL (MapQuest) shortly followed.

⁣⁣⁣
Video and Photo Mashups

The emergence of photo hosting and social networking sites like Flickr with APIs that expose photo sharing has led to a variety of interesting mashups.

Because these content providers have metadata associated with the images they host (such as who took the picture, what it is a picture of, where and when it was taken, and more), mashups designers can mash photos with other information that can be associated with the metadata.

For example, a mashup might analyze song or poetry lyrics and create a mosaic or collage of relevant photos or display social networking graphs based on common photo metadata (subject, timestamp, and other metadata).

Yet another example might take as input a Web site (such as a news site like CNN) and render the text in photos by matching tagged photos to words from the news.

⁣⁣⁣⁣
Search and Shopping Mashups

Search and shopping mashups have existed long before the term mashup was coined.

Before the days of Web APIs, comparative shopping tools such as BizRate, PriceGrabber, MySimon, and Google’s Froogle used combinations of business-to-business (b2b) technologies or screen-scraping to aggregate comparative price data.

To facilitate mashups and other interesting Web applications, consumer marketplaces such as eBay and Amazon have released APIs for programmatically accessing their content.

⁣⁣⁣⁣⁣
News Mashups

News sources (such as the New York Times, the BBC, or Reuters) have used syndication technologies like RSS and Atom (described in the next section) since 2002 to disseminate news feeds related to various topics.

Syndication feed mashups can aggregate a user’s feeds and present them over the Web, creating a personalized newspaper that caters to the reader’s particular interests.

An example is Diggdot.us, which combines feeds from the techie-oriented news sources Digg.com, Slashdot.org, and Del.icio.us.⁣⁣⁣⁣⁣⁣

Related Technologies

This section gives an overview of the technologies that are facilitating the development of mashups. For further information about any of these technologies, consult the Resources section at the end of this article.

⁣⁣⁣⁣⁣⁣⁣
The Architecture

A mashup application is architecturally comprised of three different participants that are logically and physically disjoint (they are likely separated by both network and organizational boundaries):

1) API/content providers,

2) The mashup site, and

3) The client’s Web browser.

⁣⁣⁣⁣⁣⁣⁣⁣
- The API/Content Providers

These are the (sometimes unwitting) providers of the content being mashed. In the ChicagoCrime.org mashup example, the providers are Google and the Chicago Police Department.

To facilitate data retrieval, providers often expose their content through Web protocols such as REST, Web Services, and RSS/Atom (described below).

However, many interesting potential data sources do not (yet) conveniently expose APIs.

Mashups that extract content from sites like Wikipedia, TV Guide, and virtually all government and public domain Web sites do so by a technique known as screen scraping.

In this context, screen scraping connotes the process by which a tool attempts to extract information from the content provider by attempting to parse the provider’s Web pages, which were originally intended for human consumption.

⁣⁣⁣⁣⁣⁣⁣⁣⁣
· The Mashup Site

This is where the mashup is hosted. Interestingly enough, just because this is where the mashup logic resides, it is not necessarily where it is executed.

On the one hand, mashups Can be implemented similarly to traditional Web applications using server-side dynamic content generation technologies like Java servlets, CGI, PHP or ASP.

Alternatively, mashed content can be generated directly within the client’s browser through client-side scripting (that is, JavaScript) or applets. This client-side logic is often the combination of code directly embedded in the mashup’s Web pages as well as scripting API libraries or applets (furnished by the content providers) referenced by these Web pages.

Mashups using this approach can be termed rich internet applications (RIAs), meaning that they are very oriented towards the interactive user experience. (Rich internet applications are one hallmark of what’s now being termed “Web 2.0”, the next generation of services available on the World Wide Web.)

The benefits of client-side mashing include less overhead on behalf of the mashup server (data can be retrieved directly from the content provider) and a more seamless user experience (pages can request updates for portions of their content without having to refresh the entire page). The Google Maps API is intended for access through browser-side JavaScript and is an example of client-side technology.

Often, mashups use a combination of both server and client-side logic to achieve their data aggregation.

Many mashup applications use data that is supplied directly to them by their user base, making (at least) one of the data sets local.

Additionally, performing complex queries on multiple-sourced data (such as “Show me the average purchase price for real estate bought by actors who have co-starred in movies with Kevin Bacon”) requires computation that would be infeasible to perform within the client’s Web browser.

⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣
· The Client’s Web Browser.

This is where the application is rendered graphically and where user interaction takes place. As described above, mashups often use client-side logic to assemble and compose the mashed content.

⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣
Ajax

There is some dispute over whether the term Ajax is an acronym or not (some would have it represent “Asynchronous JavaScript + XML”). Regardless, Ajax is a Web application model rather than a specific technology. It comprises several technologies focused around the asynchronous loading and presentation of content:

· XHTML and CSS for style presentation

· The Document Object Model (DOM) API exposed by the browser for dynamic display and interaction

· Asynchronous data exchange, typically of XML data

· Browser-side scripting, primarily JavaScript

When used together, the goal of these technologies is to create a smooth, cohesive Web experience for the user by exchanging small amounts of data with the content servers rather than reloading and re-rendering the entire page after some user action.

You can construct Ajax engines for mashups from various Ajax toolkits and libraries (such as Sajax or Zimbra), usually implemented in JavaScript. The Google Maps API includes a proprietary Ajax engine, and the effect it has on the user experience is powerful: it behaves like a truly local application in that there are no scrollbars to manipulate or translation arrows that force page reloads.

⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣
Web protocols: SOAP and REST

Both SOAP and REST are platform-neutral protocols for communicating with remote services.

As part of the service-oriented architecture paradigm, clients can use SOAP and REST to interact with remote services without knowledge of their underlying platform implementation: the functionality of a service is completely conveyed by the description of the messages that it requests and responds with.

SOAP is a fundamental technology of the Web Services paradigm. Originally an acronym for Simple Object Access Protocol, SOAP has been re-termed Services-Oriented Access Protocol (or just SOAP) because its focus has shifted from object-based systems towards the interoperability of message exchange.

There are two key components of the SOAP specification. The first is the use of an XML message format for platform-agnostic encoding, and the second is the message structure, which consists of a header and a body.

The header is used to exchange contextual information that is not specific to the application payload (the body), such as authentication information. The SOAP message body encapsulates the application-specific payload.

SOAP APIs for Web services are described by WSDL documents, which themselves describe what operations a service exposes, the format for the messages that it accepts (using XML Schema), and how to address it.

SOAP messages are typically conveyed over HTTP transport, although other transports (such as JMS or e-mail) are equally viable.

REST is an acronym for Representational State Transfer, a technique of Web-based communication using just HTTP and XML. Its simplicity and lack of rigorous profiles set it apart from SOAP and lend to its attractiveness.

Unlike the typical verb-based interfaces that you find in modern programming languages (which are composed of diverse methods such as getEmployee(), addEmployee(), listEmployees(), and more), REST fundamentally supports only a few operations (that is POST, GET, PUT, DELETE) that are applicable to all pieces of information.

The emphasis in REST is on the pieces of information themselves, called resources.

For example, a resource record for an employee is identified by a URI, retrieved through a GET operation, updated by a PUT operation, and so on. In this way, REST is similar to the document-literal style of SOAP services.

⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣
Screen Scraping

As mentioned earlier, the lack of APIs from content providers often forces mashups developers to resort to screen scraping in order to retrieve the information they seek to mash.

Scraping is the process of using software tools to parse and analyze content that was originally written for human consumption in order to extract semantic data structures representative of that information that can be used and manipulated programmatically.

A handful of mashups use screen scraping technology for data acquisition, especially when pulling data from the public sector.

For example, real-estate mapping mashups can mash for sale or rental listings with maps from a cartography provider with scraped “comp” data obtained from the county records office.

Another mashup project that scrapes data is XMLTV, a collection of tools that aggregates TV listings from all over the world.

Screen scraping is often considered an inelegant solution and for good reasons.

It has two primary inherent drawbacks.

1. The first is that, unlike APIs with interfaces, scraping has no specific programmatic contract between content provider and content-consumer. Scrapers must design their tools around a model of the source content and hope that the provider consistently adheres to this model of presentation.

Websites have a tendency to overhaul their look and feel periodically to remain fresh and stylish, which imparts severe maintenance headaches on behalf of the scrapers because their tools are likely to fail.

2. The second issue is the lack of sophisticated, re-usable screen-scraping toolkit software, colloquially known as scrAPIs. The dearth of such APIs and toolkits is largely due to the extremely application-specific needs of each individual scraping tool.

This leads to large development overheads as designers are forced to reverse-engineer content, develop data models, parse, and aggregate raw data from the provider’s site.

⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣
Semantic Web and RDF

The inelegant aspects of screen scraping are directly traceable to the fact that content created for human consumption does not make good content for automated machine consumption.

Enter the Semantic Web, which is the vision that the existing Web can be augmented to supplement the content designed for humans with equivalent machine-readable information. In the context of the Semantic Web, the term information is different from data; data becomes information when it conveys meaning (that is, it is understandable).

The Semantic Web has the goal of creating Web infrastructure that augments data with metadata to give it meaning, thus making it suitable for automation, integration, reasoning, and re-use.

The W3C family of specifications, collectively known as the Resource Description Framework (RDF) serves the purpose of providing methodologies to establish syntactic structures that describe data.

XML in itself is not sufficient; it is too arbitrary in that you can code it in many ways to describe the same piece of data. RDF-Schema adds to RDF’s ability to encode concepts in a machine-readable way.

Once data objects can be described in a data model, RDF provides for the construction of relationships between data objects through subject-predicate-object triples (“subject S has relationship R with object O”).

The combination of data model and graph of relationships allows for the creation of ontologies, which are hierarchical structures of knowledge that can be searched and formally reasoned about.

For example, you might define a model in which a “carnivore-type” as a subclass of “animal-type” with the constraint that it “eats” other “animal-type”, and create two instances of it: one populated with data concerning cheetahs and polar bears and their habitats, another concerning gazelles and penguins and their respective habitats.

Inference engines might then “mash” these separate model instances and the reason that cheetahs might prey on gazelles but not penguins.

RDF data is quickly finding adoption in a variety of domains, including social networking applications (such as FOAF — Friend of a Friend) and syndication (such as RSS, which I describe next).

In addition, RDF software technology and components are beginning to reach a level of maturity, especially in the areas of RDF query languages (such as RDQL and SPARQL) and programmatic frameworks and inference engines (such as Jena and Redland).

⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣
RSS and ATOM

RSS is a family of XML-based syndication formats. In this context, syndication implies that a Web site that wants to distribute content creates an RSS document and registers the document with an RSS publisher.

An RSS-enabled client can then check the publisher’s feed for new content and react to it in an appropriate manner.

RSS has been adopted to syndicate a wide variety of content, ranging from news articles and headlines, changelogs for CVS check-ins or wiki pages, project updates, and even audiovisual data such as radio programs. Version 1.0 is RDF-based, but the most recent, version 2.0, is not.

Atom is a newer but similar syndication protocol. It is a proposed standard at the Internet Engineering Task Force (IETF) and seeks to maintain better metadata than RSS, provide better and more rigorous documentation, and incorporate the notion of constructs for common data representation.

These syndication technologies are great for mashups that aggregate event-based or update-driven content, such as news and weblog aggregators.

End of Part 1

In the second, upcoming part: Mashups: What Are They? Technical And Social Challenges — Part 2

Originally written by Duane Merrill and first published on MasterNewMedia on Thursday, August 9 2007, as “Mashups: What Are They? Mashup Genres And Technologies - Part 1”

Robin Good

--

--